/* 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, while the video floats (with
'position: sticky') on the side; the "kiosk mode" shows only one
slide, no transcript, captions below the slide, with the video next to
the slide.

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

*/

/* Reset some properties from tpac2.css that should not affect slides */
.slide section {border: none; background: none; max-width: none; margin: 0;
  position: static}
.slide section::after {content: none}
.slide.right {left: auto; top: auto; max-width: none; position: relative;
  transform: none}
.slide.right img {border-radius: 0}
.slide h1 span {display: inline; color: inherit; font-size: 100%;
  line-height: inherit}
.slide dt {margin-top: 0; font-weight: inherit}

/* class=button makes elements look like a button */
.button, button {text-decoration: none; cursor: default;
  letter-spacing: normal; word-spacing: normal; display: inline-block;
  text-align: center; font: 400 100%/1.3 system-ui, Segoe UI, sans-serif;
  padding: 1px 8px 2px; margin: 0.1em; background-color: hsl(204,69%,15%);
  color: white; border: 1px outset hsl(204,69%,22%)}

.button.picto, button.picto {padding-right: 4px}
.buttons button {font: inherit; font-weight: 700; cursor: pointer}
.slide:target {outline: none} /* No big green outline */
section:nth-of-type(2n+2) .button:focus,
section:nth-of-type(2n+2) button:focus {outline-color: white}

#video {overflow: hidden} /* Force border-radius on the video */

output button {cursor: pointer}

/* Buttons with class play-here are inserted by the script at the
   start of each section of the transcript. */
.play-here {float: left; margin: 0 0.3em 0 0; color: hsl(204,69%,15%);
  background: white}

/* On small screens, the slides are scaled down. */
.slide {font-size: 2.32vw}
@media (min-aspect-ratio: 12/9) { .slide {font-size: 2.03vw} }
@media (min-aspect-ratio: 18/9) { .slide {font-size: 3.3vh} }
#video, #slidenr {display: block; width: 88vw; margin: 0 0 1rem 0}
#video {height: 49.5vw}
body:not(.sync) audio#video {height: 54px}
#slidenr, #caption {box-sizing: border-box}

#player, #slides {position: relative}
#player::after {content: " "; display: block; height: 0; clear: both}
#video, #slidenr, #caption, #cue {border-radius: 0.5em}
#video {border: none}
#slidenr {display: block; background: hsla(204,69%,15%,0.8); color: white;
  text-align: center}
#caption {display: none; height: 3.2em}
#caption, #cue {background: hsl(204,69%,15%)}
#caption, #slidenr {text-align: center; padding: 0.3em;
  margin: 1em 0 1rem 0}
#cue {display: block; margin: -0.3em; padding: 0.3em}
#cue[lang|=zh] {font-size: 110%; min-height: 1.6em}
#cuelang {float: right}
.comment, .progress {display: none}
.slide {width: 40.889em;
  height: auto; min-height: 23em; /* AC-2020-slides.css uses rem */
  display: block; margin: 0 0 1rem 0; box-shadow: none}
.slide li {padding-left: 0}
.slide table {font-size: 100%} /* Undo 0.9em in tpac2.css */

#talk details {margin-bottom: 2em}
summary::before {font-size: 1em; margin-left: 0}

/* In kiosk (synchronized) mode, hide almost everything. */
.sync {background: #103852}
.sync header, .sync section, .sync footer {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: block}

/* A buttonbar. Only the first child is visible, unless in kiosk mode. */
#buttonbar {display: flex; align-items: stretch; flex-wrap: wrap;
  margin-bottom: 2em}
#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; border-radius: 0.25em}
#sync {font-size: 100%}
#buttonbar [for=sync] {white-space: nowrap; /*flex: 4;*/ /*min-width: 12em*/}
#buttonbar [for=sync] + * {/*flex: 1;*/ /*margin-right: 1em*/}
#buttonbar [disabled] {color: hsla(0,0%,100%,0.5)}
.sync #buttonbar > * {display: flex}

/* Reset some things from tpac2.css that should not apply to slides. */
#slides .slide {hyphens: manual; font-weight: normal}
#slides .slide h3 {padding-top: 0}
#slides table {background: none; display: table; border-spacing: 2px;
  width: auto;
  border-collapse: separate; box-sizing: border-box; text-indent: 0}
#slides td, #slides th {border: none; padding: 1px; height: auto;
  white-space: normal; width: auto;
  display: table-cell; vertical-align: inherit; text-align: unset}
#slides th {/*text-align: center*/}
#slides table.striped {width: 100%; border-collapse: collapse}
#slides table.striped th {/*text-align: left*/}

/* 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}

/* When the section has 2rem margins. */
@media (min-width: 46em) and (max-aspect-ratio: 18/9) {
  .slide {/* A section has borders of 2rem, so its width is
    (100vw - 4rem) minus whatever the browser scrollbar needs. If we
    estimate the scrollbar at 15px, then to make the slide (which is
    40.889em by 23em) fill exactly that width, the slide font size
    must be as follows: */
    font-size: 1rem; font-size: calc((100vw - 4rem - 15px) * 9/16/23);
    height: 23rem; height: calc((100vw - 4rem - 15px) * 9/16);
    overflow: hidden}
}

/* When the section has wide margins. */
@media (min-width: 56em) and (max-aspect-ratio: 18/9) {
  #slides, #caption, #video, #slidenr {width: 40.889em}
  #video {height: 23em}
  .slide {font-size: 1em; height: 23em; width: 40.889em}
}

