/* Presentation mode (true slides, fullscreen). Owned by the presentation engineer, round 3
   (docs/mobile/council/r3-present.md). present.js sets :root.is-presenting (and keeps [data-teaching="true"] for the
   pages' and figures' compact rules), marks the current section.slide .is-pp-current, the rest of the page
   [data-pp-off], the hidden steps and questions of a paged slide [data-pp-hide], and scales .module-main > .wrap to fit.
   Every selector starts with :root.is-presenting so it wins over the page and figure sheets loaded after this one. */

:root { --pp-bar: 48px; }

/* ---------- The stage: one slide, nothing else ---------- */
:root.is-presenting, :root.is-presenting body { overflow: hidden; }
:root.is-presenting body {
  background:
    radial-gradient(38% 46% at 4% 0%, var(--glow-1), transparent 70%),
    radial-gradient(40% 50% at 100% 6%, var(--glow-3), transparent 70%),
    radial-gradient(46% 42% at 60% 100%, var(--glow-2), transparent 72%),
    var(--bg);
  background-attachment: fixed;
}
:root.is-presenting body > :not(.module-main):not([data-pp-ui]),
:root.is-presenting .course-nav,
:root.is-presenting [data-pp-off],
:root.is-presenting [data-pp-hide],
:root.is-presenting .module-main section.slide:not(.is-pp-current),
:root.is-presenting .pp-end[hidden],
:root.is-presenting .byline { display: none !important; }
:root.is-presenting .module-main {
  position: fixed; top: var(--pp-bar); right: 0; bottom: 0; left: 0; z-index: 1;
  margin: 0; padding: 0; overflow: hidden; isolation: isolate; background: none;
}
:root.is-presenting .module-main::before, :root.is-presenting .module-main::after { display: none; }
:root.is-presenting .module-main.is-pp-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
:root.is-presenting .module-main.is-pp-scroll-x { overflow-x: auto; }
/* The slides are laid out at 1280 px whatever the screen, then scaled (present.js): the same slide on every screen. */
:root.is-presenting .module-main > .wrap {
  position: absolute; left: 0; top: 0; width: 1280px; max-width: none; margin: 0; padding-inline: 32px; transform-origin: 0 0;
}
.pp-spacer { position: absolute; width: 1px; height: 1px; pointer-events: none; visibility: hidden; }
:root:not(.is-presenting) .pp-spacer { display: none; }

/* The reference widths, independent of the window: figures 1120, the 900 cards, the index's wide groups. */
:root.is-presenting .breakout { --bw: 1120px; }
:root.is-presenting .breakout.breakout--mid { --bw: 900px; }
:root.is-presenting .prose > :is(.knowledge, .card--wide), :root.is-presenting .prose > #check { --kw: 900px; width: 900px; margin-left: calc(50% - 450px); }
/* With knowledge is two columns of prompts and checks: on a landscape screen it takes the figures' width.
   (!important: mobile.css's rule names #check inside :is(), which gives it an id's weight.) */
