/* Keep the preparation board legible while giving portraits, gear and reserves less space. */
#prep-view #squad,
#prep-view #rear-squad {
  width: 100%;
  min-width: 0;
  gap: 3px;
  margin-inline: auto;
}
#prep-view #squad { width: 80%; max-width: 424px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
#prep-view #rear-squad { max-width: 530px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
#prep-view :is(#squad, #rear-squad) > .formation-cell {
  height: auto !important;
  min-height: 0;
  aspect-ratio: 1;
}
#prep-view :is(#squad, #rear-squad) .operator-piece {
  --seat-slot: clamp(16px, 1.7vw, 20px);
}
#prep-view :is(#squad, #rear-squad) .operator-piece > .roster-member {
  inset: 0;
  height: 100%;
}
#prep-view :is(#squad, #rear-squad) .operator-piece::before {
  background: linear-gradient(180deg, #07110c5c, transparent 28%, transparent 43%, #07110ce8 100%);
}
#prep-view :is(#squad, #rear-squad) .seat-stars { top: 1px; right: 3px; font-size: 10px; line-height: 16px; }
#prep-view :is(#squad, #rear-squad) .cell-index {
  top: 2px; left: 2px; width: 23px; height: 16px; padding: 0 1px; line-height: 16px;
}
#prep-view :is(#squad, #rear-squad) :is(.operator-relic-slots, .worn-equipment) {
  left: 3px;
  right: auto;
  width: max-content;
  max-width: calc(100% - 6px);
  height: var(--seat-slot);
  grid-template-columns: repeat(3, var(--seat-slot));
  justify-content: start;
  justify-items: start;
  gap: 1px;
}
#prep-view :is(#squad, #rear-squad) .operator-relic-slots { bottom: 2px; }
#prep-view :is(#squad, #rear-squad) .worn-equipment { bottom: calc(var(--seat-slot) + 3px); }
#prep-view :is(#squad, #rear-squad) :is(.operator-relic-slots, .worn-equipment) > .worn-icon {
  width: var(--seat-slot);
  height: var(--seat-slot);
  max-width: none;
  max-height: none;
  padding: 1px;
}

/* Eight portrait-only reserve spaces in one row, with horizontal cleanup for old overfull saves. */
#prep-view .bench-with-terminal { grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; }
#prep-view .bench-with-terminal.training-bench { grid-template-columns: minmax(0, 1fr); }
#prep-view #bench-squad {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-auto-columns: calc((100% - 21px) / 8);
  grid-auto-flow: column;
  justify-content: start;
  align-content: start;
  gap: 3px;
  width: min(100%, 500px);
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;
}
#prep-view #bench-squad > .bench-cell { width: 100%; height: auto; min-height: 0; aspect-ratio: 1; }
#prep-view #bench-squad .bench-cell:has(.operator-piece) > .cell-index { display: none; }
#prep-view #bench-squad .operator-piece { inset: 0; padding: 0; }
#prep-view #bench-squad .operator-piece > .roster-member {
  display: block !important;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1 !important;
}
#prep-view #bench-squad .operator-avatar { width: 100%; height: 100%; object-fit: cover; object-position: var(--face-x, 50%) 12%; }
#prep-view #bench-squad :is(.operator-namebar, .roster-copy, .worn-equipment, .operator-relic-slots) { display: none; }
#prep-view #bench-squad .oc-card-stars { top: 1px; right: 2px; font-size: 9px; }
#prep-view #bench-squad .empty-position { font-size: 18px; padding: 0; }
#prep-view #bench-terminal { min-height: 0; }

/* One preparation layout owns the three regions at every viewport size.
   Narrow/mobile screens use the same left rail and board, with a right drawer. */
