/* Course theme for the reveal.js decks.
   All colours, fonts, sizes and the logo are tokens on :root (spec section 5.6). */
:root {
  --ml-bg: #fbfaf7;
  --ml-fg: #1d232b;
  --ml-muted: #5b6570;
  --ml-rule: #d9d6cf;
  --ml-data: #1f5f8b;          /* data and targets: the thing being predicted */
  --ml-model: #d1495b;         /* models and parameters: the thing being learned */
  --ml-section-bg: #1f5f8b;
  --ml-section-fg: #fbfaf7;
  --ml-checkpoint-bg: #fff4d6;
  --ml-checkpoint-fg: #5c4400;
  --ml-code-bg: #f1efe9;
  --ml-font-body: system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ml-font-mono: "SFMono-Regular", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --ml-size-body: 32px;        /* minimum for body text at 1280 by 720 */
  --ml-size-code: 24px;        /* code blocks in .algorithm slides only */
  --ml-size-caption: 24px;
  --ml-size-h1: 64px;
  --ml-size-h2: 46px;
  --ml-logo: url("KU-Leuven-logo.png");  /* relative to this file */
}

/* Base */
.reveal-viewport { background: var(--ml-bg); }
/* reveal.js does not set left/top on slides during normal viewing. Nested
   (vertical-stack) slides inherit the static position inside the stack
   section, whose left/right padding offsets them, while top-level slides
   sit in .reveal .slides, which has no padding. */
.reveal .slides > section > section { left: 0; top: 0; }
.reveal { font-family: var(--ml-font-body); font-size: var(--ml-size-body); color: var(--ml-fg); line-height: 1.35; }
.reveal .slides { text-align: left; }
.reveal .slides section { box-sizing: border-box; height: 100%; padding: 36px 56px; }
.reveal h1, .reveal h2, .reveal h3 { font-weight: 700; line-height: 1.15; margin: 0 0 0.55em; color: var(--ml-fg); }
.reveal h1 { font-size: var(--ml-size-h1); }
.reveal h2 { font-size: var(--ml-size-h2); }
.reveal h3 { font-size: var(--ml-size-body); color: var(--ml-muted); }
.reveal p, .reveal li { margin: 0 0 0.5em; }
.reveal ul, .reveal ol { margin: 0 0 0 1.1em; padding: 0; }
.reveal code { font-family: var(--ml-font-mono); font-size: 0.85em; }
.reveal table { border-collapse: collapse; }
.reveal th, .reveal td { padding: 0.2em 0.6em; border-bottom: 1px solid var(--ml-rule); text-align: left; }
.reveal img { max-width: 100%; max-height: 100%; }
.reveal .data { color: var(--ml-data); }
.reveal .model { color: var(--ml-model); }
.reveal .caption, .reveal figcaption, .reveal .why, .reveal .gloss { font-size: var(--ml-size-caption); color: var(--ml-muted); }
.reveal .katex { font-size: 1.05em; }
.reveal .katex-display { margin: 0.3em 0; }
.reveal .slide-number { font-size: 18px; background: transparent; color: var(--ml-muted); }
.reveal .controls { color: var(--ml-muted); }
.reveal .progress { color: var(--ml-data); }

/* .title: lecture opener */
.reveal .slides section.title { display: flex; flex-direction: column; justify-content: center; }
.reveal section.title .kicker { font-size: var(--ml-size-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ml-data); font-weight: 700; }
.reveal section.title h1 { margin: 0.2em 0 0.5em; }
.reveal section.title .meta { color: var(--ml-muted); }
.reveal section.title .logo { position: absolute; right: 56px; bottom: 36px; width: 240px; height: 90px; background: var(--ml-logo) no-repeat right bottom / contain; }

/* .section: full-bleed divider; the background colour is set by course.js from --ml-section-bg */
.reveal .slides section.section { display: flex; flex-direction: column; justify-content: center; color: var(--ml-section-fg); }
.reveal section.section .block { font-size: var(--ml-size-caption); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.reveal section.section h2 { color: inherit; font-size: var(--ml-size-h1); }

/* .split: text or maths left, figure right */
.reveal section.split .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; height: calc(100% - 2.2em); }
.reveal section.split .columns > * { min-width: 0; }
@media (max-aspect-ratio: 1/1) { .reveal section.split .columns { grid-template-columns: 1fr; } }

/* .figure: one full-slide figure */
.reveal section.figure figure { margin: 0; height: calc(100% - 2.4em); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3em; }
.reveal section.figure figure img { max-height: 520px; }

/* .derivation: centred steps revealed with fragments */
.reveal section.derivation .steps { display: flex; flex-direction: column; align-items: center; gap: 0.4em; margin-top: 0.4em; }
.reveal section.derivation .why { text-align: center; }

/* .algorithm: pseudocode left, numpy right */
.reveal section.algorithm .columns { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.reveal section.algorithm h3 { margin-bottom: 0.3em; }
.reveal section.algorithm pre { margin: 0; padding: 20px 24px; width: auto; box-shadow: none; background: var(--ml-code-bg); border-radius: 6px; font-family: var(--ml-font-mono); font-size: var(--ml-size-code); line-height: 1.45; white-space: pre; overflow: hidden; }
.reveal section.algorithm pre code { font-size: inherit; max-height: none; padding: 0; background: none; }

/* .frame: model, loss and optimiser */
.reveal section.frame .slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 0.4em; }
.reveal section.frame .slot { border-top: 8px solid var(--ml-rule); padding-top: 0.4em; }
.reveal section.frame .slot.model { border-color: var(--ml-model); }
.reveal section.frame .slot.loss { border-color: var(--ml-fg); }
.reveal section.frame .slot.optimiser { border-color: var(--ml-data); }
.reveal section.frame .slot h3 { margin-bottom: 0.2em; color: var(--ml-fg); }
.reveal section.frame .slot.empty .entry { font-size: 96px; color: var(--ml-rule); text-align: center; }

/* .checkpoint: one question; background colour set by course.js from --ml-checkpoint-bg */
.reveal .slides section.checkpoint { color: var(--ml-checkpoint-fg); }
.reveal section.checkpoint .label { font-size: var(--ml-size-caption); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.reveal section.checkpoint h2 { color: inherit; }

/* .recap: numbered takeaways */
.reveal section.recap ol { list-style: none; margin-left: 0; counter-reset: takeaway; }
.reveal section.recap ol li { counter-increment: takeaway; position: relative; padding-left: 1.6em; margin-bottom: 0.6em; }
.reveal section.recap ol li::before { content: counter(takeaway); position: absolute; left: 0; font-weight: 700; color: var(--ml-model); }

/* .reading: the further reading list that closes every lecture */
.reveal section.reading .refs { list-style: none; margin-left: 0; margin-top: 0.2em; }
.reveal section.reading .refs li { border-top: 3px solid var(--ml-rule); padding-top: 0.35em; margin-bottom: 0.7em; }
.reveal section.reading .refs a { color: var(--ml-model); font-weight: 700; text-decoration: none; }
.reveal section.reading .where { font-family: var(--ml-font-mono); font-size: 0.8em; color: var(--ml-data); margin-left: 0.4em; }
.reveal section.reading .why { display: block; margin-top: 0.1em; }
.reveal section.reading .refs li.optional { border-top-style: dashed; }
.reveal section.reading .refs li.optional a { color: var(--ml-muted); }