:root.is-presenting .prose > .slide.knowledge { --kw: 1120px; width: 1120px !important; margin-left: calc(50% - 560px) !important; }
:root.is-presenting :is(#capsules, #labs) { --tw: 1216px; }

/* A beat's number, read in the reading layout (hidden slides do not count in a CSS counter). */
:root.is-presenting h2[data-pp-sec]::before { content: attr(data-pp-sec); }

/* ---------- Cards keep their own frame (the checkpoint's padding, the cards' radius and shadow) ---------- */
:root.is-presenting .slide h2 { margin-top: 0; }
:root.is-presenting .hero.slide { padding: 0; }
:root.is-presenting .beat-end { margin-top: 12px; }
:root.is-presenting .deeper { margin-block: 14px 0; }
:root.is-presenting .slide > :last-child { margin-bottom: 0 !important; }

/* Paged slides: one step of Try it, one question of the quiz, per screen. */
:root.is-presenting .steps.is-pp-paged { margin-bottom: 0 !important; }
:root.is-presenting .steps.is-pp-paged > li { margin-bottom: 0 !important; }
:root.is-presenting .steps.is-pp-paged > li::after { display: none; }
:root.is-presenting .is-pp-paged > .quiz { margin-top: 0; padding-top: 0; border-top: 0; }
:root.is-presenting .slide.is-pp-paged > .steps:last-child, :root.is-presenting .slide.is-pp-paged > .quiz { margin-bottom: 0; }
/* A step with a phone capture: the capture on the right, beside the step's text, so the step fits a landscape slide. */
:root.is-presenting .try > li { display: flow-root; }
:root.is-presenting .try > li > .try__shot:not(.try__shot--strip) { float: right; width: 236px; margin: 0 0 8px 40px !important; }
:root.is-presenting .try > li > .try__shot--strip { width: min(100%, 420px); }

/* The slide arrives: a short fade and a few pixels of travel, in the direction of the move (none when still). */
:root.is-presenting .is-pp-in { animation: pp-in .26s var(--ease-out) both; }
:root.is-presenting .is-pp-in[data-pp-dir="prev"] { animation-name: pp-in-back; }
@keyframes pp-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes pp-in-back { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { :root.is-presenting .is-pp-in { animation: none; } }
:root[data-motion="off"].is-presenting .is-pp-in { animation: none; }

/* ---------- The bar: where we are, and the controls, which rest out of sight ---------- */
.pp-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10010; height: var(--pp-bar); display: none; align-items: center; gap: 16px;
  padding: 0 clamp(14px, 2.2vw, 30px); color: var(--ink-3); font: 500 .8rem/1 var(--font-body);
}
:root.is-presenting .pp-bar { display: flex; }
.pp-where { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; }
.pp-cap {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  font: 600 .66rem/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.pp-cap::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--wire-deep); box-shadow: 0 0 0 3px var(--accent-soft); }
.pp-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; font-weight: 600; color: var(--ink-2); }
.pp-part {
  flex: none; padding: 4px 9px; border-radius: 999px; font: 600 .66rem/1 var(--font-mono); letter-spacing: .06em;
  color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.pp-part[hidden] { display: none; }
.pp-ctrls { display: flex; align-items: center; gap: 4px; flex: none; }
.pp-btn, .pp-fit, .pp-exit, .pp-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 32px; border-radius: 9px;
  border: 1px solid transparent; background: transparent; color: var(--ink-2); cursor: pointer; font: 600 .78rem/1 var(--font-body);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .35s ease;
}
.pp-btn { width: 32px; font-size: 1.05rem; }
.pp-btn svg, .pp-exit svg, .pp-cta svg { width: 17px; height: 17px; }
.pp-exit svg { width: 14px; height: 14px; }
.pp-btn:hover:not(:disabled), .pp-fit:hover, .pp-exit:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); border-color: var(--rule-strong); color: var(--ink); }
.pp-btn:disabled { opacity: .28; cursor: default; }
.pp-btn[hidden] { display: none; }
.pp-count { min-width: 64px; text-align: center; font: 600 .76rem/1 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-2); letter-spacing: .02em; }
.pp-div { width: 1px; height: 18px; margin: 0 8px; background: var(--rule-strong); transition: opacity .35s ease; }
.pp-zoom { display: inline-flex; align-items: center; gap: 2px; transition: opacity .35s ease; }
.pp-fit { min-width: 54px; padding: 0 10px; font: 600 .7rem/1 var(--font-mono); letter-spacing: .04em; }
.pp-fit[aria-pressed="true"] { color: var(--ink-3); }
.pp-exit { padding: 0 12px 0 10px; margin-left: 6px; border-color: var(--rule-strong); }
.pp-exit:hover { border-color: var(--no); color: var(--no); background: color-mix(in srgb, var(--no) 7%, transparent); }
.pp-cta { padding: 0 14px 0 12px; color: var(--on-accent); background: var(--accent); border-color: var(--accent); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent); }
.pp-cta:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.pp-cta[hidden] { display: none; }
/* At rest: only where we are and the counter stay; the buttons come back with the mouse or the keyboard. */
.pp-bar.is-idle :is(.pp-btn, .pp-div, .pp-zoom, .pp-exit) { opacity: 0; }
.pp-bar.is-idle .pp-btn:disabled { opacity: 0; }
.pp-bar :focus-visible { opacity: 1 !important; }

/* A narrow window (a tablet held upright): the essentials only. */
@media (max-width: 960px) { .pp-zoom, .pp-div { display: none; } .pp-bar.has-cta .pp-title { display: none; } }
@media (max-width: 600px) { .pp-cap, .pp-exit span, .pp-cta span, .pp-part { display: none; } .pp-bar { gap: 8px; } }

