.training-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.training-grid article {
  border: 1px solid #ffffff30;
  padding: 18px;
  background: #10202dd9;
}
.training-grid h3 {
  margin: 0;
}
.training-grid article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.training-grid button {
  flex: 1;
  min-width: 100px;
  padding: 12px;
}
.training-grid small {
  display: block;
  font-size: 11px;
  margin-top: 5px;
}
#training-panel {
  position: fixed;
  z-index: 32;
  top: 110px;
  left: 50%;
  transform: translateX(-50%);
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100dvh - 140px);
  overflow: auto;
  background: #091925f5;
  border: 1px solid #56c9f4;
  padding: 20px;
  box-shadow: 0 12px 50px #0009;
  pointer-events: auto;
}
#training-panel h3 {
  margin: 6px 0;
  font-size: 23px;
}
.training-label {
  font-size: 12px;
  text-transform: uppercase;
  color: #86d8ff;
}
.training-binding {
  color: #ffe084;
  font-weight: 700;
}
.training-progress {
  font-size: 12px;
}
.training-message {
  color: #a1e4bf;
}
.training-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.training-actions button {
  padding: 12px;
  font-size: 12px;
}
#training-panel.training-active {
  left: 16px;
  transform: none;
  width: min(360px, calc(100vw - 32px));
  padding: 12px;
  pointer-events: none;
}
#training-panel.training-active .training-actions {
  pointer-events: auto;
}
#training-panel.training-active .training-detail {
  font-size: 13px;
}
#training-panel.training-active .training-message:empty {
  display: none;
}
@media (max-width: 700px) {
  .training-grid {
    grid-template-columns: 1fr;
  }
  #training-panel {
    top: 82px;
    max-height: calc(100dvh - 100px);
  }
  #training-panel.training-active {
    top: 85px;
    max-width: calc(100vw - 32px);
  }
  #training-panel.training-active h3 {
    font-size: 17px;
  }
  #training-panel.training-active p {
    margin: 5px 0;
    font-size: 12px;
  }
}
@media (max-height: 500px) {
  #training-panel {
    top: 12px;
    left: 50%;
    max-height: calc(100dvh - 24px);
  }
  #training-panel.training-active {
    top: 66px;
    left: 12px;
    width: 280px;
    max-height: calc(100dvh - 140px);
  }
  #training-panel.training-active .training-detail {
    display: none;
  }
}

/* Keep the training navigation above the radio on short phone layouts. */
#info:has(.training-grid) {
  z-index: 82;
}

@media (max-width: 700px) {
  #training-panel h3,
  #training-panel .training-detail {
    padding-right: 48px;
  }
}

/* During an assisted pass, targeting owns the detailed action binding.
   Keep the objective and a full-size Exit hit target without covering receivers. */
body.receiver-targeting-active #training-panel.training-active {
  display: flex;
  align-items: center;
  gap: 6px;
  top: 110px;
  left: 12px;
  width: 300px;
  height: 46px;
  min-height: 46px;
  max-height: none;
  padding: 0 6px;
  overflow: visible;
}
body.receiver-targeting-active #training-panel.training-active > :not(h3):not(.training-actions) {
  display: none;
}
body.receiver-targeting-active #training-panel.training-active h3 {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 13px;
  line-height: 15px;
}
body.receiver-targeting-active #training-panel.training-active .training-actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
}
body.receiver-targeting-active #training-panel.training-active .training-actions button {
  min-height: 44px;
  padding: 6px;
  font-size: 10px;
}
@media (min-width: 601px) and (max-width: 1000px) and (min-height: 501px) {
  body.receiver-targeting-active #training-panel.training-active {
    left: 50%; transform: translateX(-50%); width: 390px;
  }
  body:has(#training-panel.training-active:not(.hidden)) #receiver-targeting { top: 162px; }
}
@media (max-width: 600px) and (min-height: 501px) {
  body.receiver-targeting-active #training-panel.training-active {
    top: 182px; left: 12px; width: calc(100vw - 24px);
  }
  body:has(#training-panel.training-active:not(.hidden)) #receiver-targeting { top: 234px; }
  body:has(#training-panel.training-active:not(.hidden)) .receiver-status { font-size: 11px; line-height: 1.2; }
}
@media (max-height: 500px) {
  body.receiver-targeting-active #training-panel.training-active {
    top: 112px; left: 206px; width: calc(100vw - 218px);
  }
}