/* ── Design tokens ─────────────────────────────────────────────────── */
:root {
  --navy:       #1b2a4a;
  --navy-mid:   #243560;
  --ivory:      #f4f0ea;
  --warm-gray:  --warm-gray:  #e8e2d9; /* Wait, let's use the exact original: #e8e2d9; */
  --warm-gray:  #e8e2d9;
  --teal:       oklch(0.52 0.10 210);
  --teal-lt:    oklch(0.75 0.08 210);
  --gold:       oklch(0.72 0.12 70);
  --text-dark:  #1b2a4a;
  --text-light: #f4f0ea;
  --text-mid:   #5a6a8a;
  --code-bg:    #0f1f3d;
  --code-txt:   #c8d8f8;

  --r-main-font-size:         38px;
  --r-main-color:             var(--text-dark);
  --r-heading-color:          var(--navy);
  --r-link-color:             var(--teal);
  --r-link-color-hover:       var(--teal-lt);
  --r-main-font:              "Helvetica Neue", Helvetica, Arial, sans-serif;
  --r-heading-font:           "Helvetica Neue", Helvetica, Arial, sans-serif;
  --r-code-font:              "SF Mono", "Fira Code", "Consolas", monospace;
  --r-heading-font-weight:    700;
  --r-heading-letter-spacing: -0.02em;
  --r-heading-line-height:    1.12;
  --r-heading-text-transform: none;
}

/* ── Base font size ───────────────────────────────────────────────── */
.reveal {
  font-size: var(--r-main-font-size);
}

/* ── Title slide alignment ─────────────────────────────────────────── */
.reveal .slides section.quarto-title-block,
.reveal .slides section#title-slide {
  text-align: left !important;
}

div#title-logos {
  position: absolute;
  right: -140px;
  top: 400px;
  margin: 0;
  padding: 0;
}

img#logo-center {
  position: relative;
  width: 300px !important;
  margin: 0;
  padding: 0;
  top: 0px;
  left: 0px;
}

img#logo-top-right {
  position: relative;
  width: 300px !important;
  margin: 0;
  padding: 0;
  top: -258px;
  left: -166px;
}

img#logo-bottom-right {
  position: relative;
  width: 300px !important;
  margin: 0;
  padding: 0;
  top: 260px;
  left: -166px;
}

.reveal .slides section.quarto-title-block .title {
  margin-left: 0 !important;
  text-align: left !important;
  font-size: 2.1em !important;
}

.reveal .slides section.quarto-title-block .subtitle {
  margin-left: 0 !important;
  text-align: left !important;
  font-size: 1.6em !important;
}

.reveal .slides section.quarto-title-block .quarto-title-authors,
.reveal .slides section.quarto-title-block .quarto-title-banner,
.reveal .slides section.quarto-title-block .date {
  margin-top: 5ex !important;
  margin-left: -1ex !important;
  text-align: left !important;
  font-size: 1.2em !important;
  justify-content: flex-start !important;
}


/* ── Full Background coloring (Viewport) ──────────────────────────── */
.reveal .backgrounds .slide-background:nth-child(odd) {
  background-color: var(--navy) !important;
}

.reveal .backgrounds .slide-background:nth-child(even) {
  background-color: var(--ivory) !important;
}

/* ── Slide content coloring ────────────────────────────────────────── */

/* Coloring is driven by the .fv-dark / .fv-light classes that the painter
   script (see assets/slide-contrast.html, included after body) assigns to
   every slide based on its ACTUAL rendered background color.

   We cannot use :nth-child() here: it breaks inside vertical stacks (created
   by level-1 '#' section headers), where the content sections and the
   generated background divs get out of sync. Reveal's own
   .has-dark-background / .has-light-background classes are also unreliable
   because they are derived from data-background-color, whereas our theme
   overrides the real background via .slide-background:nth-child() !important.
   The painter reads the computed background, so it is always correct. */
.reveal .slides section {
  color: var(--text-dark);
}

