/* Nord Cool — Research Governance
   Accent: Frost Blue (#5e81ac) + Teal (#8fbcbb)
   Background: Snow Storm (#eceff4)
   Text: Polar Night (#2e3440 headings, #3b4252 body)
   All body text meets WCAG AA (>=4.5:1 on #eceff4)            */

:root {
  --r-heading1-size: 2em;
  --r-heading2-size: 1.5em;
  --r-heading3-size: 1em;
  --r-main-font-size: 42px;
  --r-background-color: #eceff4;
  --r-heading-color: #2e3440;
  --r-main-color: #3b4252;        /* 9.2:1 on #eceff4 — AAA */
  --r-link-color: #4a6d94;        /* darkened frost — 5.1:1 AA */
  --r-link-color-hover: #5e81ac;
  --r-heading-text-transform: none;
  --r-box-shadow: none;
  --nord-accent: #5e81ac;
  --nord-accent-light: #81a1c1;
  --nord-highlight: #88c0d0;
  /* ---- section colours ----
     One set of tokens for the 3x3 grid cells and the progress bar, so a
     chapter's box and its band in the bar are the same colour.
       A  opening / framing         muted slate, light
       B  the other chapters        muted slate, deeper — sibling of A
       C  Quality Performance Ind.  Nord Frost blue
       D  Critical Illness          green-teal: the old Frost teal pulled
                                    ~16 deg greener and lifted in value, so
                                    C and D can't be confused at a glance
     *-text variants are darkened for legibility on #eceff4. */
  --sec-a: #b0b6c0;
  --sec-b: #8b919e;
  --sec-c: #5e81ac;
  --sec-d: #7fbdac;
  --sec-b-text: #5d6472;
  --sec-c-text: #4a6d94;
  --sec-d-text: #42806e;
}

/* ---- progress bar ----
   Hard-stop gradient, one band per section, using the same --sec-*
   tokens as the 3x3 grid cells. Breakpoints are slideIndex /
   (totalSlides - 1), i.e. (n - 1)/45 for slide n of 46 — pandoc's
   generated title slide is n = 1, and vertical slides each count.
     A  slides  1-10  opening             0     ->  9/45 = 20.00%
     B  slides 11-21  other chapters     20.00% -> 20/45 = 44.44%
     C  slides 22-29  QPI                44.44% -> 28/45 = 62.22%
     B  slides 30-31  SACT & survival    62.22% -> 30/45 = 66.67%
     D  slides 32-45  Critical Illness   66.67% -> 44/45 = 97.78%
     B  slide  46     Conclusions        97.78% -> 100%
   Recalculate if slides are added or removed — the slide-number readout
   at bottom right gives both n and the total. Overlay span = Snow Storm
   white, "consuming" the bands as the talk progresses. */
.reveal .progress {
  height: 15px;
  background-color: #d8dee9;
  background-image: linear-gradient(to right,
    var(--sec-a) 0%,      var(--sec-a) 20.00%,   /* A  opening          */
    var(--sec-b) 20.00%,  var(--sec-b) 50%,   /* B  other chapters   */
    var(--sec-c) 50%,  var(--sec-c) 66%,   /* C  QPI              */
    var(--sec-b) 66%,  var(--sec-b) 70%,   /* B  SACT & survival  */
    var(--sec-d) 70%,  var(--sec-d) 98%,   /* D  Critical Illness */
    var(--sec-b) 98%,  var(--sec-b) 100%);    /* B  Conclusions      */
}
.reveal .progress span {
  background-color: #eceff4;            /* Nord Snow Storm 3 */
}

/* ---- code blocks ---- */
.reveal pre {
  box-shadow: none;
}

/* ---- emoji display ---- */
.reveal .emoji-display {
  position: absolute;
  right: 30px;
  bottom: 8px;
  font-size: 48px;
  color: var(--nord-accent);
  pointer-events: none;
  z-index: 31;
}

/* ---- footnotes ----
   With reveal.js `center: true`, a <section>'s height is its content
   height, so `bottom: 25px` on an absolutely-positioned footnote lands
   at the bottom of the *content*, not the slide — which puts it mid-
   screen on near-empty slides. Forcing sections that contain a
   footnote to fill the slide canvas (and re-centring in-flow content
   via flex) makes `bottom: 25px` resolve to the true slide bottom in
   the default viewer. Print-pdf keeps working via the YAML script. */
.reveal .slides > section:has(> .footnote),
.reveal .slides > section > section:has(> .footnote) {
  height: 100% !important;
  top: 0 !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}

