/* A study's slides. The design system draws the slide; this adds the deck read as a page, a figure's place, and sense-breaking. Roles only, never a number. It is the part of the talk's
   talk.css every study's deck shares. */
/* The design system's scrollbar-gutter would make a presented deck 15 px narrower than the window and cut off each slide's right edge. */
html:has(> body.ds-presenting) { scrollbar-gutter: auto }

[data-ds-slides] { display: grid; gap: var(--ds-space-8); padding-block: var(--ds-space-7) }
[data-ds-slides] > section { display: grid; gap: var(--ds-space-5); align-content: start }
[data-ds-slides] > section > :is(p, ol, ul) { margin-block: 0 }
[data-ds-slides] :is(h1, h2, h3) { margin: 0; text-wrap: balance }
[data-ds-slides] p, [data-ds-slides] li { text-wrap: pretty }
[data-ds-slides] .ds-cols :is(h3, p), .step :is(h3, p) { margin-block: 0 }
[data-ds-slides] figure { margin: 0 }
[data-ds-slides] figure img { display: block; width: 100%; height: auto }
[data-ds-slides] section:not(.ds-slide--bleed) > :last-child.ds-slide-credit { margin-block-start: auto }
.ds-slide-canvas > .ds-slide-credit { margin-block: auto 0 }
.ds-slide-canvas > .ds-slide-credit + .ds-slide-foot { margin-top: 0; padding-top: 0 }
.ds-slide-canvas > :is(p, ul):not(.ds-slide-credit) { max-width: 62ch }
.ds-slide-canvas li + li { margin-top: var(--ds-space-3) }

/* A column of like things: a rule above, as the design system's stats have. */
.col { display: grid; gap: var(--ds-space-2); align-content: start; padding-top: var(--ds-space-3); border-top: var(--ds-line) solid var(--ds-rule-strong) }
.col :is(h3, p) { margin-block: 0 }
.big { font-size: var(--ds-type-h2); font-weight: var(--ds-weight-semibold); line-height: var(--ds-leading-tight); font-variant-numeric: tabular-nums }
.quiet { color: var(--ds-text-2) }
.quote { margin: 0; max-width: var(--ds-measure) }
.quote p { margin: 0 }

/* Diagrams that build, slide by slide. Read, so square. */
.flow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--ds-space-4) }
.step { display: grid; gap: var(--ds-space-2); align-content: start; padding: var(--ds-space-4); border: var(--ds-line) solid var(--ds-rule) }
.step--ink { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-on-ink) }
.step--ink :is(h3, p) { color: var(--ds-on-ink) }
.stack { display: grid; gap: var(--ds-space-2) }
@media (width <= 639px) { .flow { grid-auto-flow: row } }

/* Words on the left, a figure on the right, under the headline. Elsewhere, one after the other. --fig-h is set on the figure, in the slide's own pixels. */
.with-fig { display: grid; gap: var(--ds-space-4) }
.with-fig p, .with-fig figure { margin: 0 }
.with-fig .stack { align-content: start }
[data-ds-slides] .with-fig img { display: block; width: 100%; height: auto }
.ds-slide-canvas[data-ds-canvas="fit"] .with-fig { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--ds-space-5); align-items: start }
.ds-slide-canvas[data-ds-canvas="fit"] .with-fig img { width: auto; height: var(--fig-h) }

/* A live view of the study's own page. While presenting it takes no pointer or keyboard, so the arrow keys keep moving the slides. */
.live { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; background: var(--ds-surface-sunk) }
.ds-slide-canvas[data-ds-canvas="fit"] .live { height: calc(var(--ds-slide-height) * 3 / 4); aspect-ratio: auto; pointer-events: none }