/* CAI Slide Template (HTML) — styled after the metropolis/beamer CAI template.
   The canvas is fixed at 1600×900 (16:9) and scaled to fit any window. */

:root {
  --pui-blue: #004191;
  --pui-lightblue: #657C9D;
  --cai-lightblue: #2BA0B0;
  --pui-gray: #F1F0EC;
  --progress-track: #B9CACD;      /* CAIlightblue!50!black!30 */
  --text: #23373B;                /* metropolis mDarkTeal */
  --muted: #8A9396;
  --shaded: #D3D8D9;              /* inactive ToC entries */
  --alert: #EB811B;               /* metropolis alerted text */
  --block-title-bg: #CDD2D3;
  --block-body-bg: #E6E9E9;
  --letterbox: #000;

  --W: 1600px;
  --H: 900px;
  --margin-x: 100px;              /* beamer text margin ≈ 1cm */
  --fs: 38px;                     /* \normalsize at this scale */
  --header-h: 96px;
  --bar-h: 7px;

  --font: "Fira Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Fira Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--letterbox); }
body {
  background: var(--letterbox);
  overflow: hidden;
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Stage & scaling ---------- */
.deck {
  position: absolute;
  left: 50%; top: 50%;
  width: var(--W); height: var(--H);
  transform: translate(-50%, -50%) scale(var(--scale, 1));
  transform-origin: center center;
}
.slide {
  position: absolute; inset: 0;
  width: var(--W); height: var(--H);
  background: #fff;
  color: var(--text);
  font-size: var(--fs);
  line-height: 1.35;
  overflow: hidden;
  display: none;
  flex-direction: column;
}
.slide.active { display: flex; }

/* ---------- Frame title bar ---------- */
.frametitle {
  flex: none;
  height: var(--header-h);
  background: var(--pui-blue);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 34px 0 38px;
  font-size: 35px; font-weight: 500;
}
.frametitle h2 { margin: 0; font: inherit; }
.frametitle img { height: 62px; margin-top: 18px; }
.progress {
  flex: none;
  height: var(--bar-h);
  background: var(--progress-track);
}
.progress > i { display: block; height: 100%; background: var(--cai-lightblue); }
.slide.appendix .progress,
.slide.section-page.appendix .bar > i { display: none; }

/* ---------- Body ---------- */
.content {
  flex: 1;
  min-height: 0;
  /* bottom padding reserves the footer (bottom 18px + 30px tall) so centred
     content sits in the middle of the area between title bar and footer */
  padding: 30px var(--margin-x) 78px;
  display: flex; flex-direction: column; justify-content: center;
}
.content.top { justify-content: flex-start; padding-top: 50px; }
.content > :first-child { margin-top: 0; }
.content > :last-child { margin-bottom: 0; }
p { margin: 0 0 0.5em; }
h3 { font-size: 1em; font-weight: 600; margin: 0 0 0.4em; }
strong, b { font-weight: 600; }
.alert { color: var(--alert); }
.small { font-size: 0.8em; }
.tiny  { font-size: 0.6em; }
.center { text-align: center; }
.muted { color: var(--muted); }

a { color: inherit; text-decoration: none; }
a.ext::after {           /* mimics \href{...} with \faExternalLink */
  content: "";
  display: inline-block;
  width: 0.55em; height: 0.55em; margin-left: 0.3em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 1h6v6h-2V4.4L7.7 9.7 6.3 8.3 11.6 3H9zM2 3h5v2H4v7h7V9h2v5H2z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9 1h6v6h-2V4.4L7.7 9.7 6.3 8.3 11.6 3H9zM2 3h5v2H4v7h7V9h2v5H2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Lists: metropolis bullets, 2ex / 1ex item separation */
ul, ol { margin: 0 0 0.5em; padding-left: 1.1em; }
li { margin: 0.55em 0; }
li > ul, li > ol { margin: 0.3em 0 0; font-size: 0.9em; }
li li { margin: 0.25em 0; }
ul { list-style: none; }
ul > li { position: relative; }
ul > li::before {
  content: ""; position: absolute;
  left: -0.85em; top: 0.55em;
  width: 0.28em; height: 0.28em; border-radius: 50%;
  background: currentColor;
}
ul ul > li::before { width: 0.4em; height: 2px; border-radius: 0; top: 0.65em; }
ol { padding-left: 1.4em; }
ol > li::marker { font-weight: 400; }

/* \circled{n} numbered list */
ol.circled { list-style: none; counter-reset: c; padding-left: 1.6em; }
ol.circled > li { counter-increment: c; position: relative; }
ol.circled > li::before {
  content: counter(c);
  position: absolute; left: -1.6em; top: 0.12em;
  width: 1.15em; height: 1.15em;
  border: 2px solid currentColor; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.85em; line-height: 1;
}
.circled-num {
  display: inline-grid; place-items: center;
  width: 1.15em; height: 1.15em;
  border: 2px solid currentColor; border-radius: 50%;
  font-size: 0.85em; line-height: 1; vertical-align: 0.05em;
}

/* Columns (onlytextwidth by default) */
.columns { display: flex; gap: 50px; align-items: flex-start; }
.columns.c { align-items: center; }
.columns > .col { flex: 1 1 0; min-width: 0; }

/* Blocks (block=fill) */
.block { margin: 0.3em 0 0.6em; }
.block > .block-title {
  background: var(--block-title-bg);
  font-weight: 600;
  padding: 0.12em 0.4em;
}
.block > .block-body {
  background: var(--block-body-bg);
  padding: 0.2em 0.4em 0.3em;
}
.block.example > .block-title { background: var(--pui-blue); color: #fff; }
.block.example > .block-body  { background: var(--pui-lightblue); color: #fff; }
.block.alert > .block-title   { background: var(--alert); color: #fff; }
.block.alert > .block-body    { background: #FBE5D0; color: var(--text); }

/* Figures — caption style "Source: ..." */
figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
figure img, figure svg { max-width: 100%; max-height: 560px; object-fit: contain; }
figcaption {
  align-self: flex-start;
  margin-top: 6px;
  font-size: 18px; color: var(--muted);
}
figcaption::before { content: "Source: "; }
figcaption.plain::before { content: none; }
.placeholder {
  width: 100%; height: 420px;
  background: var(--pui-gray);
  border: 2px dashed var(--shaded);
  display: grid; place-items: center;
  color: var(--muted); font-size: 0.7em;
}

/* Tables (booktabs) */
table { border-collapse: collapse; font-size: 0.8em; margin: 0 auto; }
th, td { padding: 0.2em 0.8em; text-align: left; }
thead th { font-weight: 600; border-bottom: 1.5px solid var(--text); }
table { border-top: 3px solid var(--text); border-bottom: 3px solid var(--text); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.hl td { background: var(--pui-gray); }

/* Code */
code { font-family: var(--mono); font-size: 0.88em; }
pre {
  font-family: var(--mono); font-size: 26px; line-height: 1.4;
  background: var(--pui-gray);
  padding: 0.6em 0.8em; margin: 0 0 0.5em;
  border-left: 6px solid var(--cai-lightblue);
  overflow: hidden;
}
pre code { font-size: 1em; }

/* Citations / references */
cite { font-style: normal; color: var(--pui-lightblue); }
.references { font-size: 22px; line-height: 1.35; }
.references p { margin: 0 0 0.7em; padding-left: 1.5em; text-indent: -1.5em; }

/* ---------- Free-positioned elements (from the editor) ---------- */
.content.free { padding: 0; }
.el { position: absolute; }
.el-text { display: flex; flex-direction: column; line-height: 1.35; }
.el-text.va-middle { justify-content: center; }
.el-text.va-bottom { justify-content: flex-end; }
.el-inner > :first-child { margin-top: 0; }
.el-inner > :last-child { margin-bottom: 0; }
.el-text.v-box     { background: var(--block-body-bg); padding: 0.3em 0.5em; }
.el-text.v-example { background: var(--pui-lightblue); color: #fff; padding: 0.3em 0.5em; }
.el-text.v-alert   { background: #FBE5D0; border-left: 8px solid var(--alert); padding: 0.3em 0.5em; }
.el-text.v-caption { color: var(--muted); }
.el-text.has-bg    { padding: 0.3em 0.5em; }     /* custom background colour */
.el-image img, .el-video video { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---------- Footer ---------- */
.footline {
  position: absolute; left: 0; right: 0; bottom: 18px;
  height: 30px;
  font-size: 26px; color: var(--text);
  display: flex; justify-content: center; align-items: center;
  pointer-events: none;
}
.footline .pageno { position: absolute; right: 36px; }
.slide.appendix .footline,
.slide.title-slide .footline,
.slide.standout .footline,
.slide.section-page .footline { display: none; }

/* ---------- Title slide ---------- */
.slide.title-slide {
  padding: 0 var(--margin-x);
  justify-content: flex-end;
  padding-bottom: 110px;
}
.title-slide .title-graphic {
  position: absolute; top: 46px;
  left: var(--margin-x); right: var(--margin-x);
  display: flex; justify-content: flex-end; align-items: center; gap: 40px;
}
.title-slide .title-graphic img { height: 72px; }
.title-slide h1 {
  font-size: 52px; font-weight: 500; margin: 0 0 22px; line-height: 1.15;
}
.title-slide .subtitle { font-size: 38px; margin: 0; font-weight: 300; }
.title-slide .separator {
  width: 100%; height: 2px; background: var(--cai-lightblue);
  margin: 58px 0 66px;
}
.title-slide .author { font-size: 30px; margin: 0 0 18px; }
.title-slide .date   { font-size: 30px; margin: 0 0 22px; }
.title-slide .institute { font-size: 25px; line-height: 1.75; margin: 0; }

/* ---------- Section page / outline ---------- */
.slide.section-page { justify-content: center; align-items: center; }
.section-page .box { width: 860px; }
.section-page h2 { font-size: 46px; font-weight: 500; margin: 0 0 20px; }
.section-page .bar { height: 2px; background: var(--progress-track); }
.section-page .bar > i { display: block; height: 100%; background: var(--cai-lightblue); }
.section-page h3 { font-size: 38px; font-weight: 500; margin: 28px 0 0; }

.toc { list-style: none; padding: 0; margin: 0; }
.toc li::before { content: none; }
.toc > li { font-weight: 600; margin: 0 0 1.85em; }
.toc > li:last-child { margin-bottom: 0; }
.toc > li > ul { font-weight: 400; font-size: 1em; padding-left: 1.2em; margin-top: 0.6em; }
.toc > li > ul > li { margin: 0.55em 0; }
.toc > li.shaded, .toc > li.shaded * { color: var(--shaded); }

/* ---------- Standout ---------- */
.slide.standout {
  background: var(--cai-lightblue); color: #fff;
  justify-content: center; align-items: center; text-align: center;
  font-size: 46px; font-weight: 500; line-height: 1.8;
}

/* ---------- Fragments (\pause) ---------- */
.fragment { visibility: hidden; }
.fragment.visible { visibility: visible; }

/* ---------- Overview mode (press O) ---------- */
body.overview { overflow: auto; background: #222; }
body.overview .deck {
  position: static; transform: none;
  width: auto; height: auto;
  display: grid; grid-template-columns: repeat(auto-fill, 320px);
  gap: 24px; padding: 24px; justify-content: center;
}
body.overview .slide {
  position: relative; display: flex;
  zoom: 0.2;
  cursor: pointer;
  outline: 0 solid var(--cai-lightblue);
}
body.overview .slide.active { outline-width: 20px; }
body.overview .fragment { visibility: visible; }

/* ---------- Print / PDF (Ctrl/Cmd+P) ---------- */
@page { size: 1600px 900px; margin: 0; }
@media print {
  html, body { height: auto; overflow: visible; background: #fff; }
  .deck { position: static; transform: none; width: var(--W); height: auto; }
  .slide {
    position: relative; display: flex !important;
    break-after: page; page-break-after: always;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .fragment { visibility: visible; }
  .hud { display: none !important; }
}

/* ---------- HUD (slide counter, only on hover) ---------- */
.hud {
  position: fixed; left: 12px; bottom: 10px;
  font: 13px var(--font); color: #aaa;
  opacity: 0; transition: opacity .3s;
  user-select: none;
}
body:hover .hud { opacity: .8; }
body.overview .hud { display: none; }