/* Training Center bay (views/training.js): the roster as crew cards
   (pilots.css's .pl-card), each attribute a boxed tile with its effect and control; narrow cards list them as lanes. */

[data-bay="training"] .pl-cards{--pl-card-min:480px}
.tc-pilot{container-type:inline-size}
.tc-pilot.is-training{border-color:var(--u-train-line)}
.tc-pilot .u-job{border-color:var(--u-train-line)}

.tc-pilot .pl-level{
  padding:8px 9px;
  border:1px solid var(--u-line-soft);border-radius:var(--u-r-sm);
  background:var(--u-well);
}
.tc-pilot .pl-level.is-active{border-color:var(--u-train-line);background:var(--u-train-well)}

/* Tiles: the control pinned to the tile's foot, as wide as the tile. */
@container (width > 440px){
  .tc-pilot .pl-level-act{margin-top:auto;padding-top:4px}
  .tc-pilot .pl-level-act>*{width:100%;justify-content:center}
  .tc-pilot .pl-level-act .u-cta{padding-inline:6px}
}

/* Lanes: name, XP and level on one line, the meter under them, the effect beside the control. */
@container (width <= 440px){
  .tc-pilot .pl-levels{grid-auto-flow:row}
  .tc-pilot .pl-level{
    display:grid;grid-template-columns:minmax(0,1fr) auto auto;
    grid-template-areas:"name xp lv" "meter meter meter" "effect effect act";
    align-items:center;gap:5px 10px;
  }
  .tc-pilot .pl-level-name{grid-area:name;font-size:12px}
  .tc-pilot .pl-level-xp{grid-area:xp}
  .tc-pilot .pl-level-lv{grid-area:lv}
  .tc-pilot .pl-level .u-meter{grid-area:meter}
  .tc-pilot .pl-level-effect{grid-area:effect}
  .tc-pilot .pl-level-act{grid-area:act}
}

@media (max-height:520px){
  .tc-pilot .pl-level{padding:6px 7px}
}