/* ============================================================
   The deck. A stage that scales with the viewport, a trainer
   notes drawer underneath, and a bottom rail.

   Sizing: one base font-size on .slide__pad, everything else in
   em off it. A slide that would overflow gets --fs turned down
   by deck.js until it fits, so text stays crisp — no transform
   scaling, no clipping, no scrolling to read a slide.
   ============================================================ */

body.is-deck { overflow: hidden; height: 100svh; }

.deck {
  display: grid;
  grid-template-rows: 1fr auto auto;
  height: 100svh;
}

/* ---------------------------------------------------------- stage */

.stage {
  position: relative;
  container-type: size;
  container-name: stage;
  min-height: 0;
  background: var(--ink);
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr;
  min-height: 0;
  animation: slidein 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.slide[hidden] { display: none; }
@keyframes slidein { from { opacity: 0; translate: 0 0.6cqh } to { opacity: 1; translate: 0 0 } }
@media (prefers-reduced-motion: reduce) { .slide { animation: none } }

/* the base unit — deck.js dials --fs down for dense slides */
.slide__pad {
  --fs: 1;
  font-size: clamp(11px, calc(3.9cqh * var(--fs)), 34px);
  position: relative;
  display: grid;
  align-content: safe center;
  justify-content: stretch;
  padding: 5.5cqh 5.5cqw 5.5cqh;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
}

/* ---------------------------------------------------------- slide type */

.slide h1, .slide h2, .slide h3 {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
.slide h1 { font-size: 1.85em; }
.slide h2 { font-size: 1.5em; }
.slide h3 { font-size: 1.15em; color: var(--amber); }

.slide p, .slide li {
  font-family: var(--serif);
  font-size: 0.82em;
  line-height: 1.48;
  margin: 0 0 0.6em;
  text-wrap: pretty;
}
.slide strong { color: var(--amber); font-weight: 700; }
.slide em { color: var(--fg-dim); }

.slide ul, .slide ol { margin: 0 0 0.7em; padding-inline-start: 1.6em; }
.slide li { margin-bottom: 0.3em; }
.slide li::marker { color: var(--amber-dim); }
.slide li p { margin-bottom: 0.25em; }

.slide a { color: var(--amber); text-decoration: none; border-bottom: 1px solid var(--amber-dim); }

.slide :not(pre) > code {
  font-family: var(--mono);
  font-size: 0.9em;
  padding: 0.05em 0.32em;
  background: var(--ink-3);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  color: var(--amber);
  overflow-wrap: anywhere;
}

.slide pre {
  font-family: var(--mono);
  font-size: 0.62em;
  line-height: 1.5;
  margin: 0 0 0.8em;
  padding: 0.8em 1em;
  background: var(--ink-2);
  border: 1px solid var(--rule-soft);
  border-inline-start: 2px solid var(--amber-dim);
  border-radius: 2px;
  overflow-x: auto;
  max-width: 100%;
}
.slide pre code { font: inherit; color: var(--fg); background: none; border: 0; padding: 0; }
.slide pre:has(.language-text), .slide pre > code.language-text {
  border-inline-start-color: var(--rule);
  color: var(--fg-dim);
}

.slide .tablewrap {
  margin: 0 0 0.8em;
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  overflow: auto;
  max-width: 100%;
}
.slide table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.56em;
  line-height: 1.45;
}
.slide th {
  text-align: start;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.82em;
  color: var(--fg-faint);
  background: var(--ink-3);
  padding: 0.7em 0.9em;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.slide td { padding: 0.6em 0.9em; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.slide tbody tr:last-child td { border-bottom: 0; }
.slide td p { font-size: 1em; max-width: none; margin: 0; }
.slide td code { white-space: nowrap; }

.slide hr { border: 0; border-top: 1px solid var(--rule-soft); margin: 0.8em 0; }

.slide blockquote {
  margin: 0 0 0.7em;
  padding-inline-start: 1em;
  border-inline-start: 2px solid var(--rule);
  color: var(--fg-dim);
}

/* ---------------------------------------------------------- layouts

   Every layout is a column centred in the stage. Text stays left-aligned
   inside it (ragged-right reads faster), except on hook and quote slides,
   where the whole point is one centred statement. */

.s-default, .s-code, .s-do, .s-doonly, .s-section {
  width: min(100%, 74ch);
  margin-inline: auto;
}
.s-split, .s-hero { width: min(100%, 100ch); margin-inline: auto; }

/* slides built around a table or a wide terminal block get a wider column */
.s-default:has(.tablewrap), .s-code:has(pre), .s-do:has(.tablewrap) { width: min(100%, 96ch); }

.s-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
  gap: 4cqw;
  align-items: center;
}
.s-hero__photo {
  aspect-ratio: 780 / 1048;
  max-height: 72cqh;
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  background: var(--ink-2);
}
.s-hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: luminosity;
}
html[data-mode="paper"] .s-hero__photo img { mix-blend-mode: normal; filter: grayscale(0.15); }
.s-hero__text { min-width: 0; }
.s-hero__text h1, .s-hero__text h2 { font-size: 2.1em; }
.s-hero__text p { font-size: 0.78em; max-width: 46ch; }

.s-section { display: grid; gap: 0.5em; justify-items: start; align-content: center; }
.s-section__min {
  font-family: var(--mono);
  font-size: 3em;
  font-weight: 600;
  line-height: 0.85;
  color: var(--amber-dim);
  font-variant-numeric: tabular-nums;
}
.s-section h1, .s-section h2 { font-size: 1.65em; margin: 0; }
.s-section p { color: var(--fg-dim); }

.s-ask {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  width: min(100%, 30ch);
  margin-inline: auto;
}
.s-ask h1, .s-ask h2, .s-ask h3 {
  font-family: var(--serif);
  font-size: 1.9em;
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0 0 0.5em;
}
.s-ask p { font-size: 0.75em; color: var(--fg-faint); }
.s-ask pre { text-align: start; width: 100%; }
.s-ask ul, .s-ask ol { text-align: start; }

.s-quote {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  width: min(100%, 34ch);
  margin-inline: auto;
}
.s-quote h1, .s-quote h2, .s-quote h3, .s-quote p {
  font-family: var(--serif);
  font-size: 1.5em;
  font-weight: 400;
  line-height: 1.28;
  color: var(--fg);
  margin: 0 0 0.4em;
}
.s-quote strong { color: var(--amber); }

.s-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3cqw;
  align-items: start;
}
.s-split > :is(h1, h2, h3) { grid-column: 1 / -1; }
.s-split > :is(pre, .tablewrap) { grid-column: 2; }
.s-split > :is(p, ul, ol) { grid-column: 1; }
.s-split p { max-width: 40ch; }

