/* IAIFI 2026 lecture deck — shared styles.
   Merged from the ICTP-SAIFR 2026 lib/lecture.css and the LISA Hackathon /
   colloquium lib/presentation.css (which added .eyebrow, .title-slide,
   .section-slide and .down-hint).  Per-lecture additions live in a small
   inline <style> block in the lecture file itself. */

.reveal .slides section {
  background: #ffffff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  padding: 30px 40px;
  box-sizing: border-box;
  height: 700px !important;
}
.reveal .slides section.stack {
  background: none;
  box-shadow: none;
  padding: 0;
  height: auto !important;
}
.reveal { font-family: 'Inter', sans-serif; font-weight: 400; }
.reveal h1, .reveal h2, .reveal h3 { color: #2c3e50; font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
.reveal h2 { font-size: 1.2em; margin-bottom: 0.3em; text-align: left; }
.reveal .subtitle { font-size: 0.92em; color: #7f8c8d; margin-top: 0.5em; }
.reveal section { font-size: 0.66em; }
.reveal section.stack { font-size: 1em; }
.reveal p { margin: 0.3em 0; }
.reveal ul { text-align: left; margin: 0.3em 0; }
.reveal li { margin: 0.15em 0; }
.reveal .highlight { color: #e74c3c; font-weight: bold; }
.reveal .MathJax { font-size: 0.95em; }

.reveal .box, .reveal .box-blue, .reveal .box-orange,
.reveal .box-green, .reveal .box-purple {
  background: #ecf0f1; border-radius: 10px; padding: 12px 16px;
  margin: 10px 0; text-align: left;
}
.reveal .box-blue   { border-left: 4px solid #2980b9; }
.reveal .box-orange { border-left: 4px solid #e67e22; }
.reveal .box-green  { border-left: 4px solid #27ae60; }
.reveal .box-purple { border-left: 4px solid #8e44ad; }

.slide-footer {
  position: absolute; bottom: 8px; left: 40px; right: 40px;
  font-size: 10px; color: #bdc3c7;
  display: flex; justify-content: space-between; pointer-events: none;
}

pre code { font-family: 'Menlo','Monaco',monospace; }

.ctrl-row { display:flex; gap:14px; font-size:0.9em; align-items:center; margin-top:4px; flex-wrap:wrap; }
.ctrl-row label { white-space: nowrap; }
.ctrl-row input[type=range] { vertical-align: middle; }
.ctrl-row button { padding:3px 12px; cursor:pointer; }
.ctrl-row input[type=checkbox] { vertical-align: middle; transform: scale(1.2); margin-right:4px; }

/* --- Title & section-divider slides ----------------------------- */
.reveal section.title-slide,
.reveal section.section-slide {
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.reveal section.title-slide .stack,
.reveal section.section-slide .stack { max-width: 90%; }

/* The flex centering above never reaches the slide you are looking at:
   reveal's own `.reveal .slides>section.present { display:block }` is more
   specific (three classes vs two) than `.reveal section.section-slide`, so
   align-items/justify-content are inert. The slide then sat at the top of
   the slide, and its 90%-wide .stack hugged the left edge -- 5% off centre.
   Centre from the inner wrapper instead: reveal styles no .stack div, so
   there is no specificity fight.

   This applies to the title slide for exactly the same reason -- it carries
   the identical flex rule above and the identical specificity loss. */
.reveal section.title-slide > .stack,
.reveal section.section-slide > .stack {
  height: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.reveal section.title-slide h1 { font-size: 1.6em; margin: 0; }
.reveal section.title-slide h3 {
  font-size: 0.9em; color: #34495e; margin: 0.4em 0 0;
  font-family: 'Space Grotesk', sans-serif; font-weight: 500;
}
.reveal section.title-slide .title-meta {
  font-size: 0.7em; color: #7f8c8d; margin-top: 1.4em;
}

.reveal section.section-slide h1 { font-size: 2em; margin: 0; }
.reveal section.section-slide p {
  font-size: 1.1em; color: #7f8c8d; margin-top: 15px;
}
.reveal .grad-bar {
  width: 200px; height: 4px;
  background: linear-gradient(90deg, #2980b9, #e74c3c);
  margin: 0 auto 25px;
}
.reveal .grad-bar.below { margin: 25px auto 0; }

/* "Details" affordance: centred at the bottom of a slide that has a vertical
   down-slide under it. Non-interactive -- reveal's own arrow keys navigate. */
.reveal .down-hint {
  position: absolute;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.5em; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #95a0a8; text-align: center; line-height: 1.1;
  pointer-events: none;
}
.reveal .down-hint .chev {
  display: block; font-size: 1.45em; letter-spacing: 0; margin-top: 1px;
  color: #2980b9;
}

/* Eyebrow: flush top-right corner tag, white-on-blue, for slide families.
   Written as "Section &gt; Subsection". */
.reveal .eyebrow {
  position: absolute;
  top: 0; right: 0;
  background: #2980b9;
  color: #fff;
  padding: 5px 14px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.5em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 0;
  border-bottom-left-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
}

/* --- Body-text size helpers -------------------------------------- */
/* The slide base is 0.66em of reveal's 42px, i.e. ~27.7px, which is too
   large for anything with two columns or a table. Use these instead of
   em fractions: em compounds unpredictably once blocks nest. */
.reveal .t26 { font-size: 26px; }
.reveal .t22 { font-size: 22px; }
.reveal .t20 { font-size: 20px; }
.reveal .t18 { font-size: 18px; }

/* --- Tables ------------------------------------------------------ */
.reveal table { font-size: 0.95em; border-collapse: collapse; margin: 0 auto; }
.reveal th, .reveal td { padding: 6px 10px; border-bottom: 1px solid #ecf0f1; text-align: left; vertical-align: top; }
.reveal th { background: #f8f9fa; font-weight: 600; color: #2c3e50; }

.tax-table { width:100%; border-collapse:collapse; font-size:0.95em; margin-top:8px; }
.tax-table th, .tax-table td { padding:8px 10px; border-bottom:1px solid #ecf0f1; text-align:left; vertical-align:top; }
.tax-table th { background:#f8f9fa; color:#2c3e50; font-weight:600; }
.tax-table td.type { font-weight:600; color:#2c3e50; white-space:nowrap; }
.tax-table tr.aleo td { color:#7f8c8d; font-style:italic; }
.quote { font-style:italic; color:#7f8c8d; font-size:0.95em; margin-top:6px; }

/* --- Figures and references -------------------------------------- */
.reveal img.fig { max-width: 100%; max-height: 420px; border-radius: 4px; }
.reveal .fig-cap { font-size: 0.8em; color: #7f8c8d; margin-top: 4px; }
/* Three distinct roles, kept distinct so that scraping .ref yields a clean
   bibliography:
     .ref    bibliographic citations, and nothing else
     .credit attribution for a figure, animation or borrowed layout
     .note   a methodological aside or caveat that is not a citation      */
.reveal .credit { font-size: 0.7em; color: #95a5a6; text-align: center; margin-top: 6px; }
.reveal .ref { font-size: 0.72em; color: #7f8c8d; margin-top: 6px; }
.reveal .note { font-size: 0.72em; color: #7f8c8d; margin-top: 6px; font-style: italic; }
.reveal .ref a, .reveal .credit a, .reveal .note a { color: #2980b9; }

/* --- TODO marker: visible reminder that a slide is unfinished ----- */
.reveal .todo {
  background: #fef9e7; border-left: 4px solid #f39c12;
  padding: 8px 12px; margin: 8px 0; border-radius: 6px;
  font-size: 0.9em; color: #a04000;
}
.reveal .todo::before {
  content: 'TODO';
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 0.8em; letter-spacing: 0.1em;
  color: #fff; background: #f39c12;
  border-radius: 3px; padding: 1px 6px; margin-right: 8px;
}

/* --- "Next step" walkthrough button ------------------------------ */
/* Used by demos that step the audience through a scripted sequence of
   parameter settings.  The caption next to the button says what the next
   click will show. */
.reveal .step-row {
  display: flex; align-items: center; gap: 12px;
  justify-content: center; margin-top: 8px; flex-wrap: wrap;
}
.reveal .step-btn {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.9em;
  color: #fff; background: #2980b9; border: none; border-radius: 7px;
  padding: 7px 15px; cursor: pointer; white-space: nowrap;
}
.reveal .step-btn:disabled { background: #bdc3c7; cursor: default; }
.reveal .step-btn.restart { background: #7f8c8d; }
.reveal .step-note {
  font-size: 0.92em; color: #34495e; text-align: left; max-width: 640px;
}
.reveal .step-note b { color: #2c3e50; }

/* --- The four-component neural-SBI pipeline ---------------------- */
/* Rebuilt in HTML (rather than the p_nnsbi_pipeline.png bitmap) so that the
   section dividers can highlight one box at a time. */
.pipe { display: flex; flex-direction: column; align-items: center; gap: 0; }
.pipe-box {
  border-radius: 10px; border: 2px solid; padding: 8px 16px;
  text-align: center; min-width: 320px; background: #fff;
  transition: box-shadow 0.2s ease, opacity 0.2s ease;
}
.pipe-box .pipe-name {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #2c3e50;
}
.pipe-box .pipe-sub { font-size: 0.82em; color: #7f8c8d; margin-top: 2px; }
.pipe-sim  { border-color: #27ae60; background: #eafaf1; }
.pipe-sum  { border-color: #e6a817; background: #fdf6e3; }
.pipe-head { border-color: #e74c3c; background: #fdedec; }
.pipe-loss { border-color: #7f8c8d; background: #f4f6f7; }
.pipe-arrow { color: #34495e; font-size: 1.25em; line-height: 1; margin: 3px 0; }
/* dimmed / highlighted states used on the section dividers */
.pipe.focus .pipe-box { opacity: 0.35; }
.pipe.focus .pipe-box.on {
  opacity: 1; box-shadow: 0 0 0 4px rgba(41,128,185,0.25);
}
.pipe-mark {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  color: #2980b9; font-size: 0.9em; white-space: nowrap;
}