html body.hbc-preparing #prep-view {
  --prep-bond-width: 54px;
  --prep-seat-size: clamp(54px, 12dvh, 100px);
  --prep-bench-size: 44px;
  --prep-inventory-width: clamp(228px, 24vw, 300px);
}
html body.hbc-preparing #prep-view .formation-workspace {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  flex: 1;
  min-width: 0;
  min-height: 0;
  gap: 10px;
  padding: 6px 0;
  align-items: stretch;
}
html body.hbc-preparing #prep-view .formation-workspace:has(> #prep-synergies:not([hidden])) {
  grid-template-columns: var(--prep-bond-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
html body.hbc-preparing #prep-view .formation-workspace > #prep-synergies:not([hidden]) {
  display: block !important;
  position: static;
  grid-area: 1 / 1;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 2px 5px 2px 0;
  border: 0;
  border-right: 1px solid var(--line);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
html body.hbc-preparing #prep-view #prep-synergies .hbc-bonds {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-content: start;
  width: 100%;
  height: auto;
  gap: 5px;
}
html body.hbc-preparing #prep-view #prep-synergies :is(.hbc-bonds > h3, .hbc-muted, .hbc-group-label, .hbc-legacy) { display: none !important; }
html body.hbc-preparing #prep-view #prep-synergies .hbc-bond {
  width: 40px;
  min-width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 3px !important;
  gap: 2px !important;
}
html body.hbc-preparing #prep-view #prep-synergies .hbc-bond .hi-symbol { width: 19px; height: 19px; flex-basis: 19px; }
html body.hbc-preparing #prep-view #prep-synergies .hbc-bond .hi-number { font-size: 9px; }
html body.hbc-preparing #prep-view .formation-workspace > .squad-stage {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html body.hbc-preparing #prep-view .formation-workspace:has(> #prep-synergies:not([hidden])) > .squad-stage { grid-area: 1 / 2; }
html body.hbc-preparing #prep-view .squad-stage > * { flex: none; min-width: 0; }
html body.hbc-preparing #prep-view .board-heading {
  position: static;
  height: 28px;
  min-height: 28px;
  padding: 0 2px 4px;
  margin: 0;
}
html body.hbc-preparing #prep-view :is(#board-count, #formation-state, #terminal-capacity, #terminal-next) { display: none !important; }
html body.hbc-preparing #prep-view .deployment-with-parcels {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 8px;
  width: 100%;
  margin: 0;
  align-items: center;
}
html body.hbc-preparing #prep-view .deployment-with-parcels:has(> .parcel-station[hidden]),
html body.hbc-preparing #prep-view .deployment-with-parcels.training-deployment { grid-template-columns: minmax(0, 1fr); }
html body.hbc-preparing #prep-view .deployment-grid {
  width: min(100%, calc(var(--prep-seat-size) * 5 + 12px));
  min-width: 0;
  margin-inline: auto;
  padding: 0;
  overflow: visible;
}
html body.hbc-preparing #prep-view .row-heading { height: 18px; min-height: 18px; margin: 0; padding: 1px 0; }
html body.hbc-preparing #prep-view :is(#squad, #rear-squad) { max-width: none; gap: 3px; }
html body.hbc-preparing #prep-view #squad { width: 80%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
html body.hbc-preparing #prep-view #rear-squad { width: 100%; grid-template-columns: repeat(5, minmax(0, 1fr)); }
html body.hbc-preparing #prep-view :is(#squad, #rear-squad) > .formation-cell { width: 100%; height: auto !important; aspect-ratio: 1; }
html body.hbc-preparing #prep-view .parcel-station {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 4px 0 4px 7px;
  gap: 4px;
  border: 0;
  border-left: 1px solid var(--line);
}
html body.hbc-preparing #prep-view .parcel-box { width: 100%; min-height: 82px; padding: 4px 0; }
html body.hbc-preparing #prep-view .parcel-case { width: 72px; height: 56px; }
html body.hbc-preparing #prep-view .case-lock { left: 50%; transform: translateX(-50%); }
html body.hbc-preparing #prep-view .bench-heading { height: 24px; min-height: 24px; margin: 5px 0 0; padding: 3px 0; }
html body.hbc-preparing #prep-view .bench-with-terminal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  width: 100%;
  gap: 8px;
  align-items: center;
}
html body.hbc-preparing #prep-view .bench-with-terminal.training-bench { grid-template-columns: minmax(0, 1fr); }
html body.hbc-preparing #prep-view #bench-squad { width: min(100%, calc(var(--prep-bench-size) * 8 + 21px)); margin-inline: auto; gap: 3px; }
html body.hbc-preparing #prep-view #bench-terminal {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  height: auto;
  min-height: 0;
  align-items: center;
  gap: 3px;
  padding: 2px 0 2px 6px;
}
html body.hbc-preparing #prep-view #terminal-level { grid-area: 1 / 1; font-size: 14px; }
html body.hbc-preparing #prep-view #terminal-upgrade { grid-area: 1 / 2; width: auto; min-width: 34px; height: 28px; min-height: 28px; padding: 2px !important; }
html body.hbc-preparing #prep-view .terminal-experience { grid-area: 2 / 1 / 3 / 3; margin: 0; font-size: 9px; }
html body.hbc-preparing #prep-view #terminal-price { display: none !important; }
html body.hbc-preparing #prep-view .formation-workspace > .formation-inspector { display: none !important; }
html body.hbc-preparing #prep-view #hbc-inspector-toggle { display: inline-flex !important; margin-left: auto; height: 28px; min-height: 28px; }
html body.hbc-preparing.hbc-inspector-open #prep-view .formation-workspace > .formation-inspector {
  display: block !important;
  position: absolute !important;
  inset: 0 0 0 auto !important;
  width: var(--prep-inventory-width) !important;
  max-width: calc(100% - var(--prep-bond-width) - 16px);
  height: auto;
  min-width: 0;
  min-height: 0;
  z-index: 50;
  overflow: auto;
  padding: 8px !important;
  background: #122019;
  border: 1px solid #506c5b;
  box-shadow: -8px 0 20px #0006;
}
html body.hbc-preparing #prep-view #hbc-panel-close { display: flex !important; min-height: 28px; height: 28px; padding: 3px; margin-bottom: 6px; }
html body.hbc-preparing #prep-view .formation-inspector .armory-heading > h3 { display: none !important; }
html body.hbc-preparing #prep-view .formation-inspector .prep-workbench { padding: 0; border: 0; min-width: 0; }
html body.hbc-preparing #prep-view .inventory-filters { flex-wrap: wrap; gap: 4px; }
html body.hbc-preparing #prep-view .unified-inventory { --inventory-cell-size: 46px; gap: 4px; }

