/* Pockets's slides. The design system draws the slide. This adds its fonts, from this site so that Google is asked for nothing; the deck read as a page; the coverage
   figure; and the live slides. Roles only: the one number of its own is the zoom of a live slide, explained where it is set. */
@font-face { font-family: Archivo; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url("fonts/archivo-wdth.woff2") format("woff2") }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plex-sans-400.woff2") format("woff2") }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plex-sans-600.woff2") format("woff2") }

[hidden] { display: none !important }
body { background: var(--ds-surface) }
/* base.css keeps a gutter for a scrollbar on <html>, and a presented deck is fixed inside it, so it is that much narrower than the window the canvas is scaled to, and the slide's right edge is cut off. */
html:has(> body.ds-presenting) { scrollbar-gutter: auto }

/* The deck read as a page, before Present. */
[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 }
.held { max-width: var(--ds-measure); margin: var(--ds-space-7) auto; padding-inline: var(--ds-space-5); line-height: var(--ds-leading-body) }

/* On the slide: credits at the foot, just above the page number. */
.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 }
/* Lines of about sixty characters, as the Reposar Method asks. */
.ds-slide-canvas > :is(p, ul):not(.ds-slide-credit) { max-width: 62ch }
.ds-slide-canvas li + li { margin-top: var(--ds-space-3) }
.quote { margin: 0; max-width: var(--ds-measure) }
.quote p { margin: 0 }
.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 }
.quiet { color: var(--ds-text-2) }

/* Fig. 1: a table, whose last column is a bar of the days a stream covers. */
.ds-figure-head { margin-bottom: var(--ds-space-2) }
.cover { width: 100%; border-collapse: collapse; font-size: var(--ds-type-small); line-height: var(--ds-leading-ui) }
.cover :is(th, td) { padding: var(--ds-space-1) var(--ds-space-3) 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: middle }
.cover thead th { border-top: 0; color: var(--ds-text-2) }
.cover tbody th { font-weight: var(--ds-weight-semibold); white-space: nowrap }
.cover .n { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap }
.cover .on { width: 42%; padding-right: 0 }
.cover--bars .on { width: 84% }
.cover svg { display: block; width: 100%; height: var(--ds-space-5) }
.cover--tight svg { height: var(--ds-space-4) }
.cover line { stroke: var(--ds-rule); stroke-width: var(--ds-line); vector-effect: non-scaling-stroke }
.cover .run { fill: var(--ds-text) }
.cover .band { fill: var(--ds-band) }
.cover .was { color: var(--ds-text-2) }
.cover .was .run { fill: var(--ds-text-3) }
.months { display: flex; white-space: nowrap }
.months span { min-width: 0 }
.marks { position: relative; height: 1lh }
.marks span { position: absolute; top: 0; white-space: nowrap; color: var(--ds-text) }
.counts dd { white-space: nowrap }

/* A live slide: the page itself, the days alone (data-embed in its own stylesheet), edge to edge above the slide's footer. It takes the pointer, because pointing at a mark is how it
   explains itself, and it hands the keys that move slides back to the deck. Zoomed out a little against the canvas, so that at 1920 × 1080 it is laid out at 1,500 px, about the size of the
   tool on a laptop, and its type comes out at 1.28 times its size for a room. */
.live { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--ds-surface) }
.ds-slide-canvas[data-ds-canvas="fit"].ds-slide--bleed.live-slide { gap: 0 }
.ds-slide-canvas[data-ds-canvas="fit"].live-slide > .live { flex: 1 1 0; min-height: 0; width: 100%; aspect-ratio: auto; zoom: .8533 }
.ds-slide-canvas[data-ds-canvas="fit"].ds-slide--bleed.live-slide > .ds-slide-foot { position: static; margin: 0; padding: var(--ds-space-1) var(--ds-space-3) }

@media (width <= 639px) {
  .cover td:nth-child(2) { display: none }
}