.s-code pre { font-size: 0.72em; }
.s-code p { max-width: 64ch; }

/* the activity block — visible to interns, styled to shout */
.s-do, .s-doonly {
  margin-top: 0.6em;
  padding: 0.8em 1em;
  background: var(--green-wash);
  border: 1px solid var(--green-dim);
  border-inline-start-width: 3px;
  border-radius: 2px;
  min-width: 0;
}
.s-doonly { margin-top: 0; }
.s-do__tag {
  display: block;
  font-family: var(--mono);
  font-size: 0.4em;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.9em;
}
.s-do p, .s-doonly p { font-size: 0.72em; }
.s-do pre, .s-doonly pre { background: var(--ink); border-inline-start-color: var(--green-dim); }
.s-do :not(pre) > code, .s-doonly :not(pre) > code { color: var(--green); }
.s-doonly h1, .s-doonly h2, .s-doonly h3 { color: var(--green); }

/* Layout wrappers may shrink horizontally so long code lines scroll instead of
   blowing out the slide. They must NOT be allowed to shrink vertically:
   `min-height: 0` lets the grid size a row shorter than its own content, which
   spills text over the block below AND makes the pad report that it fits, so
   the auto-fitter never runs. Horizontal only. */
.s-default, .s-code, .s-split, .s-ask, .s-quote, .s-section, .s-hero, .s-do, .s-doonly {
  min-width: 0;
}

/* ---------------------------------------------------------- notes */

.notes {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.5rem;
  max-height: 30svh;
  padding: 0.75rem clamp(1rem, 3vw, 2rem);
  background: var(--ink-2);
  border-top: 1px solid var(--green-dim);
  font-size: 0.88rem;
}
html[data-role="intern"] .notes,
.notes[data-open="0"] { display: none; }