@media (min-width: 900px) {
  /* Desktop keeps its full-size workspace; only mobile uses the compressed controls. */
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view {
    --prep-bond-size: clamp(46px, 3.5vw, 58px);
    --prep-bond-width: calc(var(--prep-bond-size) + 14px);
    --prep-seat-size: clamp(76px, 13dvh, 144px);
    --prep-bench-size: clamp(44px, 4.2vw, 64px);
    --prep-inventory-width: clamp(280px, 26vw, 380px);
    --prep-desktop-icon: clamp(21px, 1.7vw, 27px);
  }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view .formation-workspace { gap: clamp(10px, 1.2vw, 18px); padding: 10px 0; }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view #prep-synergies .hbc-bonds { gap: 8px; }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view #prep-synergies .hbc-bond {
    width: var(--prep-bond-size); min-width: var(--prep-bond-size);
    height: var(--prep-bond-size); min-height: var(--prep-bond-size);
    padding: 5px !important; gap: 3px !important;
  }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view #prep-synergies .hbc-bond .hi-symbol {
    width: var(--prep-desktop-icon); height: var(--prep-desktop-icon); flex-basis: var(--prep-desktop-icon);
  }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view #prep-synergies .hbc-bond .hi-number { font-size: 11px; }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view .board-heading { height: 34px; min-height: 34px; padding-bottom: 6px; }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view .row-heading { height: 24px; min-height: 24px; padding: 2px 0; }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view .bench-heading { height: 30px; min-height: 30px; margin-top: 10px; padding: 5px 0; }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view :is(.board-heading, .bench-heading, .row-heading) > .hi-control { height: 24px; min-height: 24px; }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view :is(.board-heading, .bench-heading, .row-heading, .inventory-filters, #terminal-upgrade) .hi-symbol {
    width: var(--prep-desktop-icon); height: var(--prep-desktop-icon); flex-basis: var(--prep-desktop-icon);
  }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view :is(#squad, #rear-squad) .operator-piece { --seat-slot: clamp(20px, 1.8vw, 28px); }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view :is(#squad, #rear-squad) .seat-stars { top: 3px; right: 4px; font-size: 12px; line-height: 18px; }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view #bench-squad .oc-card-stars { font-size: 11px; }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view .deployment-with-parcels { grid-template-columns: minmax(0, 1fr) clamp(96px, 8vw, 128px); gap: 10px; }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view .deployment-with-parcels:has(> .parcel-station[hidden]) { grid-template-columns: minmax(0, 1fr); }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view .parcel-case { width: clamp(72px, 6vw, 96px); height: clamp(56px, 4.7vw, 76px); }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view .parcel-box { min-height: 100px; }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view .bench-with-terminal { grid-template-columns: minmax(0, 1fr) clamp(128px, 11vw, 160px); gap: 10px; }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view .bench-with-terminal.training-bench { grid-template-columns: minmax(0, 1fr); }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view #terminal-level { font-size: 20px; }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view #terminal-upgrade { min-width: 40px; height: 36px; min-height: 36px; }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view .terminal-experience { font-size: 11px; gap: 4px; }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view .inventory-filters > .hi-control { min-width: 38px; height: 36px; min-height: 36px; }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view .unified-inventory { --inventory-cell-size: clamp(50px, 4vw, 62px); gap: 6px; }
}

