/* prpl Foundation reveal.js theme. Source of truth: BRAND.md.
   Canvas 1920x1080 (set width/height in Reveal.initialize). */

:root {
  /* brand colours */
  --c-purple: #72166b;
  --c-yellow: #ffd166;
  --c-blue:   #5cbbf6;
  --c-ground: #f7f7f7;
  --c-ink:    #303030;
  --c-band:   #ededed;
  --c-muted:  #b3b3b3;
  --c-fail:   #c0392b;   /* only failure colour; not a brand colour */
  --c-white:  #f7f7f7;   /* text on purple (brand "white" is the ground colour) */

  /* derived tints */
  --c-purple-10: rgba(114, 22, 107, .10);
  --c-purple-20: rgba(114, 22, 107, .20);
  --c-yellow-40: rgba(255, 209, 102, .40);
  --c-blue-20:   rgba(92, 187, 246, .20);
  --c-fail-10:   rgba(192, 57, 43, .10);
  --c-fail-20:   rgba(192, 57, 43, .20);
  --c-ink-50:    rgba(48, 48, 48, .50);

  /* type */
  --font-sans: "Roboto", "Myriad Pro", "Gill Sans", "Gill Sans MT", sans-serif;
  --font-heading: "Poppins", "Roboto", "Myriad Pro", "Gill Sans", "Gill Sans MT", sans-serif;
  --font-mono: "Courier New", "Trebuchet MS", monospace;
  --fs-h1: 72px; --fs-h2: 56px; --fs-h3: 40px;
  --fs-body: 34px; --fs-small: 26px; --fs-code: 28px;

  /* shape */
  --radius: 10px;
  --shadow: 0 0 15px rgba(201, 201, 201, .25);
  --pad: 30px;
}

/* ---------- base ---------- */
html, body { background: var(--c-ground); }
.reveal-viewport { background: var(--c-ground); }
.reveal {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--c-ink);
}
.reveal ::selection { background: #24890d; color: #fff; }

.reveal .slides { text-align: left; }
.reveal .slides section,
.reveal .slides section.present {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 60px 80px;
  text-align: left;
}
/* purple slides: full-bleed via the section's own box, which fills the canvas */
.reveal .slides section.divider,
.reveal .slides section.title {
  background: var(--c-purple);
  color: var(--c-white);
  display: flex !important;
  flex-direction: column;
  justify-content: center;
}
.reveal .slides section.divider h1, .reveal .slides section.divider h2, .reveal .slides section.divider h3,
.reveal .slides section.title h1, .reveal .slides section.title h2, .reveal .slides section.title h3 { color: var(--c-white); }
.reveal .slides section.divider .kicker,
.reveal .slides section.title .kicker { color: var(--c-yellow); }
.reveal .slides section.divider a, .reveal .slides section.title a { color: var(--c-yellow); }
.reveal .slides section.divider .hl, .reveal .slides section.title .hl { color: var(--c-ink); }

/* reveal sets a default background colour via data-background; make the purple
   fill the whole viewport on wide/tall screens too */
.reveal.has-dark, .has-dark.reveal-viewport { background: var(--c-purple); }
.reveal-viewport:has(.reveal.has-dark) { background: var(--c-purple); }

/* ---------- headings ---------- */
.reveal h1, .reveal h2, .reveal h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--c-ink);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  margin: 0 0 var(--pad);
  text-align: left;
}
.reveal h1 { font-size: var(--fs-h1); line-height: 1.25; }
.reveal h2 { font-size: var(--fs-h2); line-height: 1.3; }
.reveal h3 { font-size: var(--fs-h3); line-height: 1.35; }
.reveal h1 .accent, .reveal h2 .accent, .reveal h3 .accent { color: var(--c-yellow); }

.reveal .kicker {
  display: block;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--c-purple);   /* blue fails contrast on ground; purple is safe */
  margin: 0 0 15px;
}
.reveal .kicker.blue { color: var(--c-blue); font-size: 32px; font-weight: 600; }

