/* Small layout additions around the original Kamloops stylesheet. */
.broadcast-layout { border-spacing: 2px; }
.broadcast-layout h3 { margin: 0 0 10px; }
.player-cell { width: 640px; vertical-align: top; position: relative; }
.player-cell video { display: block; width: 640px; height: 360px; background: #000; object-fit: contain; }
.list-cell { width: 300px; vertical-align: top; }
.right-panel { width: 300px; height: 356px; overflow: auto; padding: 4px; background: transparent; color: #000; }
.archive-list { width: 100%; }
.archive-entry { width: 100%; border-bottom: .5px solid #ccc; line-height: 1em; border-spacing: 0; }
.archive-entry td { padding: 3px 0; vertical-align: top; }
.archive-entry .play-cell { width: 28px; }
.archive-entry img { width: 24px; height: 17px; }
.archive-entry a { font-weight: bold; }
.archive-entry[aria-current="true"] { background: #eaf2fa; }
.event-heading { min-height: 30px; color: #336699; border-bottom: .5px solid #ccc; padding: 3px 0 6px; line-height: 1.2; }
.back-link { display: inline-block; margin: 7px 0; }
.chapter-entry { display: block; padding: 5px 2px; border-bottom: .5px solid #ccc; font-weight: bold; line-height: 1.2; }
.chapter-time { color: #777; font-weight: normal; margin-right: 5px; }
.player-message { position: absolute; left: 5px; bottom: 28px; color: #fff; font-size: 11px; text-shadow: 0 1px 2px #000; }

@media (max-width: 1040px) {
  .container { width: calc(100% - 16px); box-sizing: border-box; }
  .box { width: 100%; }
  .box .inner { padding: 20px 16px; }
  .broadcast-layout, .broadcast-layout tbody, .broadcast-layout tr, .broadcast-layout td { display: block; width: 100%; box-sizing: border-box; }
  .player-cell video { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .list-cell { padding-top: 12px; }
  .right-panel, .archive-list { width: 100%; box-sizing: border-box; }
  .right-panel { height: min(45vh, 356px); }
}