/* slides.css — a talk's slides, wherever they show: as cards on the page
   (modules/slides.js), as the deck (/slides/Name), in the presenter's view
   and in print. One rule makes them agree: a slide is a 16:9 .frame whose
   type is measured in its own width (container units), so a slide looks the
   same on the projector, in the presenter's small "next" box and on paper. */

.frame {
  position: relative;
  aspect-ratio: 16 / 9;
  container-type: size;
  overflow: hidden;
  /* no background of its own: a slide shows what the page wears (the ground,
     a [[style:]], a [[background:]]); slideink.js keeps the words readable */
  color: var(--body);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.slidebody {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 7cqh 7cqw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* the page's own typeface (the skin's, or a [[style:]]'s): sized here */
  font-family: inherit;
  font-size: 2.6cqw;
  line-height: 1.35;
  color: var(--body);
  text-align: left;
}
.slidebody > :first-child { margin-top: 0; }
.slidebody > :last-child { margin-bottom: 0; }
.slidebody h1, .slidebody h2, .slidebody h3 {
  color: var(--ink);
  line-height: 1.1;
  margin: 0 0 .45em;
  border: 0;
  padding: 0;
}
.slidebody h1 { font-size: 2.3em; }
.slidebody h2 { font-size: 1.65em; }
.slidebody h3 { font-size: 1.25em; }
.slidebody p { margin: .35em 0; }
.slidebody ul, .slidebody ol { margin: .3em 0; padding-left: 1.2em; }
.slidebody li { margin: .2em 0; }
.slidebody blockquote { margin: .4em 0; padding-left: .8em; border-left: .08em solid var(--line); font-style: italic; }
.slidebody a { color: var(--link); }
.slidebody img, .slidebody video, .slidebody iframe {
  display: block;
  max-width: 100%;
  max-height: 62cqh;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: .3em 0;
}
.slidebody model-viewer { width: 100% !important; height: 66cqh !important; }
.slidebody .model-edit { display: none !important; }
.slidebody p:empty { display: none !important; }
.slidebody figure { margin: .3em 0; float: none !important; }
.slidebody figcaption { font-size: .6em; color: var(--quiet); }
.slidebody p:has(> img:only-child), .slidebody p:has(> a:only-child > img) { margin: 0; }

/* A picture on a slide is as large as the slide allows, unless the page gives
   it a size ([[thumb:Name|300px]], [[figure:Name|left|30%]]: data-sized, set
   by those modules). The block holding it takes all the room the words leave,
   and the picture fills that room, never cropped. Two pictures in one
   paragraph share the room side by side. */
.slidebody > p:has(> img:not([data-sized])),
.slidebody > p:has(> a > img:not([data-sized])),
.slidebody > figure:not([data-sized]) {
  flex: 1 1 0;
  min-height: 0;
  margin: .25em 0;
  display: flex;
  gap: .4em;
  align-items: center;
  justify-content: center;
}
.slidebody > figure:not([data-sized]) { flex-direction: column; width: 100% !important; }
.slidebody > p:has(> a > img:not([data-sized])) > a,
.slidebody > figure:not([data-sized]) > a {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  width: 100% !important;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slidebody > p > img:not([data-sized]),
.slidebody > p > a > img:not([data-sized]),
.slidebody > figure:not([data-sized]) > a > img {
  flex: 1 1 0;
  min-width: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain;
  margin: 0;
}
/* slideink.js: words too close to what is behind them to read, turned dark
   on a light slide or light on a dark one. !important because a stylesheet
   may colour headings, em or strong directly; it only applies where the
   colours chosen could not be read anyway. */
.frame.ink-dark .slidebody { color: #2a2624 !important; }
.frame.ink-dark .slidebody :is(h1, h2, h3, h4, h5, h6, strong, b, a) { color: #111111 !important; }
.frame.ink-dark .slidebody :is(em, i, figcaption, blockquote, .quiet) { color: #5e5754 !important; }
.frame.ink-light .slidebody { color: #e6e0da !important; }
.frame.ink-light .slidebody :is(h1, h2, h3, h4, h5, h6, strong, b, a) { color: #f4f0ec !important; }
.frame.ink-light .slidebody :is(em, i, figcaption, blockquote, .quiet) { color: #bdb5af !important; }
/* the title slide */
.slidebody h1.decktitle { font-size: 3em; }

/* a slide that is only a picture (or a model, a film) fills the frame */
.frame.full .slidebody { padding: 0; justify-content: center; align-items: center; }
.frame.full .slidebody p, .frame.full .slidebody a, .frame.full .slidebody figure { margin: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.frame.full .slidebody img, .frame.full .slidebody video, .frame.full .slidebody iframe {
  max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; margin: 0;
}
.frame.full .slidebody iframe { border: 0; }
.frame.full .slidebody model-viewer { height: 100% !important; }

/* ------------------------------------------------------- on the page -- */
/* the talk reads as what you say; each slide sits where it comes up */
.deckbar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem 1.1rem;
  margin: 0 0 1.6rem; font-size: .9em;
}
.deckbar .present { font-size: 1.15em; color: var(--ink); text-decoration: none; }
.deckbar .present:hover { text-decoration: underline; }
.slidecard { margin: 2.2rem 0 1.1rem; max-width: 36rem; position: relative; }
.slidecard .frame { border: 1px solid var(--line); }
.slidecard::before {
  content: attr(data-n);
  position: absolute; left: -2.2rem; top: 0; width: 1.6rem; text-align: right;
  font-size: .8rem; color: var(--quiet);
}
@media (max-width: 760px) { .slidecard::before { position: static; display: block; text-align: left; margin-bottom: .2rem; } }
.spoken > :first-child { margin-top: 0; }

/* -------------------------------------------------------------- the deck -- */
/* iOS glass: html/body carry the dvh chain; nothing measures the window */
html.deckroot, .deckroot body {
  height: 100%; height: -webkit-fill-available; height: 100dvh;
  margin: 0; padding: 0;
  background: var(--bg);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
/* a handout is read on paper: white, whatever the talk wears */
html.deckroot:has(body.handout), html.deckroot body.deck.handout { background: #fff !important; }
body.deck { display: block; overflow: hidden; max-width: none; width: auto; font-size: 16px; }
.deck .slides { position: fixed; inset: 0; display: grid; place-items: center; }
.deck .slide { display: none; }
.deck .notes { display: none; }
.deck.audience .slide.on { display: block; width: min(100vw, calc(100dvh * 16 / 9)); }
.deck.audience.blank, .deck.audience.blank .slides { background: #000; }
.deck.audience.blank .slide.on { visibility: hidden; }
.deck.audience .slides { cursor: default; }
.deck.audience.idle, .deck.audience.idle * { cursor: none !important; }
.deckhint {
  position: fixed; left: 50%; bottom: max(1.2rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  font: 14px/1.4 ui-sans-serif, system-ui, sans-serif;
  /* its own colours: it has to read on whatever the talk wears */
  color: #f4f0ec; background: rgba(20, 18, 17, .72);
  padding: .4rem .9rem; border: 1px solid rgba(244, 240, 236, .25); border-radius: 2rem;
  transition: opacity 1s; pointer-events: none; white-space: nowrap;
}
.deckhint.gone { opacity: 0; }

/* ------------------------------------------------------- the presenter -- */
/* your own screen: the words large, the slide and the next one beside them */
.deck.presenter .slides { display: none; }
.pres {
  position: fixed; inset: 0;
  padding: max(.8rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(.8rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  gap: .8rem 1.4rem;
  font: 15px/1.4 ui-sans-serif, system-ui, sans-serif; color: var(--body);
}
.pres header { grid-column: 1 / -1; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.pres .ptitle { font: 1.25rem/1.2 Michelangelus, Georgia, serif; color: var(--ink); margin-right: auto; text-decoration: none; }
.pres .ptitle:hover { text-decoration: underline; text-underline-offset: .2em; }
.pres button {
  font: inherit; color: var(--ink); background: transparent;
  border: 1px solid var(--line); border-radius: .35rem; padding: .3rem .75rem; cursor: pointer;
}
.pres button:hover { border-color: var(--ink); }
.pres button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pres .aud.ok { border-color: transparent; color: var(--quiet); }
.pres .count, .pres .clock { font-variant-numeric: tabular-nums; color: var(--quiet); }
.pres .timer { font-variant-numeric: tabular-nums; font-size: 1.5rem; color: var(--ink); cursor: pointer; user-select: none; }
.pres .timer.paused { opacity: .45; }
.pres .sizes button { padding: .2rem .55rem; }
.pres .sizes button:last-child { font-size: 1.2em; }
.pnotes {
  overflow-y: auto; overscroll-behavior: contain;
  font: var(--ns, 28px)/1.5 Georgia, "Iowan Old Style", serif;
  color: var(--ink);
  padding-right: .6rem;
}
.pnotes .cur > :first-child { margin-top: 0; }
.pnotes p { margin: 0 0 .7em; }
.pnotes .none { color: var(--quiet); font-style: italic; }
.pnotes .upcoming { margin-top: 1.6em; padding-top: .8em; border-top: 1px solid var(--line); color: var(--quiet); font-size: .8em; }
.pnotes .upcoming .lbl { display: block; font: 12px/1.4 ui-sans-serif, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .4em; }
.pnotes .included { margin: 0; }
.pside { display: flex; flex-direction: column; gap: .6rem; min-height: 0; }
.pside .frame { border: 1px solid var(--line); width: 100%; flex: none; }
.pside .pnext { width: 62%; }
.pside .pnext .frame { opacity: .85; }
.pside .lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--quiet); }
.pside .end { aspect-ratio: 16 / 9; display: grid; place-items: center; border: 1px dashed var(--line); color: var(--quiet); }
.pside .pnav { display: flex; gap: .5rem; margin-top: auto; }
.pside .pnav button { flex: 1; font-size: 1.3rem; padding: .5rem; }
.pside .pnav button.blankb { flex: .7; font-size: .95rem; }
@media (max-width: 800px) {
  .pres { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); }
  .pres header { order: -2; }
  .pside { order: -1; }
  .pside .pnext, .pside .lbl { display: none; }
}

/* --------------------------------------------------------------- print -- */
/* ?print: one slide to a page; ?print&handout: each slide with its words */
.deck.print { overflow: auto; height: auto; }
.deck.print .slides { position: static; display: block; padding: 1rem; }
.deck.print .slide { display: block; width: 100%; max-width: 1100px; margin: 0 auto 1.5rem; }
.deck.print .slide .frame { width: 100%; }
.deck.print .slide .frame { border: 1px solid var(--line); }
.deck.print.handout .notes { display: block; font: 15px/1.5 Georgia, serif; color: var(--body); margin: .8rem 0 0; }
@media print {
  html.deckroot, .deckroot body { height: auto; overflow: visible; }
  .deck.print .slides { padding: 0; }
  .deck.print .slide { max-width: none; margin: 0; break-after: page; page-break-after: always; break-inside: avoid; }
  .deck.print:not(.handout) .slide .frame { border: 0; width: 100vw; }
  .deck.print.handout .notes { font-size: 11pt; }
  .deckhint, .pres { display: none !important; }
}