/* ---------- text ---------- */
.reveal p { margin: 0 0 var(--pad); }
.reveal strong, .reveal b, .reveal em { font-weight: 400; font-style: normal; }
.reveal a { color: var(--c-purple); font-family: var(--font-sans); font-weight: 400; text-decoration: none; }
.reveal a:hover, .reveal a:focus, .reveal a:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.reveal small, .reveal .small { font-size: var(--fs-small); line-height: 1.4; }
.reveal .caption { font-size: var(--fs-small); color: var(--c-ink-50); margin-top: 15px; }
.reveal ul, .reveal ol { display: block; margin: 0 0 var(--pad) 1.1em; text-align: left; }
.reveal li { margin: 0 0 12px; }
.reveal li::marker { color: var(--c-purple); }

.reveal code, .reveal pre {
  font-family: var(--font-mono);
  font-size: var(--fs-code);
  font-weight: 400;
}
.reveal code { background: var(--c-band); padding: 2px 8px; border-radius: 6px; }
.reveal pre {
  width: 100%;
  margin: 0 0 var(--pad);
  background: var(--c-band);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  line-height: 1.4;
}
.reveal pre code { background: none; padding: var(--pad); max-height: none; color: var(--c-ink); }

/* ---------- cards / utilities for diagrams ---------- */
.reveal .card {
  background: var(--c-ground);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--pad);
}
.reveal .lane-band { background: var(--c-band); border-radius: var(--radius); padding: var(--pad); }
.reveal .step { }   /* use with class="fragment step"; kept as a hook for diagram steps */
.reveal .fragment.step { transition: none; }
.reveal .fail { color: var(--c-fail); }
.reveal .ok   { color: var(--c-purple); }
.reveal .muted { color: #6a6a6a; }   /* 5.05:1 on ground; --c-muted stays for diagram marks */
.reveal .hl {
  background: linear-gradient(transparent 12%, var(--c-yellow) 12%, var(--c-yellow) 92%, transparent 92%);
  padding: 0 .2em;
  border-radius: 4px;
  color: var(--c-ink);
}
.reveal .fail-fill { background: var(--c-fail-10); }
.reveal .ok-fill   { background: var(--c-purple-10); }
.reveal .cols { display: flex; gap: var(--pad); }
.reveal .cols > * { flex: 1 1 0; min-width: 0; }

/* ---------- tables ---------- */
/* rules: --c-rule is 2.76:1 on ground, 2.53:1 on the zebra band */
:root { --c-rule: #969696; }
.reveal table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1.5px solid var(--c-rule);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 0 0 var(--pad);
  font-size: var(--fs-small);
  text-align: left;
}
.reveal table th, .reveal table td {
  text-align: left;
  padding: 16px 22px;
  border: none;
  border-left: 1px solid var(--c-rule);
  border-top: 1.5px solid var(--c-rule);
}
.reveal table tr > :first-child { border-left: none; }
.reveal table tr > :nth-child(2) { border-left-width: 1.5px; }   /* right rule of the label column */
.reveal table tr:first-child > * { border-top: none; }
.reveal table thead tr:last-child > * { border-bottom: 3px solid var(--c-purple); }
.reveal table thead + tbody tr:first-child > * { border-top: none; }
.reveal table th {
  color: var(--c-purple);
  font-family: var(--font-heading);
  font-weight: 600;
  background: none;
}
.reveal table tbody td:first-child { font-weight: 400; }
.reveal table tbody tr:nth-child(even) > * { background: var(--c-band); }
.reveal table tbody tr:nth-child(odd) > * { background: var(--c-ground); }

/* ---------- chrome: logo, counter, progress ---------- */
.prpl-logo {
  position: fixed;
  left: 2.6vw;
  bottom: 2.4vh;
  width: 8.33vw;            /* 160px on a 1920 viewport */
  height: auto;
  z-index: 30;
  pointer-events: none;
}
.prpl-logo.white { display: none; }
.reveal.has-dark .prpl-logo.purple { display: none; }
.reveal.has-dark .prpl-logo.white { display: block; }

.reveal .slide-number {
  right: 2.6vw;
  bottom: 2.4vh;
  background: none;
  color: var(--c-ink-50);
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: max(14px, 1.35vw);
}
.reveal.has-dark .slide-number { color: var(--c-white); }
.reveal .progress { height: 6px; color: var(--c-purple); background: var(--c-band); }
.reveal.has-dark .progress { color: var(--c-yellow); background: rgba(247, 247, 247, .2); }

/* ---------- print ---------- */
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html, body { background: var(--c-ground); }
  .prpl-logo { display: none; }   /* fixed overlay does not paginate; use per-slide logos if PDF is needed */
}

