/* ==========================================================================
   Talk deck theme — "Coupled Local and Global World Models for Efficient
   First Order RL" (RoboPapers episode).

   Sits on top of reveal.js 6 core (../reveal/reveal.css), which supplies
   layout only. Everything typographic below is ours, matched to the paper
   site: zinc-950 ground, zinc-800 hairlines, emerald accent, serif headings.
   ========================================================================== */

:root {
  /* --- reveal.js theme variables ---------------------------------------- */
  --r-background: #09090b;
  --r-background-color: #09090b;
  --r-main-font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r-main-font-size: 33px;
  --r-main-color: #e4e4e7;
  --r-block-margin: 18px;
  --r-heading-margin: 0 0 18px 0;
  --r-heading-font: Charter, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --r-heading-color: #fafafa;
  --r-heading-line-height: 1.14;
  --r-heading-letter-spacing: -0.015em;
  --r-heading-text-transform: none;
  --r-heading-text-shadow: none;
  --r-heading-font-weight: 600;
  --r-heading1-text-shadow: none;
  --r-heading1-size: 2.05em;
  --r-heading2-size: 1.42em;
  --r-heading3-size: 1.05em;
  --r-heading4-size: 0.9em;
  --r-code-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --r-link-color: #34d399;
  --r-link-color-dark: #10b981;
  --r-link-color-hover: #6ee7b7;
  --r-selection-background-color: #065f46;
  --r-selection-color: #fff;
  --r-overlay-element-bg-color: 240, 240, 240;
  --r-overlay-element-fg-color: 0, 0, 0;

  /* --- deck palette ----------------------------------------------------- */
  --fg: #e4e4e7;
  --dim: #a1a1aa;
  --faint: #71717a;
  --line: #27272a;
  --line-soft: #1c1c20;
  --panel: rgba(24, 24, 27, 0.55);
  --accent: #34d399;
  --accent-strong: #10b981;
  --warn: #fbbf24;
  --bad: #fb7185;
  --info: #60a5fa;
  --violet: #c4b5fd;
}

