/* The walk: the open house's workbench, with the video over the corner of the 3D view and a small strip of graphs under it.
   The layer colours are data colours (the team's 2014 palette), kept in one place for the page and the scene. */
:root { --walk-turn-left: #e2231a; --walk-turn-right: #00993b; --walk-steps: #39b6d8; --walk-light: #7cc142; --walk-sound: #c0399a; --walk-head: #333; --walk-head-video: #00808a;
  --walk-flamingo: #f26b21 }                                                  /* Calder's Flamingo, orange (TJ) */
.video-box { display: block; left: var(--ds-space-2); bottom: 44px; margin: 0; padding: 2px; width: min(52%, 720px) }
/* Full screen: the view over its graphs, on the page's ground, with the two cameras larger. A narrow screen's stacked layout gives way to it. */
.work:fullscreen { display: grid; overflow: hidden; background: var(--ds-bg) }
.work:fullscreen .ds-view--fill { height: 100%; aspect-ratio: auto }
.work:fullscreen .video-box { width: min(52%, 1100px) }
.video-pair { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2px }
.video-pair .clip { position: relative; aspect-ratio: 16 / 9; background: var(--ds-bg); overflow: hidden }
/* Two videos on show hold Chrome's whole page to 30 frames a second, however little else it draws. So they play out of sight, and each is painted into a canvas. */
.video-pair video { position: absolute; width: 1px; height: 1px; visibility: hidden }
.video-pair canvas { display: block; width: 100%; height: 100% }
.video-pair .second { position: relative }
.video-pair .second[hidden] { display: none }
.video-pair .second p { position: absolute; inset: 0; margin: 0; padding: var(--ds-space-2); display: grid; place-items: center; font-size: 11px; color: var(--ds-text-2); text-align: center }
.video-pair .second p[hidden] { display: none }
.caption { position: absolute; left: var(--ds-space-2); right: var(--ds-space-2); bottom: var(--ds-space-2); margin: 0; padding: 1px 6px; background: rgba(0, 0, 0, 0.74); color: #fff; font-size: 12px; line-height: 1.35; text-align: center; pointer-events: none }
.caption[hidden] { display: none }
.video-box figcaption { font-size: 10px; color: var(--ds-text-2); padding: 1px 2px 0 }
.layers-panel { top: 38px; right: var(--ds-space-2); display: block; width: 186px; padding: 2px 4px; font-size: 11px; line-height: 1.2 }
.layers-panel[hidden] { display: none }
.layers { width: 100%; border-collapse: collapse }
.layers td { padding: 0 2px; height: 18px; white-space: nowrap }
.layers td:last-child { width: 50px; text-align: right }
.layers input[type=range] { width: 48px; height: 10px; margin: 0; vertical-align: middle; accent-color: var(--ds-ink) }
.sw { display: inline-block; width: 8px; height: 8px; margin-inline-end: 4px; vertical-align: 0 }
.bound { display: flex; justify-content: space-between; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; color: var(--ds-text-2) }
.bound input, .bound select { font: inherit; padding: 0 2px }
.bound input[type=number] { width: 42px; height: 16px }
.bound select { flex: 1; min-width: 0; height: 18px }
.bound[hidden] { display: none }
.graphs-body { max-height: 30vh }
#side { display: flex; flex-direction: column }
#side > .ds-dock { flex: none }
/* The study and the transcript share the panel, each scrolling by itself, so neither pushes the other out of sight. */
#side > .explain { flex: 5 1 0; min-height: 0; display: flex; flex-direction: column }
#side > .explain .ds-dock-body { flex: 1; min-height: 0; overflow: auto }
#side > #transcript-dock { flex: 4 1 0; min-height: 190px; display: flex; flex-direction: column }
.explain h3 + ol, .explain h3 + ul { margin-top: 0 }
.explain .hypothesis, .explain .documents { margin: 0 0 6px; padding-inline-start: 16px }
.explain .hypothesis li, .explain .documents li { margin-bottom: 4px }
@media (width <= 639px) {
  #side > .explain, #side > #transcript-dock { flex: none }
  #side > .explain .ds-dock-body { overflow: visible }
  #transcript-dock .transcript { max-height: 50vh }
}
#transcript-dock[hidden] { display: none }
#transcript-dock .ds-dock-body { flex: 1; min-height: 0; display: flex; flex-direction: column }
#transcript-dock .bound input { width: auto; margin-inline-end: var(--ds-space-2) }
.said-note { margin: 2px 0 4px; font-size: 11px; color: var(--ds-text-2) }
.transcript { position: relative; flex: 1; min-height: 0; list-style: none; margin: 0; padding: 0; overflow: auto; font-size: var(--ds-type-ui) }
.transcript button { display: grid; grid-template-columns: 36px 12px 1fr; gap: 4px; width: 100%; padding: 1px 2px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer }
.transcript button:hover { background: var(--ds-rule) }
.transcript .t { font-family: var(--ds-font-mono); color: var(--ds-text-2) }
.transcript .cam { color: var(--ds-text-2) }
.transcript li.on button { background: var(--ds-text); color: var(--ds-bg) }
.transcript li.on .t, .transcript li.on .cam { color: inherit }
.transcript .said { color: color-mix(in srgb, var(--ds-text) calc(14% + 86% * var(--said, 1)), var(--ds-bg)) }
.transcript li.on .said { color: inherit }