/* Additional style rules for the section with the slides and the video.

There are two "modes": the "transcript mode" shows the slides and the
transcript, but not the captions; the "kiosk mode" shows only one
slide, no transcript, captions below the slide, with the video next to
the slide.

The rules below mostly deal with kiosk mode, apart from rules to
hiding the captions and most of the button bar in transcript mode.

Kiosk mode is in use when there is a class=sync on the BODY.

*/

/* @import "fonts/iconmonstr-iconic-font.css"; */

/* Buttons are very dark blue in kiosk (.sync) mode. */
.sync .button, .sync button {background: hsla(204,80%,10%,0.6) padding-box;
  color: white; border-color: hsla(204,80%,30%,0.6)}

/* In kiosk (synchronized) mode, hide almost everything. */
.sync header, .sync section, .sync footer, .sync > aside {display: none}
.sync section section {display: block} /* ... but don't hide nested sections */
.sync #talk {display: block; /*border-top: none; border-bottom: none*/}
.sync #talk > *:not(#buttonbar):not(#player) {display: none}
.sync #caption {display: flex}

/* A buttonbar. Only the first child is visible, unless in kiosk mode. */
#buttonbar {display: flex; align-items: stretch; flex-wrap: wrap; margin: 0}
#buttonbar > * {margin-left: auto; min-width: 12em; flex-wrap: wrap;
  align-items: stretch; text-align: center; display: none}
#buttonbar > *:first-child {margin-left: 0; text-align: left; display: flex}
#buttonbar > *:last-child {text-align: right}
#buttonbar > * > * {flex: 1}
#sync {font-size: 100%}
#buttonbar [for=sync] {white-space: nowrap}
#buttonbar [disabled] {color: hsla(0,0%,100%,0.5)}
.sync #buttonbar > * {display: flex}

/* Style for the slides, video, caption and slide number boxes. */
.sync {background: repeating-linear-gradient(45deg, hsl(204,80%,25%),
    hsl(204,40%,20%) 15%, hsl(204,80%,25%) 30%);
  color: white; border-radius: 0}
.sync #video, .sync #slidenr, .sync #caption, .sync #cue, .sync .slide {
  border-radius: 0.5em}
.sync #video {border: none}
.sync #caption, .sync #slidenr {background: hsla(204,80%,10%,0.6);
  color: white; text-align: center; padding: 0.3em}
.sync #caption a, .sync #slidenr a {color: inherit}
#caption {display: none}
.sync #caption {height: 3.2em; flex-direction: row-reverse; align-items: center}
.sync #slidenr {height: 3.2em; line-height: 2.6em}
#cue {display: block; flex: 1; line-height: 1.2}
#cue[lang|=zh] {font-size: 110%; min-height: 1.6em}
.comment, .progress {display: none}

/* In synchronized mode, show only the active slide. */
.sync .slide {position: absolute; top: 0; left: 0; visibility: hidden}
.sync .slide.active {position: relative; visibility: visible}
.sync #slides > *:not(.slide) {display: none}

/* ... and only the active elements of incremental display. */
.sync .next {visibility: hidden}
.sync .slide.active .next.active {visibility: visible}

/* Make the link to the current slide in #slidenr less visible. */
.sync #slidenr a {text-decoration: none}

/* Avoid transition effects when synchronization is off. (Extra class
   selectors to increase the specificity.) */
body:not(.sync) .slide.slide.slide {animation: none}

/* No animation when moving backwards. */
.sync .slide.active ~ .visited {animation: none}

/* Turn off transitions on A inside slides in synchronized mode. */
.sync .slide a {transition: none}

/* Scale the font so that slides and video each occupy about half the window. */
.sync #talk {border: none; max-width: none;
   font-size: 1.149vw; font-size: calc(47vw * 9/16/23)}
.sync select {font-size: 80%}
.sync input {font-size: 90%}

/* Position the buttonbar, slides, video, captions and slide number. */
.sync {position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0;
  max-width: none}
.sync #buttonbar, .sync #slides, .sync #video, .sync #slidenr, .sync #caption {
  position: absolute; margin: 0}
.sync #buttonbar {top: 2em; left: 2em; right: 2em}
.sync #slides {top: 6em; left: 2em}
.sync #video {top: 6em; right: 2em}
.sync #caption {top: 30em; left: 2em}
.sync #slidenr {top: 30em; right: 2em}

.sync .slide {margin: 0; box-shadow: none; border: none; overflow: hidden;
  object-fit: contain; outline: none}
.sync #caption, .sync #slidenr {box-sizing: border-box}
.sync #slides, .sync #caption, .sync #video, .sync #slidenr, .sync .slide {
  width: 40.889em}
.sync #video, .sync .slide {font-size: 1em; height: 23em}