/*
  TALK ENGINE: shared styles for every talk.

  This file handles the parts every talk needs: the 16:9 stage that scales
  to the window, click-to-reveal steps, the section bar along the bottom,
  the speaker notes panel, video labels, and the phone layout.

  A talk's own look (colors, fonts, special layouts) goes in that talk's
  own <style> block. To change colors or fonts, set these variables there:

    --page     the area around the stage
    --screen   the stage itself
    --text     main text
    --muted    captions, the section bar, notes labels
    --rule     thin lines
    --display  headline font
    --body     everything else

  Sizes use --u, which is 1% of the stage width, so a talk looks the same
  on a laptop and a projector. Example: font-size: calc(var(--u) * 4);
*/

:root {
  --page: #000;
  --screen: #0b0b0b;
  --text: #fff;
  --muted: #b9b9b9;
  --rule: #3a3a3a;
  --display: system-ui, sans-serif;
  --body: system-ui, sans-serif;
  --notes-h: 0px;
  --bar-h: 3.4;   /* section bar height, in --u */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: var(--page);
  color: var(--text);
  font-family: var(--body);
  display: grid;
  grid-template-rows: 1fr var(--notes-h);
  overflow: hidden;
}
body.notes-open { --notes-h: 30vh; }

/* ---------- the stage ---------- */
.viewport { display: grid; place-items: center; min-height: 0; }
.stage {
  position: relative;
  width: min(100vw, calc((100dvh - var(--notes-h)) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: var(--screen);
  container-type: size;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.stage > * { --u: 1cqw; }

/* ---------- slides ---------- */
.slide {
  position: absolute;
  inset: 0 0 calc(var(--u) * var(--bar-h)) 0;
  padding: calc(var(--u) * 4.2) calc(var(--u) * 6) calc(var(--u) * 3);
  display: none;
  flex-direction: column;
  gap: calc(var(--u) * 2.6);
}
.slide.active { display: flex; }
.slide.bleed { padding: calc(var(--u) * 1.5) calc(var(--u) * 2); }
.note { display: none; }

/* Things that appear on the next click */
.step { opacity: 0; transition: opacity 150ms ease-out; }
.step.shown { opacity: 1; }

/* ---------- handy layout pieces ---------- */
.push { margin-top: auto; }                 /* pushes itself to the bottom of the slide */
.row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: calc(var(--u) * 3); flex: 1; min-height: 0; }
.side { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 4); flex: 1; min-height: 0; }
.side > div { display: flex; flex-direction: column; gap: calc(var(--u) * 2); justify-content: center; }

/* ---------- pictures and videos ---------- */
.media { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * 0.8); }
.media img, .media video {
  flex: 1;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  object-position: left center;
  background: var(--screen);
  display: block;
}
.media video { cursor: pointer; }
.media.cover img { object-fit: cover; object-position: center; }
.media.full video, .media.full img { object-position: center; }
.media figcaption { font-size: calc(var(--u) * 1.5); color: var(--muted); font-weight: 600; }

/* If a video file is missing, its .missing label shows instead. */
.media .missing {
  flex: 1;
  display: none;
  place-content: center;
  border: calc(var(--u) * 0.15) dashed var(--rule);
  color: var(--muted);
  font-family: var(--display);
  font-size: calc(var(--u) * 2.6);
  text-align: center;
  padding: calc(var(--u) * 2);
}
.media.no-file video { display: none; }
.media.no-file .missing { display: grid; }
.play-hint {
  position: absolute;
  left: calc(var(--u) * 1.2);
  bottom: calc(var(--u) * 3.2);
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(var(--u) * 1.6);
  background: var(--page);
  color: var(--text);
  padding: calc(var(--u) * 0.3) calc(var(--u) * 0.8);
}
.media.played .play-hint, .media.no-file .play-hint { display: none; }

/* ---------- section bar ---------- */
.reelbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(var(--u) * var(--bar-h));
  display: flex;
  border-top: calc(var(--u) * 0.1) solid var(--rule);
  padding: 0 calc(var(--u) * 6);
}
.reelbar::before {
  content: "";
  position: absolute;
  left: 0; top: calc(var(--u) * -0.1);
  height: calc(var(--u) * 0.2);
  width: var(--progress, 0%);
  background: var(--text);
}
.reelbar button {
  flex: 1;
  background: none;
  border: 0;
  color: var(--muted);
  font-family: var(--display);
  font-weight: 600;
  font-size: calc(var(--u) * 1.25);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.reelbar button:hover, .reelbar button.current { color: var(--text); }
.reelbar button.current { font-weight: 800; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 0.12em; }
.reelbar .count { margin-left: auto; flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--muted); font-family: var(--display); font-weight: 600; font-size: calc(var(--u) * 1.25); align-self: center; }

/* ---------- speaker notes (press N) ---------- */
.notes {
  display: none;
  background: #1c1c1c;
  color: #fff;
  border-top: 1px solid #3a3a3a;
  padding: 14px 24px 18px;
  overflow: auto;
  font-family: system-ui, sans-serif;
}
body.notes-open .notes { display: block; }
.notes .bar { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 17px; color: #b9b9b9; margin-bottom: 8px; }
.notes .bar b { color: #fff; }
.notes .late { color: #fff; background: #555; padding: 0 6px; }
.notes .body { max-width: 75ch; }
.notes .body p { font-size: 18px; line-height: 1.5; margin-bottom: 8px; }
.notes .keys { color: #b9b9b9; font-size: 14px; margin-top: 10px; }

.hint { position: fixed; right: 14px; top: 10px; font-size: 13px; color: var(--muted); pointer-events: none; font-family: system-ui, sans-serif; }
body.used .hint { display: none; }

/* "← All talks" link, top left, hidden once you start presenting */
.home { position: fixed; left: 14px; top: 10px; font-size: 13px; color: var(--muted); font-family: system-ui, sans-serif; text-decoration: none; z-index: 10; }
.home:hover { color: var(--text); text-decoration: underline; }
body.used .home { display: none; }

@media (prefers-reduced-motion: reduce) { .step { transition: none; } }

/* Phones held upright: slides grow taller and scroll instead of shrinking the text. */
@media (max-width: 700px) and (orientation: portrait) {
  body { overflow: auto; display: block; }
  .viewport { display: block; }
  .stage { width: 100vw; aspect-ratio: auto; min-height: 100dvh; container-type: inline-size; }
  .stage > * { --u: 2.1cqw; }
  .slide { position: relative; inset: auto; min-height: calc(100dvh - var(--u) * 6); padding: calc(var(--u) * 6) max(16px, calc(var(--u) * 5)) calc(var(--u) * 8); }
  .row, .side { grid-auto-flow: row; grid-template-columns: 1fr; }
  .media img, .media video { flex: none; height: auto; }
  .reelbar { position: fixed; padding: 0 16px; background: var(--screen); }
  .reelbar button { display: none; }
  .reelbar button.current { display: block; font-size: calc(var(--u) * 1.6); }
  .reelbar .count { font-size: calc(var(--u) * 1.6); }
  .hint { display: none; }
}