/* This deck's own figures. The design system draws the slide and deck.css the rest. Roles only, but for the heights of the figures that share a slide, in the slide's own pixels. */

/* Two figures side by side, the same height, under the headline. */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-5) }
.pair img { display: block; width: 100%; height: auto }
.pair .live { display: block; width: 100%; height: auto; aspect-ratio: 442 / 382 }
.pair.film .live { aspect-ratio: 3 / 2 }
.ds-slide-canvas[data-ds-canvas="fit"] .pair { grid-template-columns: max-content max-content; column-gap: var(--ds-space-5) }
.ds-slide-canvas[data-ds-canvas="fit"] .pair :is(img, .live) { width: 336px; height: 290px; aspect-ratio: auto }
.ds-slide-canvas[data-ds-canvas="fit"] .pair.film :is(img, .live) { width: 435px; height: 290px }
.pair .ds-figure-head { margin-bottom: var(--ds-space-2) }

/* A live slide: the page, in all but the band at its foot. */
.ds-slide-canvas[data-ds-canvas="fit"].ds-slide--bleed .live { height: calc(var(--ds-slide-height) * 3 / 4) }

/* Tables that stand as figures. */
.by-room { width: 100%; border-collapse: collapse; font-size: var(--ds-type-small); line-height: var(--ds-leading-ui) }
.by-room :is(th, td) { padding: var(--ds-space-1) var(--ds-space-4) var(--ds-space-1) 0; border-top: var(--ds-line) solid var(--ds-rule); font-weight: var(--ds-weight-regular); text-align: start; vertical-align: top }
.by-room thead th { border-top: 0; color: var(--ds-text-2); font-size: var(--ds-type-small) }
.by-room tbody th { font-weight: var(--ds-weight-semibold); white-space: nowrap }
.by-room .gone :is(th, td) { color: var(--ds-text) }
/* Fig. 1: the team's drawings, with their words in type. */
.kinds { row-gap: var(--ds-space-3) }
.kind { display: grid; gap: 2px; align-content: start; font-size: var(--ds-type-small); line-height: var(--ds-leading-ui) }
.kind h3 { margin: 0; font-size: var(--ds-type-small); font-weight: var(--ds-weight-semibold) }
.kind p { margin: 0 }
.kind.out { color: var(--ds-text-2) }
[data-ds-slides] .kind img { width: 100px; height: 52px; mix-blend-mode: multiply }
:root[data-theme="dark"] [data-ds-slides] .kind img { mix-blend-mode: screen; filter: invert(1) }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [data-ds-slides] .kind img { mix-blend-mode: screen; filter: invert(1) } }
.ds-figure-head { margin-bottom: var(--ds-space-2) }

/* Fig. 9: each item with a mark for how far it got. */
.reach h3 { margin: 0 0 var(--ds-space-1) }
.marks { margin: 0; padding: 0; list-style: none; font-size: var(--ds-type-body); line-height: 1.15 }
.marks li { margin: 0 !important }
.marks li.none { color: var(--ds-text-2) }

/* The sources. */
.refs { display: grid; gap: var(--ds-space-1); margin: 0; padding: 0; list-style: none; font-size: var(--ds-type-small); line-height: var(--ds-leading-ui) }
.ds-slide-canvas .refs li + li { margin-top: 0 }

@media (width <= 639px) { .pair { grid-template-columns: minmax(0, 1fr) } }