.reveal .footnote {
  position: absolute;
  left: 30px;
  bottom: 5px;
  font-size: 0.4em;
  color: var(--nord-accent);
  font-style: italic;
  z-index: 200;
  white-space: nowrap;
  max-width: calc(100% - 60px);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- layout helpers ---- */
.left-title {
  position: absolute;
  left: 0;
  width: 45%;
  text-align: left;
  margin-left: 20px;
}

/* ---- highlight / mark ---- */
mark {
  background-color: var(--nord-highlight);
  color: #2e3440;
}

/* ---- lists ---- */
.reveal ul, .reveal ol {
  color: var(--r-main-color);
}

/* ---- blockquotes ---- */
.reveal blockquote {
  border-left: 4px solid var(--nord-accent-light);
  background: rgba(94, 129, 172, 0.06);
  padding: 0.5em 1em;
  font-style: italic;
}

/* ---- strong emphasis ---- */
.reveal strong {
  color: var(--nord-accent);
}

/* ---- 3x3 grid slide ----
   Usage in markdown:
     # Heading
     ::::::::: {.grid-3x3}
     ::: cell
     Words
     [1,234]{.num}
     :::
     ... x9
     :::::::::
   Same full-height trick as footnotes: reveal's `center: true` makes a
   section only as tall as its content, so the grid can't stretch. Force
   the section to fill the canvas, then let the grid take the leftover
   space under the heading. */
.reveal .slides > section:has(> .grid-3x3),
.reveal .slides > section > section:has(> .grid-3x3) {
  height: 100% !important;
  top: 0 !important;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
}

.reveal .grid-3x3 {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 14px;
  padding-bottom: 25px;        /* clear the progress bar */
  box-sizing: border-box;
}

.reveal .grid-3x3 > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.2em 0.3em;
  border: 2px solid #c3c8d1;          /* neutral: no section meaning */
  border-radius: 10px;
  background: rgba(139, 145, 158, 0.07);
  font-size: 0.62em;
  line-height: 1.15;
  overflow: hidden;
}

.reveal .grid-3x3 > div > * {
  margin: 0.1em 0;
}

/* the number within a cell */
.reveal .grid-3x3 .num {
  color: var(--sec-b-text);
  font-weight: 700;
  font-size: 1.5em;
  line-height: 1.1;
}

/* ---- section colours on cells ----
   Same four tokens as the progress bar, so a chapter's box and its band
   in the bar read as the same thing.
     (plain) / .muted  ->  B, the chapters not covered today
     .accent           ->  C, Quality Performance Indicators
     .alt              ->  D, Critical Illness                        */
.reveal .grid-3x3 > div.muted {
  border-style: dashed;
  border-color: var(--sec-b);
  background: rgba(139, 145, 158, 0.10);
}

.reveal .grid-3x3 > div.accent {
  border-color: var(--sec-c);
  background: rgba(94, 129, 172, 0.18);
}
.reveal .grid-3x3 > div.accent .num {
  color: var(--sec-c-text);
}

.reveal .grid-3x3 > div.alt {
  border-color: var(--sec-d);
  background: rgba(127, 189, 172, 0.20);
}
.reveal .grid-3x3 > div.alt .num {
  color: var(--sec-d-text);
}

/* ---- stacked images ----
   Usage in markdown:
     # Heading
     :::: {.stack}
     ![](resources/01_datasets.png)

     ![](resources/02_cohort.png)
     ::::
   One column, one row per image, equal share of the leftover slide
   height. Each row is a flex box and the image carries only *max*
   constraints, so the browser scales it down proportionally — original
   aspect ratio kept, no cropping. Works for 2, 3 or more images.
   Same full-height trick as the grid: reveal's `center: true` sizes a
   section to its content, so without this the rows have nothing to
   divide up. */
.reveal .slides > section:has(> .stack),
.reveal .slides > section > section:has(> .stack) {
  height: 100% !important;
  top: 0 !important;
  display: flex !important;
  flex-direction: column;
  justify-content: flex-start;
}

.reveal .stack {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 25px;        /* clear the progress bar */
  box-sizing: border-box;
}

/* each pandoc <p> / <figure> wrapper is one row */
.reveal .stack > p,
.reveal .stack > figure {
  flex: 1 1 0;
  min-height: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.reveal .stack img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: 0;
  border: none;
  box-shadow: none;
  background: none;
}

.reveal .stack figcaption {
  font-size: 0.4em;
  color: var(--nord-accent);
  font-style: italic;
  margin-top: 0.2em;
}

/* ---- slide number ----
   Turned on in twentymins.yaml (`slideNumber: "'c/t'"`), a reveal config
   option rather than CSS. This only restyles it: reveal's default is a
   white-on-dark pill sitting at bottom: 8px, which collides with the
   15px progress bar. */
.reveal .slide-number {
  right: 14px;
  bottom: 22px;
  padding: 0;
  background-color: transparent;
  color: var(--nord-accent);
  font-size: 16px;
  font-weight: 600;
}
.reveal .slide-number a {
  color: inherit;
}