/* The selected UI mode controls visibility. A narrow desktop browser panel is
   still desktop: reserve the right column instead of silently hiding it. */
  html:not(.haff-mobile-mode) body.hbc-preparing > :is(main, .topbar) { max-width: none; width: 100%; }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view .formation-workspace { grid-template-columns: minmax(0, 1fr) var(--prep-inventory-width); }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view .formation-workspace:has(> #prep-synergies:not([hidden])) { grid-template-columns: var(--prep-bond-width) minmax(0, 1fr) var(--prep-inventory-width); }
  /* Give the board the remaining height and the reserves their actual row height.
     Container height keeps square cards within the play area when the shop opens. */
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view .formation-workspace > .squad-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: max-content minmax(150px, 1fr) max-content max-content;
    align-content: stretch;
  }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view .deployment-with-parcels {
    container-type: size;
    min-height: 150px;
    align-items: center;
  }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view .deployment-grid {
    width: 100%;
    max-width: max(0px, calc((100cqh - 54px) * 2.5));
  }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view #bench-squad { width: 100%; max-width: none; }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view :is(#squad, #rear-squad) > .formation-cell { container-type: inline-size; }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view :is(#squad, #rear-squad) .operator-piece { --seat-slot: clamp(16px, 20cqw, 32px); }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view .formation-workspace > .formation-inspector,
  html:not(.haff-mobile-mode) body.hbc-preparing.hbc-inspector-open #prep-view .formation-workspace > .formation-inspector {
    display: block !important;
    position: static !important;
    grid-area: 1 / 2;
    inset: auto !important;
    width: auto !important;
    max-width: none;
    min-width: 0;
    min-height: 0;
    padding: 0 0 0 10px !important;
    overflow: auto;
    border: 0;
    border-left: 1px solid var(--line);
    box-shadow: none;
  }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view .formation-workspace:has(> #prep-synergies:not([hidden])) > .formation-inspector { grid-area: 1 / 3; }
  html:not(.haff-mobile-mode) body.hbc-preparing #prep-view :is(#hbc-inspector-toggle, #hbc-panel-close) { display: none !important; }

/* Mode changes keep the same region order, even on taller mobile/tablet screens. */
html.haff-mobile-mode body.hbc-preparing #prep-view {
  --prep-bond-width: 46px;
  --prep-bench-size: 32px;
  --prep-seat-size: clamp(34px, calc((100dvh - 252px) / 2), 64px);
  --prep-inventory-width: clamp(208px, 28vw, 280px);
}
html.haff-mobile-mode body.hbc-preparing #prep-view .formation-workspace { gap: 6px; padding: 0; }
html.haff-mobile-mode body.hbc-preparing #prep-view .board-heading { height: 24px; min-height: 24px; padding: 0; }
html.haff-mobile-mode body.hbc-preparing #prep-view .board-heading > h2 { display: none !important; }
html.haff-mobile-mode body.hbc-preparing #prep-view .deployment-with-parcels { grid-template-columns: minmax(0, 1fr) 70px; gap: 4px; }
html.haff-mobile-mode body.hbc-preparing #prep-view .deployment-with-parcels:has(> .parcel-station[hidden]) { grid-template-columns: minmax(0, 1fr); }
html.haff-mobile-mode body.hbc-preparing #prep-view .row-heading { height: 12px; min-height: 12px; padding: 0; }
html.haff-mobile-mode body.hbc-preparing #prep-view .row-heading > .hi-control { height: 12px; min-height: 12px; }
html.haff-mobile-mode body.hbc-preparing #prep-view .row-heading .hi-symbol { width: 11px; height: 11px; flex-basis: 11px; }
html.haff-mobile-mode body.hbc-preparing #prep-view .bench-heading { height: 16px; min-height: 16px; margin-top: 3px; padding: 0; }
html.haff-mobile-mode body.hbc-preparing #prep-view .bench-with-terminal { grid-template-columns: minmax(0, 1fr) 98px; gap: 4px; }
html.haff-mobile-mode body.hbc-preparing #prep-view .bench-with-terminal.training-bench { grid-template-columns: minmax(0, 1fr); }
html.haff-mobile-mode body.hbc-preparing #prep-view .parcel-box { min-height: 60px; }
html.haff-mobile-mode body.hbc-preparing #prep-view .parcel-case { width: 52px; height: 42px; }
html.haff-mobile-mode body.hbc-preparing #prep-view :is(#squad, #rear-squad) .operator-piece { --seat-slot: 14px; }
html.haff-mobile-mode body.hbc-preparing #prep-view #prep-synergies .hbc-bond { width: 36px; min-width: 36px; height: 36px; min-height: 36px; }
html.haff-mobile-mode body.hbc-preparing .topbar > span:nth-child(2) { display: none; }
html.haff-mobile-mode body.hbc-preparing .topbar { gap: 8px; }
html.haff-mobile-mode body.hbc-preparing .topbar > .haff-ui-toggle { margin-right: 128px; }
@media (orientation: landscape) and (max-height: 540px) and (min-width: 640px) {
  html.haff-mobile-mode body.hbc-preparing .topbar { height: 34px; min-height: 34px; }
  html.haff-mobile-mode body.hbc-preparing .topbar > :is(.haff-ui-toggle, .haff-text-toggle) { height: 28px; min-height: 28px; }
  html.haff-mobile-mode body.hbc-preparing .topbar > .haff-ui-toggle { margin-right: 128px; }
  html.haff-mobile-mode body.hbc-preparing .campaign-top-actions { top: 2px; height: 30px; }
  html.haff-mobile-mode body.hbc-preparing .campaign-top-actions .abandon-run { min-height: 28px; }
  html.haff-mobile-mode body.hbc-preparing main { height: calc(100dvh - 34px - var(--hm-safe-top) - var(--hm-safe-bottom)); }
  html.haff-mobile-mode body.hbc-preparing #campaign-shell,
  html.haff-mobile-mode body.hbc-preparing .campaign-hud { height: auto; min-height: 36px; max-height: none; overflow: visible; }
  html.haff-mobile-mode body.hbc-preparing .campaign-hud { padding: 2px 0; }
  html.haff-mobile-mode body.hbc-preparing .mission-band { height: 28px; min-height: 28px; padding: 1px 0; }
  html.haff-mobile-mode body.hbc-preparing .mission-band :is(.hbc-shop-toggle, .hbc-overview) { height: 26px; min-height: 26px; padding: 2px 6px !important; }
  html.haff-mobile-mode body.hbc-preparing .deploy-bar { height: 40px; min-height: 40px; padding: 2px 6px; }
  html.haff-mobile-mode body.hbc-preparing .deploy-button { min-height: 30px; }
}