/* The talk's slides. The design system draws the slide; this adds the deck read as a page, the diagrams that build, and sense-breaking. Roles only, never a number. */
/* 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 img { display: block; width: 100%; height: auto }
[data-ds-slides] section:not(.ds-slide--bleed) > :last-child.ds-slide-credit { margin-block-start: auto }

/* 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) }
.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 { max-width: var(--ds-measure) }

/* A place waiting for a picture: the design system's empty state, sized to hold the figure. */
.wait { display: grid; place-items: center; min-height: calc(var(--ds-space-9) * 2); text-align: center }

/* Diagrams that build, slide by slide. Read, so square. */
.nest { display: grid; gap: var(--ds-space-3); padding: var(--ds-space-4); border: var(--ds-line) solid var(--ds-rule) }
.nest p { margin: 0 }
.nest--ink { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-on-ink) }
.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) }
.nest--ink :is(h3, p), .step--ink :is(h3, p) { color: var(--ds-on-ink) }
.stack { display: grid; gap: var(--ds-space-2) }
.refs { margin: 0; padding: 0; list-style: none; display: grid; align-content: start; gap: var(--ds-space-1); text-wrap: wrap; font-size: var(--ds-type-small); line-height: var(--ds-leading-ui) }

/* The same footer in the same place on every slide (TJ, 4 November 2026). The design system puts a full-bleed slide's footer inside its band, in the middle of the gray;
   here the band stops above a footer on paper, exactly as tall as the one on any other slide. */
[data-ds-slides] { --talk-foot: calc(var(--ds-space-4) + var(--ds-type-small) * var(--ds-leading-ui) + var(--ds-space-5)) }
.ds-slide-foot { line-height: var(--ds-leading-ui) }
/* The navigation bar stays up for the whole talk and never hides (TJ, 4 November 2026). Its caption and page count say what the footer
   said, so the footer's words go; its zone stays, on paper, so nothing on a slide sits under the bar. */
.ds-present-bar--idle { opacity: 1; pointer-events: auto }
.ds-slide-foot > * { visibility: hidden }
.ds-slide-canvas[data-ds-canvas="fit"] .ds-slide-band { bottom: var(--talk-foot); grid-template-columns: minmax(0, 1fr) }
.ds-slide-canvas[data-ds-canvas="fit"] .ds-slide-band .ds-slide-foot {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  grid-column: auto;
  box-sizing: border-box;
  height: var(--talk-foot);
  padding: var(--ds-space-4) var(--ds-slide-margin) var(--ds-space-5);
  background: var(--ds-bg);
}

/* A live view from the Virtual Colloquy. While presenting it fills the slide above its band and 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); object-fit: cover }
.ds-slide-canvas[data-ds-canvas="fit"] .live { height: calc(var(--ds-slide-height) * 3 / 4); aspect-ratio: auto; pointer-events: none }

@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. */
.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 panorama is wider than the picture area, so its band starts where the picture stops. */
.ds-slide-canvas[data-ds-canvas="fit"] .pano + .ds-slide-band { top: 450px; align-content: center }

/* A figure that must show whole: it fits the area above the band, on the slide's own ground, rather than running under it. */
.ds-slide-canvas[data-ds-canvas="fit"] .fit-top { height: 470px; object-fit: contain }

/* The process as the paper's Figure 1 draws it: top to bottom, each arrow named. */
.cycle { display: grid }
.cycle p { margin: 0 }
.cycle .step { grid-template-columns: 9em minmax(0, 1fr); align-items: baseline; column-gap: var(--ds-space-3); padding: var(--ds-space-1) var(--ds-space-3) }
.cycle .arrow { padding-inline-start: calc(var(--ds-space-3) + 9em * var(--ds-type-body) / var(--ds-type-small) + var(--ds-space-3) + var(--ds-line)); color: var(--ds-text-2); font-size: var(--ds-type-small) }
.cycle .arrow::before { content: "↓\2002"; }
/* The same cycle as one row, left to right, to sit under a headline and a sentence. */
.cycle--row { grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: start; column-gap: var(--ds-space-3) }
.cycle--row .step { grid-template-columns: minmax(0, 1fr); align-self: stretch; padding: var(--ds-space-2) var(--ds-space-3) }
.cycle--row .step h3 { font-size: var(--ds-type-small); line-height: var(--ds-leading-ui) }
.cycle--row .step p, .cycle--row .arrow { color: var(--ds-text-2); font-size: var(--ds-type-small); line-height: var(--ds-leading-ui) }
.cycle--row .arrow { padding: var(--ds-space-3) 0 0 }
.cycle--row .arrow::before { content: "→"; display: block }
@media (width <= 639px) { .cycle .step { grid-template-columns: minmax(0, 1fr) } .cycle .arrow { padding-inline-start: var(--ds-space-3) } }

/* The live views have fixed shapes and the kiosk page fills the rest with black, so each frame takes its view's own shape (TJ, 4 November 2026).
   16:10, centered above the band, on a ground sampled from the scene. */
.ds-slide-canvas[data-ds-canvas="fit"] .live--stage { left: 50%; right: auto; width: 784px; height: 490px; transform: translateX(-50%) }
.ds-slide-canvas[data-ds-canvas="fit"] .live--stage + .ds-slide-band { top: 490px; align-content: center }
.ds-slide-canvas[data-ds-canvas="fit"].ground-room { background: rgb(215, 219, 226) }
.ds-slide-canvas[data-ds-canvas="fit"].ground-plan { background: rgb(86, 86, 86) }

/* 9:16, the full height above the footer, beside the headline. */
.live--tall { aspect-ratio: 9 / 16; width: min(100%, 360px); margin-block-end: var(--ds-space-4) }
.ds-slide-canvas[data-ds-canvas="fit"].tall-live { position: relative }
.ds-slide-canvas[data-ds-canvas="fit"].tall-live > h2 { max-width: 700px }
.ds-slide-canvas[data-ds-canvas="fit"].tall-live > .ds-slide-credit { max-width: 700px }
.ds-slide-canvas[data-ds-canvas="fit"] .live--tall { position: absolute; top: 0; right: 0; width: 367px; height: 652px; aspect-ratio: auto; margin: 0 }