/* The progress line, on the bottom edge: the brand wire. */
.pp-progress { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10010; height: 3px; display: none; background: color-mix(in srgb, var(--ink) 7%, transparent); }
:root.is-presenting .pp-progress { display: block; }
.pp-progress > span { display: block; height: 100%; background: var(--wire); transform-origin: 0 50%; transform: scaleX(0); transition: transform .3s var(--ease-out); }

/* A slide taller than the screen: a fade on the bottom edge and a cue; the next key scrolls first. */
.pp-cue {
  position: fixed; left: 50%; bottom: 16px; z-index: 10011; transform: translateX(-50%); margin: 0; display: none; align-items: center; gap: 6px;
  padding: 7px 12px 7px 14px; border-radius: 999px; cursor: pointer; font: 600 .74rem/1 var(--font-body); color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--rule-strong); box-shadow: var(--shadow);
}
.pp-cue svg { width: 15px; height: 15px; }
:root.is-presenting .pp-cue:not([hidden]) { display: inline-flex; animation: pp-cue 1.8s ease-in-out infinite; }
:root.is-presenting .pp-cue:not([hidden])::before {
  content: ""; position: fixed; left: -50vw; right: -50vw; bottom: -16px; height: 90px; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, var(--bg), transparent);
}
@keyframes pp-cue { 50% { transform: translate(-50%, 3px); } }
@media (prefers-reduced-motion: reduce) { :root.is-presenting .pp-cue:not([hidden]) { animation: none; } }

/* The first time only: the keys. */
.pp-hint {
  position: fixed; left: 50%; bottom: 22px; z-index: 10020; margin: 0; transform: translateX(-50%); padding: 10px 18px; border-radius: 12px;
  background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--code-rule); font: 500 .8rem/1.3 var(--font-body); letter-spacing: .02em;
  pointer-events: none; animation: pp-hint 4.2s ease forwards; white-space: nowrap;
}
@keyframes pp-hint { 0% { opacity: 0; transform: translate(-50%, 8px); } 8% { opacity: 1; transform: translate(-50%, 0); } 82% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- The end: the next capsule ---------- */
.pp-end { width: 900px; margin: 0 auto; }
.pp-end__k {
  display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font: 600 .74rem/1.3 var(--font-mono); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
}
.pp-end__k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wire-deep); box-shadow: 0 0 0 4px var(--accent-soft); }
.pp-end__card {
  position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 34px; align-items: center;
  padding: 40px 44px 38px; border-radius: var(--r-xl); text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow);
  transition: box-shadow .25s ease, transform .25s var(--ease-out), border-color .25s ease;
}
.pp-end__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--wire); }
.pp-end__card::after { content: ""; position: absolute; z-index: -1; right: -12%; top: -40%; width: 60%; height: 110%; background: radial-gradient(closest-side, var(--glow-2), transparent); pointer-events: none; }
a.pp-end__card:hover { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 40%, var(--rule)); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
a.pp-end__card:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), var(--shadow-lift); }
.pp-end__label { grid-column: 1 / -1; margin-bottom: 14px; font: 600 .74rem/1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.pp-end__n {
  grid-row: 2 / span 2; font: 600 6.6rem/.9 var(--font-display); letter-spacing: -.03em;
  background: var(--text-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pp-end__q { font: 600 2.35rem/1.14 var(--font-display); letter-spacing: -.01em; text-wrap: balance; }
.pp-end__go, .pp-end__soon {
  justify-self: start; margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  font: 600 .92rem/1 var(--font-body);
}
.pp-end__go { color: var(--on-accent); background: var(--accent); }
.pp-end__soon { color: var(--ink-3); border: 1px dashed var(--rule-strong); font: 600 .74rem/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.pp-end__card--soon .pp-end__n { opacity: .55; }
.pp-end__more { margin: 22px 0 0; font-weight: 600; }
.pp-end__more a { text-decoration: none; }
.pp-end__note { margin: 22px 0 0; font-size: .86rem; color: var(--ink-3); }
.pp-end__note kbd { font-size: .78rem; }

@media print { .pp-bar, .pp-progress, .pp-cue, .pp-hint, .pp-end, .pp-spacer { display: none !important; } }