/* ---------- deck layouts (LCM-866) ---------- */
.reveal .slides section .cols { gap: 60px; align-items: flex-start; }
.reveal h1, .reveal h2 { text-wrap: balance; }
.reveal p, .reveal li, .reveal td { text-wrap: pretty; }
.reveal .card { background: var(--c-band); box-shadow: none; }
.reveal .kicker.nocase { text-transform: none; letter-spacing: 1px; }
.reveal .card .kicker { margin-bottom: 18px; }
.reveal .card p:last-child, .reveal .card ol:last-child { margin-bottom: 0; }
.reveal .small { font-size: var(--fs-small); }
.reveal .foot { margin-top: 24px; }
.reveal figure { margin: 0; }

/* title + dividers */
.reveal .slides section.title h1 { font-size: 96px; line-height: 1.15; max-width: 1500px; margin-bottom: 40px; }
.reveal .slides section.title .kicker,
.reveal .slides section.divider .kicker { font-size: 34px; margin-bottom: 30px; }
.reveal .slides section.title .sub { font-size: 44px; font-weight: 300; max-width: 1400px; margin: 0; }
.reveal .slides section.title .case { position: absolute; left: 80px; bottom: 150px; margin: 0; color: var(--c-white); }
.reveal .slides section.divider h1 { font-size: 180px; line-height: 1.05; margin: 0; }
.reveal .slides section.title, .reveal .slides section.divider { padding-left: 160px; }
.reveal .slides section.title .case { left: 160px; }

/* lane slides: same heading box everywhere so the lanes sit at the same pixel row */
.reveal .slides section.lanes-slide h2 { margin-bottom: 16px; height: 73px; white-space: nowrap; }
.reveal .slides section.lanes-slide .caption { margin-top: 10px; }

/* slide 2 */
.reveal .cols-case > .prose { flex: 1.15 1 0; }
.reveal .cols-case > .card  { flex: 1 1 0; }
.reveal ol.qs { margin: 0 0 0 1.3em; font-size: var(--fs-body); }
.reveal ol.qs li { margin-bottom: 18px; padding-left: 8px; }
.reveal ol.qs li::marker { font-family: var(--font-heading); font-weight: 600; }

/* strip card (slide 5): kicker sits in the lane label column */
.reveal .card.strip { display: grid; grid-template-columns: 236px 1fr 1fr 1fr; gap: 40px; padding: 22px 24px;
  margin-top: 14px; font-size: var(--fs-small); line-height: 1.3; background: var(--c-band); box-shadow: none; }
.reveal .card.strip p { margin: 0; }
.reveal .card.strip .kicker { margin: 4px 0 0; }

/* fact lists */
.reveal ul.facts { margin-left: 1em; }
.reveal ul.facts li { margin-bottom: 26px; padding-left: 6px; }
.reveal ul.facts.wide { max-width: 1500px; }
.reveal .cols-6 > .facts { flex: 1 1 0; }
.reveal .cols-6 > .viz { flex: 0 0 820px; padding-top: 10px; }
.reveal .cols-21 > .facts { flex: 2 1 0; }
.reveal .cols-21 > .viz { flex: 0 0 520px; padding-top: 20px; }