/* Dark (navy) background → light text */
.reveal .slides section.fv-dark,
.reveal .slides section.fv-dark :is(h1, h2, h3, h4, p, li, td, th, figcaption, dt, dd) {
  color: var(--text-light) !important;
}

.reveal .slides section.fv-dark a { color: var(--teal-lt) !important; }
.reveal .slides section.fv-dark ul li::marker { color: var(--gold); }
.reveal .slides section.fv-dark strong { color: var(--gold); }

/* Light (ivory) background → dark text */
.reveal .slides section.fv-light,
.reveal .slides section.fv-light :is(h1, h2, h3, h4, p, li, td, th, figcaption, dt, dd) {
  color: var(--text-dark) !important;
}

.reveal .slides section.fv-light a { color: var(--teal) !important; }

/* ── Footer and Logo coloring ─────────────────────────────────────── */

/* Default (Even slides: Ivory background) */
.reveal .footer {
  color: var(--text-dark);
}

.reveal .footer a {
  color: var(--teal);
}

/* Dark (navy) background slides */
.reveal:has(.slides section.present.fv-dark) .footer {
  color: var(--text-light) !important;
}

.reveal:has(.slides section.present.fv-dark) .footer a {
  color: var(--teal-lt) !important;
}

.reveal:has(.slides section.present.fv-dark) .slide-number {
  color: var(--text-light) !important;
}

/* Hide slide numbers on title slide */
.reveal:has(.slides section:first-child.present) .slide-number {
  display: none !important;
}


/* ── Top gradient bar (Title slide) ────────────────────────────────── */
.reveal .backgrounds .slide-background:first-child::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  background: linear-gradient(90deg, var(--teal) 0%, var(--gold) 100%);
  z-index: 1;
}

/* ── Headings ─────────────────────────────────────────────────────── */
.reveal h1 {
  font-size: 1.7em;
}
.reveal h2 {
  font-size: 1.4em;
}

.reveal h3 {
  padding-top: 0.5em;
}

.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  font-family: var(--r-heading-font);
  font-weight: var(--r-heading-font-weight);
  color: var(--navy);
  letter-spacing: var(--r-heading-letter-spacing);
  line-height: var(--r-heading-line-height);
  text-transform: var(--r-heading-text-transform);
}

/* ── Display math ($$ ... $$) — left-align instead of centered ─────── */
/* MathJax v2 wraps the rendered equation in a div.MathJax_Display with an
   inline `text-align: center`; !important overrides that. The other
   selectors cover MathJax v3 (mjx-container) and KaTeX, just in case. */
.reveal .slides section .math.display,
.reveal .slides section .math.display > div,
.reveal .slides section .MathJax_Display,
.reveal .slides section .MathJax_FullWidth,
.reveal .slides section mjx-container[display="true"],
.reveal .slides section .katex-display {
  text-align: left !important;
  margin-left: 0 !important;
}

/* Multi-line display equations get wrapped in .MathJax_FullWidth, a
   full-width table-cell that centres the equation array regardless of
   text-align. Collapse it to its content width so it left-aligns. */
.reveal .slides section .MathJax_FullWidth {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
}


/* ── Code blocks ─────────────────────────────────────────────────── */
.reveal div.sourceCode {
  background: var(--code-bg);
  border-radius: 12px !important;
  margin: 1em 0;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  flex-shrink: 0;
}

.reveal pre.sourceCode {
  background: transparent !important;
  margin: 0;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}


.reveal pre.sourceCode code {
  /* Opaque background (not transparent) so that the stacked <code> copies
     used by quarto's code line-highlight animation occlude each other:
     the current step's copy must fully cover the base copy beneath it,
     otherwise the base (all lines at full opacity) shows through and the
     dimming of non-highlighted lines is not visible. */
  background: var(--code-bg) !important;
  border-radius: 12px;
  color: var(--code-txt) !important;
  font-family: var(--r-code-font);
  font-size: 0.8em !important;
  line-height: 1.5;
  padding: 15px 25px;
  max-height: none !important;
}


/* ── Plain 'text' code blocks — mimic 'r' box, no highlighting ────── */
.reveal pre.text {
  background: var(--code-bg) !important;
  border-radius: 12px !important;
  margin: 1em 0;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  flex-shrink: 0;
}