.notes__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1ch; }
.notes__tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
}
.notes__clock { font-family: var(--mono); font-size: 0.78rem; color: var(--fg-faint); }
.notes__clock b { font-variant-numeric: tabular-nums; color: var(--fg-dim); }
.notes__clock b.running { color: var(--amber); }
.notes__clock i { font-style: normal; margin-inline-start: 1ch; }
.notes__clock i.behind { color: var(--red); }
.notes__clock i.ahead { color: var(--green); }

.notes__body { overflow-y: auto; scrollbar-width: thin; min-height: 0; }
.note > * + * { margin-block-start: 0.6em; }
.note p, .note li { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.note ul, .note ol { margin: 0; padding-inline-start: 1.2rem; }
.note strong { color: var(--green); }
.note :not(pre) > code {
  font-family: var(--mono); font-size: 0.86em; color: var(--green);
  background: var(--ink); padding: 0.05em 0.35em; border-radius: 2px;
}
.note pre {
  font-family: var(--mono); font-size: 0.78rem; line-height: 1.5;
  padding: 0.6rem 0.8rem; margin: 0.6em 0; overflow-x: auto;
  background: var(--ink); border: 1px solid var(--rule-soft);
  border-inline-start: 2px solid var(--green-dim); border-radius: 2px;
}
.note__none { color: var(--fg-faint); font-style: italic; }

.notes__next {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--fg-faint);
  border-top: 1px solid var(--rule-soft);
  padding-top: 0.5rem;
}
.notes__next b { color: var(--fg-dim); font-weight: 500; }

/* ---------------------------------------------------------- bottom rail */

.deckbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem clamp(0.7rem, 2vw, 1.4rem);
  background: var(--ink-2);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 0.72rem;
}

.db {
  font: inherit;
  letter-spacing: 0.08em;
  padding: 0.34rem 0.6rem;
  min-width: 2.2rem;
  color: var(--fg-dim);
  background: var(--ink-3);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
}
.db:hover { color: var(--fg); border-color: var(--rule); }
.db--wide { padding-inline: 0.8rem; }
.db[aria-pressed="true"] { color: var(--green); border-color: var(--green-dim); background: var(--green-wash); }

.deckbar__prog {
  flex: 1;
  height: 2px;
  background: var(--rule-soft);
  border-radius: 999px;
  overflow: hidden;
  margin-inline: 0.4rem;
}
.deckbar__fill { height: 100%; width: 0; background: var(--amber); transition: width 260ms ease-out; }

.deckbar__n { color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.deckbar__n b { color: var(--amber); }
.deckbar__block {
  color: var(--fg-faint);
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------------------------------------------------------- overview */

.overview {
  position: fixed;
  inset: 0;
  z-index: 80;
  overflow-y: auto;
  padding: clamp(1rem, 3vw, 2.5rem);
  background: var(--ink);
}
.overview[hidden] { display: none; }
.overview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
}
.thumb {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  gap: 0.7rem;
  align-items: baseline;
  text-align: start;
  padding: 0.85rem 0.9rem;
  font: inherit;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--fg-dim);
  background: var(--ink);
  border: 0;
  cursor: pointer;
}
.thumb:hover { background: var(--ink-2); color: var(--fg); }
.thumb.is-cur { background: var(--amber-wash); color: var(--amber); }
.thumb__n { color: var(--fg-faint); font-variant-numeric: tabular-nums; }
.thumb.is-cur .thumb__n { color: var(--amber); }
.thumb__t { line-height: 1.35; }
.thumb__m { color: var(--fg-faint); font-size: 0.7rem; }

/* ---------------------------------------------------------- narrow */

@media (max-width: 820px) {
  .s-hero { grid-template-columns: 1fr; gap: 2cqh; }
  .s-hero__photo { width: 34cqw; max-height: 34cqh; }
  .s-split { grid-template-columns: 1fr; }
  .s-split > :is(pre, .tablewrap, p, ul, ol) { grid-column: 1; }
  .notes { max-height: 38svh; }
  .deckbar__block { display: none; }
}