/* slide 7: lab table with time bars */
.reveal .setup { margin-bottom: 20px; }
.reveal table.lab { width: 100%; table-layout: fixed; }
.reveal table.lab th:first-child, .reveal table.lab td:first-child { width: 370px; }
.reveal table.lab td { vertical-align: middle; padding-top: 12px; padding-bottom: 12px; }   /* 12 px, not 16: keeps the caption clear of the logo */
.reveal table.lab thead tr.axis td { padding-top: 0; padding-bottom: 8px; border-top: none; }
.reveal table.lab thead tr:first-child th { padding-bottom: 6px; }
.reveal .tcell { display: flex; align-items: center; gap: 20px; }
.reveal .tcell > span { flex: 1 1 0; line-height: 1.3; }

/* slide 8 */
.reveal table.mini { width: 100%; margin: 0 0 24px; font-size: 30px; }

/* slide 9 cost lines: columns line up with the two panels */
.reveal .loopcost { display: grid; grid-template-columns: 730px 730px; gap: 40px; margin: 18px 0 0 260px; font-size: var(--fs-small); line-height: 1.3; }
.reveal .loopcost ul { margin: 0 0 0 1em; }
.reveal .loopcost li { margin-bottom: 6px; }

/* slide 10 */
.reveal .cols-set > table { flex: 0 0 1000px; margin: 0; font-size: 30px; }
.reveal .cols-set > .stack { flex: 1 1 0; display: flex; flex-direction: column; gap: 30px; font-size: 30px; }
.reveal .cols-set > .stack p { margin: 0; }

/* slide 12 */
.reveal .cols-funnel > .viz { flex: 0 0 1184px; }
.reveal .cols-funnel > .card { flex: 1 1 0; margin-top: 0; font-size: 30px; padding: 24px; }

/* slide 13 */
.reveal table.codes { width: 100%; font-size: 30px; }
.reveal table.codes td.new { color: var(--c-purple); font-weight: 400; }
.reveal table.codes th:nth-child(n+2), .reveal table.codes td:nth-child(n+2) { width: 200px; }

/* slide 14 */
.reveal table.fallbacks { width: 100%; font-size: 30px; }
.reveal table.fallbacks td { vertical-align: top; line-height: 1.35; }
.reveal table.fallbacks td:first-child { width: 330px; }
.reveal table.fallbacks td:last-child { width: 300px; }

/* slide 15 */
.reveal ol.decisions { list-style: none; margin: 0; padding: 0; counter-reset: dec; }
.reveal ol.decisions li { counter-increment: dec; position: relative; padding-left: 90px; margin: 0 0 44px; }
.reveal ol.decisions li::before { content: counter(dec); position: absolute; left: 0; top: -4px; width: 56px; height: 56px;
  border-radius: 50%; background: var(--c-purple); color: var(--c-white); font-family: var(--font-heading); font-weight: 600;
  font-size: 30px; line-height: 56px; text-align: center; }
.reveal ol.decisions .q { font-family: var(--font-heading); font-weight: 600; font-size: 36px; line-height: 1.35; margin: 0 0 6px; }
.reveal ol.decisions .p { font-weight: 400; margin: 0; font-size: 30px; }
.reveal ol.decisions .p b { color: var(--c-purple); }

/* slide 17 */
.reveal .links3 { gap: 50px; }
.reveal .links3 > div { flex: 1 1 0; }
.reveal ul.linklist { list-style: none; margin: 0; padding: 0; font-size: 27px; line-height: 1.3; }
.reveal ul.linklist li { margin: 0 0 18px; }
.reveal .links p { margin-bottom: 18px; }
.reveal .links code { background: none; padding: 0; font-size: inherit; color: inherit; }
.reveal .settings-note { margin: 30px 0 0; color: var(--c-ink); font-size: var(--fs-body); }
.reveal .card .fine { margin-top: 20px; line-height: 1.35; }
.reveal .nw { white-space: nowrap; }