/* If the window is wide enough for a slide at its normal size and a
   bit more, show the video on the right. At small window sizes, the
   video is 22rem wide and overlaps the slides a bit. As the window
   grows, the video overlaps less.

   At 73em, there is no overlap anymore and the video can start to
   grow.

   At 104em, the video is the same size as the slides and it can stops
   to grow. The gap between the slides and the video increases as the
   window grows further.

   At 107em, the gap is wide enough and the margin between the #player
   element and the left window edge increases instead. (I.e., the
   ‘left’ of the #player no longer increases, but stays at -25.5rem
   relative to the section content.)
*/

@media (min-width: 62em) {
  #slides, #caption {width: 40.889em}
  .slide {font-size: 1em; height: 23em; width: 40.889em}

  /* When video and slides are not synchronized, the video is fixed. */
  #slidenr, #video {margin: 0; position: fixed;
    right: 1em; z-index: 2; width: 22rem; width: calc(45.6rem - 23em)}
  #video {height: 12.7em; height: calc((45.6rem - 23em) * 9/16);
    max-height: 100%; bottom: 3.5em}
  #slidenr {bottom: 1em}
  #player {left: calc(28rem - 50vw);
    width: calc(100% + 2 * (50vw - 28rem))}

  /* In synchronized mode, the video may partly overlap the slide. */
  .sync #slidenr, .sync #video {position: absolute;
    left: 32.5em; left: calc(32.5em + 100vw - 62rem);
    bottom: auto; right: auto; top: 8em}
  .sync #slidenr {margin-top: calc(1em + (45.6rem - 23em) * 9/16)}

  #caption, #slidenr {height: 1.9em}

  /* If sticky positioning is supported, use that instead of fixed. */
  @supports (position: sticky) or (position: -webkit-sticky) {
    body {overflow: visible}
    #slidenr, #video {position: -webkit-sticky; position: sticky;
      right: auto; bottom: auto; left: 100%; z-index: 2}
    #video {top: 0.5em; margin-bottom: calc((23em - 45.6rem) * 9/16)}
    #slidenr {margin-top: calc(1em + (45.6rem - 23em) * 9/16);
      top: calc(1.5em + (45.6rem - 23em) * 9/16);
      margin-bottom: calc(-1em - 1.9em - (45.6rem - 23em) * 9/16)}
    audio#video {margin-bottom: -54px}
    audio + #slidenr {margin-top: calc(1em + 54px); top: calc(1.5em + 54px);
      margin-bottom: calc(-1em - 1.9em - 54px)}
  }
}

@media (min-width: 73em) {
  #slidenr, #video {width: 16.9332rem;
    width: calc(100vw - 6rem - 40.889em)}
  #video {height: 9.524925rem; height: calc((100vw - 6rem - 40.889em) * 9/16)}
  .sync #slidenr, .sync #video {left: 50rem;
    left: calc(32.5em + 11rem); top: calc(32.2rem - 31vw)}
  .sync #slidenr {margin-top: calc(1em + (100vw - 6rem - 40.889em) * 9/16)}

  @supports (position: sticky) or (position: -webkit-sticky) {
    #video {margin-bottom: calc(0em - (100vw - 6rem - 40.889em) * 9/16)}
    #slidenr {margin-top: calc(1em + (100vw - 6rem - 40.889em) * 9/16);
      top: calc(1.5rem + (100vw - 6rem - 40.889em) * 9/16);
      margin-bottom: calc(-1em - 1.9em - (100vw - 6rem - 40.889em) * 9/16)}
  }
}

@media (min-width: 104em) {
  #slidenr, #video {width: 40.889em}
  #video {height: 23em}
  .sync #slidenr, .sync #video {width: 40.889em; top: 0;
    left: calc(100vw - 45em)}
  .sync #video {height: 23em}
  .sync #slidenr {margin-top: calc(1em + 23em)}

  @supports (position: sticky) or (position: -webkit-sticky) {
    #video {margin-bottom: -23em}
    #slidenr {margin-top: calc(1em + 23em);
      top: calc(1.5rem + 23em);
      margin-bottom: calc(-1em - 1.9em - 23em)}
  }
}

/* If the window is large, put the slide and the video side by side. */
@media (min-width: 107em) {
  #player {left: -25.5rem}
  .sync #slidenr, .sync #video {left: 53rem}

  @supports (position: sticky) or (position: -webkit-sticky) {
    #player {width: calc(100% + 51rem)}
  }
}

/* If the window is large _and_ high enough, grow the slide and video */
@media (min-width: 104em) and (max-aspect-ratio: 8/3) {
  .sync #talk {border-width: 0 2vw; max-width: none;
    font-size: 1.149vw; font-size: calc(47vw * 9/16/23)}
  .sync #buttonbar {/*max-width: 46em; margin-left: auto; margin-right: auto*/}
  .sync #player {width: auto; left: auto}
  .sync #video, .sync #slidenr {left: 49vw}
  .sync select {font-size: 80%}
  .sync input {font-size: 90%}
}

            div[data-fmt="pdf"] {width: 40.889em; height: 23em;
	/* Add a border, because the slides are white: */
	overflow: hidden; box-sizing: border-box; border: 1px solid;
	display: block; margin: 0 0 1em 0; box-shadow: none}
       div[data-fmt="pdf"] canvas {vertical-align: bottom}

div[data-fmt="pdf"] .page { position: relative; }