/* k-NN slide decks (reveal.js), embedded in the lesson page through an <iframe>.
   theme.js sets <html data-theme="light|dark"> from the site palette. Both sets
   follow GitHub's light and dark colors (the dark one is the palette of the
   site's quizzes and simulators); the figures use gray text on a transparent
   background, so they read on either. */
:root, html[data-theme="dark"] {
  --bg: #0d1117; --card: #161b22; --border: #30363d;
  --fg: #c9d1d9; --strong: #e6edf3; --muted: #8b949e;
  --blue: #58a6ff; --orange: #f0883e; --green: #3fb950; --red: #ff7b72;
  --hl: rgba(240, 136, 62, .12);
}
html[data-theme="light"] {
  --bg: #ffffff; --card: #f6f8fa; --border: #d0d7de;
  --fg: #1f2328; --strong: #0d1117; --muted: #59636e;
  --blue: #0969da; --orange: #bc4c00; --green: #1a7f37; --red: #cf222e;
  --hl: rgba(188, 76, 0, .09);
}

.reveal-viewport { background: var(--bg); }
.reveal {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 30px; color: var(--fg);
}
.reveal .slides { text-align: left; }
.reveal .slides section { padding: 8px 0 0; }

.reveal h1, .reveal h2, .reveal h3 {
  font-family: inherit; color: var(--strong); text-transform: none;
  letter-spacing: -0.01em; font-weight: 700; line-height: 1.15; text-shadow: none;
}
.reveal h1 { font-size: 2.3em; margin-bottom: .25em; }
.reveal h2 { font-size: 1.4em; margin-bottom: .65em; }
.reveal h3 { font-size: 1em; color: var(--muted); font-weight: 600; }
.reveal p { line-height: 1.4; margin: 0 0 .55em; }
.reveal ul, .reveal ol { display: block; margin: 0 0 .5em 1.1em; }
.reveal li { line-height: 1.38; }
.reveal li + li { margin-top: .35em; }
.reveal strong { color: var(--strong); }
.reveal a { color: var(--blue); }

.reveal code {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .82em; background: var(--card); padding: .05em .3em; border-radius: 4px;
}
.reveal pre {
  width: 100%; margin: .3em 0 .7em; box-shadow: none; font-size: .58em;
  border: 1px solid var(--border); border-radius: 8px;
}
.reveal pre code { padding: .8em 1em; background: var(--card); max-height: 500px; }

.reveal table { font-size: .7em; border-collapse: collapse; margin: 0 0 .6em; }
.reveal table th {
  color: var(--muted); font-weight: 600; text-align: left;
  border-bottom: 2px solid var(--border); padding: .3em .8em;
}
.reveal table td { border-bottom: 1px solid var(--border); padding: .3em .8em; }
.reveal table td.r, .reveal table th.r { text-align: right; font-variant-numeric: tabular-nums; }
.reveal table tr.hl td { color: var(--strong); background: var(--hl); }

.reveal img { margin: 0; max-height: 470px; background: transparent; border: 0; box-shadow: none; }
.reveal .fig { text-align: center; }
.reveal .fig img { max-height: 520px; }
.reveal .caption { color: var(--muted); font-size: .62em; text-align: center; margin-top: .3em; }

.reveal .kicker {
  color: var(--orange); text-transform: uppercase; letter-spacing: .12em;
  font-size: .5em; font-weight: 700; margin-bottom: .5em;
}
.reveal .key {
  border-left: 4px solid var(--orange); background: var(--card);
  padding: .55em .9em; border-radius: 0 8px 8px 0; margin-top: .7em;
}
.reveal .key.blue { border-left-color: var(--blue); }
.reveal .key.green { border-left-color: var(--green); }

.reveal .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4em; align-items: start; }
.reveal .cols.wide-left { grid-template-columns: 3fr 2fr; }
.reveal .cols.wide-right { grid-template-columns: 2fr 3fr; }
.reveal .cols.three { grid-template-columns: 1fr 1fr 1fr; }

.reveal .card {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: .6em .85em;
}
.reveal .card h3 { margin: 0 0 .35em; }
.reveal .card p, .reveal .card li { font-size: .8em; }
.reveal .num { font-size: 2.1em; font-weight: 800; line-height: 1.05; color: var(--strong); }
.reveal .label { color: var(--muted); font-size: .6em; }