/* --- reveal base (adapted from the stock theme template) ------------------ */
.reveal-viewport { background: var(--r-background); background-color: var(--r-background-color); }
.reveal { font-family: var(--r-main-font); font-size: var(--r-main-font-size); color: var(--r-main-color); font-weight: 400; }
.reveal ::selection { color: var(--r-selection-color); background: var(--r-selection-background-color); text-shadow: none; }
.reveal .slides section, .reveal .slides section > section { line-height: 1.35; font-weight: inherit; }
.reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 {
  margin: var(--r-heading-margin); color: var(--r-heading-color); font-family: var(--r-heading-font);
  font-weight: var(--r-heading-font-weight); line-height: var(--r-heading-line-height);
  letter-spacing: var(--r-heading-letter-spacing); text-transform: none; text-shadow: none; word-wrap: break-word;
}
.reveal h1 { font-size: var(--r-heading1-size); }
.reveal h2 { font-size: var(--r-heading2-size); }
.reveal h3 { font-size: var(--r-heading3-size); }
.reveal h4 { font-size: var(--r-heading4-size); }
.reveal p { margin: var(--r-block-margin) 0; line-height: 1.4; }
.reveal h1:last-child, .reveal h2:last-child, .reveal h3:last-child, .reveal h4:last-child { margin-bottom: 0; }
.reveal img, .reveal video, .reveal iframe { max-width: 100%; max-height: 100%; }
.reveal strong, .reveal b { font-weight: 650; color: #fafafa; }
.reveal em { font-style: italic; }
.reveal ol, .reveal ul { text-align: left; display: block; margin: 0 0 0 1.05em; }
.reveal ol { list-style-type: decimal; }
.reveal ul { list-style-type: disc; }
.reveal ul ul, .reveal ul ol, .reveal ol ol, .reveal ol ul { margin-left: 1.1em; display: block; }
.reveal code { font-family: var(--r-code-font); text-transform: none; tab-size: 2; }
.reveal pre { font-family: var(--r-code-font); text-align: left; font-size: 0.55em; line-height: 1.35; }
.reveal sup { vertical-align: super; font-size: smaller; }
.reveal small { font-size: 0.62em; line-height: 1.3; }
.reveal a { color: var(--r-link-color); text-decoration: none; transition: color 0.15s; }
.reveal a:hover { color: var(--r-link-color-hover); }
.reveal .controls { color: var(--accent-strong); }
.reveal .progress { color: var(--accent-strong); background: rgba(255, 255, 255, 0.06); height: 3px; }
/* reveal's built-in slide number is disabled (it lands under the nav arrows);
   the counter is drawn in .deck-footer instead. */
.reveal .slide-number { display: none; }

/* --- slide frame ---------------------------------------------------------- */
/* reveal sets `display` inline on the active slide, hence the !important:
   we want the visible slide to be a full-height flex column so that headers
   pin to the top and figures can claim the remaining space. */
.reveal .slides { text-align: left; }
.reveal .slides section { padding: 6px 8px 34px; box-sizing: border-box; }
.reveal .slides > section.present {
  display: flex !important;
  flex-direction: column;
  height: 100%;
}
.reveal .slides > section.present.title-slide,
.reveal .slides > section.present.divider { justify-content: center; }

/* Elements that should absorb the leftover vertical space on a slide. */
.grow { flex: 1 1 auto; min-height: 0; }
/* A framed figure must NOT stretch — a stretched box leaves slack between the
   caption and the bottom border. Instead the box hugs its content and centres
   itself with auto margins; fitFigures() in index.html measures the leftover
   space and caps the media in px, so the box still fills the slide. The
   max-height here is only a fallback if that script doesn't run. */
figure.frame.grow { flex: 0 1 auto; min-height: 0; margin-block: auto; display: flex; flex-direction: column; }
figure.frame.grow > img,
figure.frame.grow > video { flex: 0 1 auto; min-height: 0; max-height: 640px; object-fit: contain; }
/* A media grid centres itself in the leftover space. If a caption follows it,
   the caption travels with it — otherwise the grid absorbs all the space and
   strands the caption at the very bottom of the slide. */
.grid2.grow, .grid3.grow, .grid4.grow { flex: 0 1 auto; margin-block: auto; align-content: center; }
.grid2.grow:has(+ .cap),
.grid3.grow:has(+ .cap),
.grid4.grow:has(+ .cap) { margin-bottom: 0; }
.grid2.grow + .cap,
.grid3.grow + .cap,
.grid4.grow + .cap { margin-bottom: auto; }

/* Persistent footer, drawn outside .slides so it never scales with content. */
.deck-footer {
  position: absolute;
  bottom: 14px; left: 22px;
  z-index: 30;
  font-family: var(--r-code-font);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: #3f3f46;
  pointer-events: none;
}
.deck-footer .sep { color: #27272a; padding: 0 0.5em; }
#slide-counter { color: var(--faint); font-variant-numeric: tabular-nums; }

/* --- headers -------------------------------------------------------------- */
.eyebrow {
  font-family: var(--r-code-font);
  font-size: 0.46em;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 0.55em;
}
.eyebrow .muted { color: var(--faint); }

h2.t { font-size: 1.32em; margin-bottom: 0.5em; }
h2.t .sub { display: block; font-family: var(--r-main-font); font-size: 0.46em; font-weight: 400; letter-spacing: 0; color: var(--dim); margin-top: 0.55em; line-height: 1.4; }

.lead { font-size: 0.95em; color: var(--fg); max-width: 30em; }
.lead.wide { max-width: none; }
.dim { color: var(--dim); }
.faint { color: var(--faint); }
.ours { color: var(--accent); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.info { color: var(--info); }
.nowrap { white-space: nowrap; }

/* --- title slide ---------------------------------------------------------- */
.title-slide h1 { max-width: 21em; margin-bottom: 0.35em; }
.title-slide .authors { font-size: 0.72em; color: var(--fg); margin: 0.2em 0 0.15em; }
.title-slide .affils { font-size: 0.55em; color: var(--faint); margin: 0 0 1.1em; line-height: 1.6; }
.title-slide .links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 0.4em; }
.pill {
  display: inline-block; border: 1px solid var(--line); border-radius: 999px;
  padding: 0.28em 0.95em; font-size: 0.5em; color: var(--dim);
  font-family: var(--r-code-font); letter-spacing: 0.03em;
}
.pill.accent { border-color: rgba(52, 211, 153, 0.4); color: var(--accent); }

/* Inline QR (last slide). Dark modules on a white card — inverted codes are a
   coin-flip with older scanners, and this has to work from a phone across a room. */
.qr { background: #fff; padding: 13px; border-radius: 14px; display: inline-block; line-height: 0; }
.qr svg { display: block; width: 178px; height: 178px; shape-rendering: crispEdges; }
.qr-cap {
  font-family: var(--r-code-font); font-size: 0.4em; line-height: 1.5;
  color: var(--faint); text-align: center; margin: 0.9em 0 0; letter-spacing: 0.05em;
}

/* --- section dividers ----------------------------------------------------- */
.divider .num {
  font-family: var(--r-code-font); font-size: 0.6em; color: var(--accent);
  letter-spacing: 0.3em; margin-bottom: 0.5em;
}
.divider h2 { font-size: 2.0em; margin-bottom: 0.35em; }
.divider p { color: var(--dim); font-size: 0.78em; max-width: 24em; margin-top: 0; }

/* --- layout helpers ------------------------------------------------------- */
.cols { display: flex; gap: 26px; align-items: flex-start; }
.cols.center { align-items: center; }
.cols.eq { align-items: stretch; }  /* NB: not `.stretch` — reveal.js claims that class */
.col { flex: 1 1 0; min-width: 0; }
.col-2 { flex: 2 1 0; min-width: 0; }
.col-3 { flex: 3 1 0; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.mt { margin-top: 20px; }
.mt-s { margin-top: 12px; }
.mt-l { margin-top: 34px; }
.tight p { margin: 0.4em 0; }

/* --- panels / figures ----------------------------------------------------- */
.panel {
  border: 1px solid var(--line); background: var(--panel);
  border-radius: 16px; padding: 18px 20px;
}
.panel.tightpad { padding: 12px 14px; }
.panel h3 { font-family: var(--r-main-font); font-size: 0.62em; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 0.6em; color: #fafafa; }
/* A divider heading *inside* a panel — scopes what follows to that panel only. */
.panel .subhead {
  margin: 1.1em 0 0.7em; padding-top: 0.8em;
  border-top: 1px solid var(--line);
  font-family: var(--r-code-font); font-size: 0.42em;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--faint);
}
.panel .subhead em { font-style: normal; color: var(--accent); }
.panel .label {
  font-family: var(--r-code-font); font-size: 0.42em; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--faint); margin-bottom: 0.7em;
}
.panel.accent { border-color: rgba(52, 211, 153, 0.35); background: rgba(6, 78, 59, 0.16); }
.panel.bad { border-color: rgba(251, 113, 133, 0.3); background: rgba(76, 5, 25, 0.14); }
.panel.warn { border-color: rgba(251, 191, 36, 0.28); background: rgba(69, 46, 3, 0.16); }

/* The "so what" line at the foot of a panel — carries the logical step. */
/* Panels carrying a verdict become columns so the verdicts line up along the
   bottom edge, whatever the body text length. Without :has() support the
   auto margin resolves to 0 and it simply follows the paragraph. */
.panel:has(.verdict) { display: flex; flex-direction: column; }
.panel .verdict {
  /* equal air above and below the rule */
  margin: 1em 0 0; padding-top: 1em;
  border-top: 1px solid var(--line);
  font-size: 0.62em; line-height: 1.4; color: var(--fg);
}
.panel .verdict.bad { color: var(--bad); }
.panel .verdict.warn { color: var(--warn); }
.panel .verdict b { color: inherit; }

figure { margin: 0; }
figure img, figure video { display: block; width: 100%; border-radius: 10px; }
/* Videos dropped straight into a grid (no <figure>) still fill their cell —
   the world-model clips are natively 256×256 and would otherwise sit tiny. */
.grid2 > video, .grid3 > video, .grid4 > video { display: block; width: 100%; }
figure.frame { border: 1px solid var(--line); background: var(--panel); border-radius: 14px; padding: 12px; }
/* A figure that brings its own dark styling — drop our frame so it doesn't
   sit in a second box. Keeps .frame so fitFigures() still sizes it. */
figure.frame.bare { border: none; background: none; padding: 0; }
figcaption, .cap {
  font-size: 0.44em; color: var(--faint); line-height: 1.5; margin-top: 0.7em;
}
.cap.center { text-align: center; }
.vlabel { font-size: 0.42em; text-align: center; margin-top: 0.45em; color: var(--faint); font-family: var(--r-code-font); letter-spacing: 0.08em; }
.vlabel.ours { color: var(--accent); }

img.contain, video.contain { object-fit: contain; }
.fig-fill { display: block; width: 100%; object-fit: contain; }

/* --- bullets -------------------------------------------------------------- */
ul.b { list-style: none; margin-left: 0; }
ul.b > li { position: relative; padding-left: 1.15em; margin: 0.55em 0; line-height: 1.42; }
ul.b > li::before {
  content: "▸"; position: absolute; left: 0; top: 0.02em;
  color: var(--accent); font-size: 0.8em;
}
ul.b.dash > li::before { content: "–"; color: var(--faint); }
ul.b.sm > li { font-size: 0.78em; margin: 0.42em 0; }
ul.b li ul.b { margin-top: 0.3em; }

ol.n { counter-reset: step; list-style: none; margin-left: 0; }
/* `start="N"` is ignored by CSS counters — set counter-reset:step N-1 inline. */
ol.n > li { position: relative; padding-left: 1.6em; margin: 0.7em 0; }
/* Outline slide: titles only, so give them room and size. */
ol.n.outline { font-size: 1.15em; }
ol.n.outline > li { margin: 0.85em 0; padding-left: 1.9em; }
ol.n.outline > li::before { top: 0.06em; }

ol.n > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0.12em;
  font-family: var(--r-code-font); font-size: 0.68em; color: var(--accent);
  border: 1px solid rgba(52, 211, 153, 0.4); border-radius: 50%;
  width: 1.7em; height: 1.7em; line-height: 1.7em; text-align: center;
}

/* --- key/value spec lists ------------------------------------------------- */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.35em 1em; font-size: 0.62em; }
.kv dt { color: var(--faint); font-family: var(--r-code-font); font-size: 0.9em; letter-spacing: 0.03em; white-space: nowrap; }
.kv dd { margin: 0; color: var(--fg); }

/* --- stat tiles ----------------------------------------------------------- */
.stats { display: flex; gap: 16px; }
.stat {
  flex: 1 1 0; border: 1px solid var(--line); background: var(--panel);
  border-radius: 14px; padding: 16px 18px;
}
.stat .n { font-family: var(--r-heading-font); font-size: 1.5em; line-height: 1; color: #fafafa; letter-spacing: -0.02em; }
.stats.big .stat { padding: 24px 26px; }
.stats.big .stat .n { font-size: 2.4em; }
.stat .n.ours { color: var(--accent); }
.stat .k { font-size: 0.44em; color: var(--faint); margin-top: 0.7em; line-height: 1.45; text-transform: uppercase; letter-spacing: 0.12em; font-family: var(--r-code-font); }
.stat .sub { font-size: 0.5em; color: var(--dim); margin-top: 0.5em; }

/* --- tables --------------------------------------------------------------- */
table.data { border-collapse: collapse; width: 100%; font-size: 0.58em; }
table.data th, table.data td { padding: 0.5em 0.75em; text-align: left; }
table.data thead th {
  font-family: var(--r-code-font); font-size: 0.82em; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--faint); font-weight: 400;
  border-bottom: 1px solid var(--line);
}
table.data td { border-bottom: 1px solid var(--line-soft); color: var(--dim); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.data tr.ours td { color: var(--fg); background: rgba(6, 78, 59, 0.22); }
table.data tr.ours td:first-child { color: var(--accent); font-weight: 600; border-left: 2px solid var(--accent); }
table.data tr.zero td { color: #52525b; }

/* --- callouts ------------------------------------------------------------- */
.callout {
  border-left: 2px solid var(--accent); padding: 0.15em 0 0.15em 0.9em;
  color: var(--fg); font-size: 0.78em; line-height: 1.45;
}
.callout.warn { border-color: var(--warn); }
.callout.bad { border-color: var(--bad); }
.callout.info { border-color: var(--info); }

.takeaway {
  margin-top: 26px; border-top: 1px solid var(--line); padding-top: 16px;
  font-size: 0.7em; color: var(--dim);
}

/* A closing takeaway / callout is the last thing on its slide: pin it to the
   bottom edge so the slide reads as a composed block rather than content
   floating in the top half. */
.reveal .slides > section.present > .takeaway,
.reveal .slides > section.present > .callout.mt-l { margin-top: auto; }

/* fitFigures() adds .measuring for one layout pass. Those auto margins have
   already absorbed the slide's free space, so they must be replaced by their
   design values while we work out how much room the figure really has. */
.reveal .slides > section.measuring > figure.frame.grow { margin-block: 0 !important; }
.reveal .slides > section.measuring > .takeaway { margin-top: 26px !important; }
.reveal .slides > section.measuring > .callout.mt-l { margin-top: 34px !important; }
.takeaway b { color: var(--accent); font-weight: 600; }

/* --- math ----------------------------------------------------------------- */
.katex { font-size: 1em !important; }
.mathblock { margin: 0.7em 0; font-size: 0.8em; }
.mathblock .katex-display { margin: 0.5em 0; }
.mathrow { display: flex; align-items: baseline; gap: 0.8em; margin: 0.6em 0; }
.mathrow .tag { font-family: var(--r-code-font); font-size: 0.44em; color: var(--faint); white-space: nowrap; letter-spacing: 0.08em; }

/* --- pseudocode ----------------------------------------------------------- */
.algo {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 2.6em;
  align-items: baseline;
  border: 1px solid var(--line); background: rgba(24, 24, 27, 0.7); border-radius: 12px;
  padding: 20px 24px;
  font-family: var(--r-code-font); font-size: 0.5em; line-height: 1.8; color: var(--dim);
}
.algo > code { white-space: pre; }
.algo > code b { color: #fafafa; font-weight: 600; }
.algo .i1 { padding-left: 1.8em; }
.algo .i2 { padding-left: 3.9em; }
.algo .cmt { color: #52525b; }
.algo .cm { color: #52525b; font-style: italic; }
.algo .hl, .algo .cm.hl { color: var(--accent); font-style: normal; }
.algo .sp, .algo .sp0 { grid-column: 1 / -1; height: 0.9em; }
.algo .sp0 { height: 0; }
.algo .katex { white-space: normal; font-size: 1.06em !important; }

/* --- badges / chips ------------------------------------------------------- */
.chip {
  display: inline-block; font-family: var(--r-code-font); font-size: 0.4em;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3em 0.7em;
  border-radius: 6px; border: 1px solid var(--line); color: var(--faint); margin-right: 0.5em;
}
.chip.ours { border-color: rgba(52, 211, 153, 0.45); color: var(--accent); }
.chip.bad { border-color: rgba(251, 113, 133, 0.35); color: var(--bad); }

/* --- flow diagram (global ↔ local) --------------------------------------- */
.flow { display: flex; align-items: center; gap: 14px; font-size: 0.62em; }
.flow .box { border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; background: var(--panel); flex: 1 1 0; }
.flow .box.g { border-color: rgba(196, 181, 253, 0.35); }
.flow .box.l { border-color: rgba(52, 211, 153, 0.4); }
.flow .arrow { color: var(--faint); font-size: 1.3em; }

/* --- speaker-notes helper (hidden on slides, shown in speaker view) -------- */
aside.notes { display: none; }

/* --- print (?print-pdf) --------------------------------------------------- */
@media print {
  .deck-footer { display: none; }
  .backgrounds { background-color: var(--r-background-color); }
}