.reveal pre.text code {
  background: transparent !important;
  color: var(--code-txt) !important;
  font-family: var(--r-code-font);
  font-size: 0.8em !important;
  line-height: 1.5;
  padding: 15px 25px;
  max-height: none !important;
}


/* ── Floating output pop-ups ──────────────────────────────────────────
   Output/result blocks wrapped in ::: {.output-popup .fragment} are lifted
   out of the normal flow (so they no longer overflow the slide) and shown
   as a card floating in the centre of the slide, on top of everything.
   Combined with .fragment, the card pops up on the next click. */
.reveal .slides section .output-popup {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  z-index: 50;
  width: max-content;
  max-width: 90%;
  margin: 0 !important;
  padding: 22px 26px;
  /* Card colour is clearly lifted from the slide background so the pop-up
     reads as a distinct floating panel, with a thin defined border. */
  background: #3a5591;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}

/* On light (ivory) slides, lift toward white instead. */
.reveal .slides section.fv-light .output-popup {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.28);
}

/* The code/text box sits flush inside the floating card. */
.reveal .slides section .output-popup > pre,
.reveal .slides section .output-popup > div.sourceCode,
.reveal .slides section .output-popup pre.text,
.reveal .slides section .output-popup pre.sourceCode {
  margin: 0 !important;
}


/* ── Syntax highlighting — matches Beyond Sequential.html palette ──── */
/* Pandoc token → HTML .class → color                                  */
.reveal code.sourceCode span    { color: var(--code-txt); }
.reveal code.sourceCode span.co { color: #5a7aa8; } /* comment  → .comment */
.reveal code.sourceCode span.fu { color: #7ec8f8; } /* function → .fn      */
.reveal code.sourceCode span.st { color: #f8a878; } /* string   → .str     */
.reveal code.sourceCode span.ot { color: #d0a8f8; } /* ←  assign→ .op     */
.reveal code.sourceCode span.op { color: #d0a8f8; } /* operator → .op      */
.reveal code.sourceCode span.sc { color: #d0a8f8; } /* |> :: %do%→.op     */
.reveal code.sourceCode span.cf { color: #d0a8f8; } /* if/for   → .op      */
.reveal code.sourceCode span.at { color: #f8c87e; } /* arg=     → .arg     */
.reveal code.sourceCode span.dv { color: #f8e87e; } /* integer  → .new     */
.reveal code.sourceCode span.fl { color: #f8e87e; } /* float    → .new     */
.reveal code.sourceCode span.cn { color: #f8e87e; } /* constant → .new     */

/* Links added inside code blocks by code-link/downlit (e.g. library, futurize)
   must NOT use the teal link color — that is too dark to read on the dark code
   background. Inherit the surrounding syntax-highlight color instead. The
   selector is scoped under .fv-dark/.fv-light so it out-specifies the generic
   `section.fv-* a { color: teal }` link rules above. */
.reveal .slides section.fv-dark pre.sourceCode code a,
.reveal .slides section.fv-light pre.sourceCode code a {
  color: inherit !important;
  text-decoration: none;
}

/* Inline code (`code` outside a <pre>) has no dark code box behind it, so its
   color must contrast with the SLIDE background. Quarto colors it via its
   own has-*-background classes, which are unreliable here (see note above),
   so drive it from our .fv-dark / .fv-light classes instead. */
.reveal .slides section.fv-dark :not(pre) > code {
  color: var(--code-txt) !important;   /* light — readable on navy */
}
.reveal .slides section.fv-light :not(pre) > code {
  color: #4758ab !important;           /* indigo — readable on ivory */
}
/* Keep code links inside inline code readable too */
.reveal .slides section.fv-dark :not(pre) > code a,
.reveal .slides section.fv-light :not(pre) > code a {
  color: inherit !important;
  text-decoration: none;
}


.reveal .slides section.fv-dark .highlight {
    color: var(--gold) !important;
}

.reveal .slides section.fv-light .highlight {
    color: var(--teal) !important;
}