.reveal .muted { color: var(--muted); }
.reveal .small { font-size: .78em; }
.reveal .blue { color: var(--blue); }
.reveal .orange { color: var(--orange); }
.reveal .green { color: var(--green); }
.reveal .red { color: var(--red); }

.reveal .title-slide { padding-top: 120px !important; }
.reveal .title-slide h3 { color: var(--orange); font-size: 1.15em; margin-bottom: 1.2em; }

.reveal .progress { color: var(--orange); }
.reveal .controls { color: var(--orange); }
.reveal .slide-number { background: transparent; color: var(--muted); font-size: 14px; }

/* ---- Interactive pieces from the lesson pages ----
   Simulators (assets/javascripts/sims/, mounted on <div id="sim-...">) and
   diagrams (assets/javascripts/diagrams/, <div class="dgm" data-dgm="...">)
   run inside the slides too. The diagrams read Material's color variables;
   here they are mapped to the deck's palette. */
.reveal {
  --md-default-fg-color: var(--fg);
  --md-default-fg-color--light: var(--muted);
  --md-default-fg-color--lighter: color-mix(in srgb, var(--fg) 32%, transparent);
  --md-default-fg-color--lightest: var(--border);
  --md-default-bg-color: var(--bg);
  --md-code-bg-color: var(--card);
  --md-typeset-a-color: var(--blue);
}
.reveal .sim-slot, .reveal .dgm-slot { margin: 0 auto; }
.reveal .sim-slot > div[id^="sim-"] { margin: 0 !important; }
.reveal .sim-slot canvas { max-width: none; }
.reveal .sim-slot input[type="range"] { vertical-align: middle; }
.reveal .sim-slot button, .reveal .dgm button { font-family: inherit; }
.reveal .dgm { font-size: 15px; margin: 0; }
.reveal .dgm .dgm-title { font-size: 18px; }
/* imbalance-ladder is an <ol>: beat reveal's inline-block/decimal list style */
.reveal ol.dgm-lad { display: grid; margin: 0; list-style: none; }
.reveal ol.dgm-lad > li { margin: 0; }
.reveal .sim-hint { color: var(--muted); font-size: .55em; margin-top: .4em; }

/* Stage tracker (deck.js): where the story is, at the bottom left. */
.reveal .stage-track {
  position: absolute; left: 14px; bottom: 10px; z-index: 30;
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  font-size: 12px; line-height: 1; color: var(--muted);
  transition: opacity .3s;
}
.reveal .stage-track.is-hidden { opacity: 0; pointer-events: none; }
.reveal .stage-chip {
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); white-space: nowrap;
}
.reveal .stage-chip b { color: var(--muted); margin-right: 2px; }
.reveal .stage-chip.is-done { color: var(--fg); }
.reveal .stage-chip.is-on { border-color: var(--orange); color: var(--strong); background: var(--hl); font-weight: 600; }
.reveal .stage-chip.is-on b { color: var(--orange); }
.reveal .stage-sep { opacity: .6; }
.reveal .dgm-roadmap .dgm-node { padding: .6em .7em; }
/* the lesson roadmap on its own slide: large enough to read from the back of the room */
.reveal .dgm[data-dgm="roadmap"] { padding: 22px 24px 18px; }
.reveal .dgm[data-dgm="roadmap"] .dgm-title { font-size: 26px; }
.reveal .dgm[data-dgm="roadmap"] .dgm-kicker { font-size: 13px; }
.reveal .dgm-roadmap .dgm-node { padding: 16px 16px 18px; gap: 8px; }
.reveal .dgm-roadmap .dgm-node-title { font-size: 26px; line-height: 1.2; }
.reveal .dgm-roadmap .dgm-node-sub { font-size: 18px; line-height: 1.35; }
.reveal .dgm-roadmap .dgm-tag { font-size: 14px; }
.reveal .dgm-roadmap .dgm-arrow { flex-basis: 30px; }
.reveal .dgm[data-dgm="roadmap"] .dgm-note { font-size: 18px; margin-top: 14px; }