/* Live view owns its grid sizing. Cockpit canvas ratios never size these tiles. */
.app-shell:has(.prototype-live) { display:flex; flex-direction:column; height:100dvh; overflow:hidden; }
.app-shell:has(.prototype-live) > .global-header { flex-shrink:0; }
.app-shell:has(.prototype-live) > .workspace { flex:1; min-height:0; overflow:hidden; }
.app-shell:has(.prototype-live) > .workspace > main { width:100%; height:100%; min-height:0; }
.prototype-live { box-sizing:border-box; height:100%; min-height:0; overflow:hidden; }
.prototype-live .live-airport-list { min-height:0; }
.prototype-live .dock-card-list { flex:1; min-height:0; overflow-y:auto; }
.prototype-live .live-matrix { min-height:0; }
.prototype-live .live-matrix > header { flex:0 0 35px; }
.prototype-live .prototype-video-grid { min-height:0; align-content:stretch; overflow:hidden; }
.prototype-live .prototype-video { min-width:0; min-height:0; align-self:stretch; overflow:hidden; }
.prototype-live .prototype-video > header,
.prototype-live .prototype-video > footer { flex:0 0 35px; min-width:0; gap:8px; }
.prototype-live .prototype-video > header > span,
.prototype-live .prototype-video > footer > span { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.prototype-live .prototype-video > header > span:last-child { flex-shrink:0; }
.prototype-live .prototype-video > footer > button { flex-shrink:0; }
.prototype-live .prototype-video > .video-placeholder { position:relative; inset:auto; transform:none; display:grid; place-items:center; flex:1; width:100%; height:auto; min-height:0; margin:0; aspect-ratio:auto; background:#000; }
.prototype-live .video-placeholder video,
.prototype-live .video-placeholder img { position:absolute; inset:0; display:block; width:100%; height:100%; min-height:0; aspect-ratio:auto; object-fit:contain; object-position:center; background:#000; }

@media (max-width:1100px) and (min-width:701px) {
  .prototype-live { gap:12px; padding:12px; }
  .prototype-live .live-airport-list { width:220px; }
  .prototype-live .prototype-video > header,
  .prototype-live .prototype-video > footer { padding:0 8px; font-size:11px; }
}
@media (max-width:700px) {
  .prototype-live { flex-direction:column; padding:8px; gap:8px; }
  .prototype-live .live-airport-list { width:100%; flex:0 0 164px; padding:8px; border-radius:8px; overflow:hidden; }
  .prototype-live .live-airport-list .panel-heading { flex:0 0 28px; }
  .prototype-live .live-airport-list > input { flex-shrink:0; margin-bottom:6px; }
  .prototype-live .live-airport-list .segmented-control { flex-shrink:0; margin-bottom:6px; }
  .prototype-live .dock-card-list { display:flex; gap:6px; overflow-x:auto; overflow-y:hidden; }
  .prototype-live .dock-card-list .dock-card { flex:0 0 210px; margin:0; padding:6px; }
  .prototype-live .dock-card-list .dock-payload,
  .prototype-live .dock-card-list .dock-card > p { display:none; }
  .prototype-live .live-matrix > header { flex-basis:28px; height:28px; margin-bottom:8px; }
  .prototype-live .prototype-video-grid { gap:4px; }
  .prototype-live .prototype-video > header,
  .prototype-live .prototype-video > footer { flex-basis:26px; height:26px; padding:0 5px; font-size:10px; }
  .prototype-live .prototype-video > header > span:last-child { display:none; }
}