/** Video insert **/

.video--wrapper.video--vimeo--wrapper {}

.video--thumbnail.video--vimeo--thumbnail {}

.video.video--vimeo {
   display: none;
}


:root {
  --font-size: 14px;
  --line-height: 19px;
  --font-size--header: 31px;
  --line-height--header: calc(2 * var(--line-height));
  --body-font: "Fluxisch Else";
  --header-font: "Fluxisch Else";
  --link-color: black;
  --link-color--visited: black;
}
 
body, html {
  font-size: var(--font-size);
  line-height: var(--line-height);  
  font-family: var(--body-font);
}

/** Set page properties size and white space */
@page {
    size: A4 portrait;
    margin: 57px 57px 76px 57px;
}

@page :left {
  @bottom-left {
    content: counter(page);
  }
}

@page :right {
  @bottom-right {
    content: counter(page);
  }
}

@page cover {
  @bottom-right {
    content: "";
  }
}

.front-matter--title,
.front-matter--introduction,
.toc,
.report,
.chapter,
.index {
  page-break-before: right;
}

h1, h2, h3, h4, h5, h5 {
  break-after: avoid;
  break-inside: avoid;
}

h1 {
 font-family: var(--header-font);
 font-size: var(--font-size--header);
 line-height: var(--line-height--header);
 margin: 0 0 calc(5 * var(--line-height)) 0;
}

h2, h3 {
 font-family: var(--header-font);
 font-size: var(--font-size);
 line-height: var(--line-height);
 margin: calc(2 * var(--line-height)) 0 0 0;
 max-width: 80%;
 break-inside: avoid;
 break-after: avoid;
}

img {
  float: left;
  max-width: 40%;
  margin: calc(.5 * var(--line-height)) var(--line-height) calc(.5 * var(--line-height)) 0;
  break-inside: avoid;
}

p {
  margin: 0 0 var(--line-height) 0;
}

a {
  color: var(--link-color);
}

pre {
    line-wrap: pre-wrap;
}

a:visited {
  color: var(--link-color--visited);
}

.pagedjs_right_page img {
  float: right;
  margin-left: var(--line-height);
  margin-right: 0;
}

a[data-reference][data-label] {
  color: inherit;
    text-decoration: none;
}

a[data-reference][data-label] .reference--label--inline {
  text-decoration: underline;
  text-decoration-style: dotted;
}


.pagedjs_left_page .report, 
.pagedjs_left_page .front-matter,
.pagedjs_left_page .chapter,
.pagedjs_right_page .indexes {
    padding-right: 47.5mm;
}

.pagedjs_left_page .reference--target {
    float: right;
    clear: right;
    width: 40mm;
    margin-right: -45mm;
    text-align: right;
}

.pagedjs_right_page .report,
.pagedjs_right_page .front-matter,
.pagedjs_right_page .chapter,
.pagedjs_right_page .indexes {
    padding-left: 47.5mm;
}

.pagedjs_right_page .reference--target {
    float: left;
    clear: left;
    width: 40mm;
    margin-left: -45mm;
}

.indexes {
  break-before: right;
}

.index-entry::after {
  content: target-counter(attr(data-link-id), page) ", ";
}


.index-entry:last-child::after {
  content: target-counter(attr(data-link-id), page);
}

.front-matter--title {
  break-after: right;
  page: cover;
  margin-left: -47.5mm;
}

.front-matter--title h1 {
    font-size: 450%;
    line-height: 1.15;
}

.front-matter--introduction {
  break-after: right;
}

/*
  Hide embedded youtube video's
*/
iframe[title="YouTube video player"],
iframe[src^="https://www.youtube.com/"] {
    display: none;
}

.toc ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.toc ul a {
  color: inherit;
  text-decoration: none;
}

.toc ul a::after {
  content: target-counter(attr(href), page);
  float: right;
}

.index ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
* =========================================
   WORKSHOP HANDOUT ADDITIONS (PRINT)
   ========================================= */
:root {
  --workshop-accent: #000000; 
  --workshop-box-bg: #009444;
  --workshop-box-color: #eaeaea;
  
}

/* =========================================
   MANUAL PAGE BREAK TRIGGER
   Trigger: [anything](#pagebreak)
   ========================================= */

/* 1. Hide the trigger paragraph */
p:has(a[href="#pagebreak"]) {
  display: none;
}

/* 2. Force the VERY NEXT element to start on a fresh page */
p:has(a[href="#pagebreak"]) + * {
  break-before: page;
}

blockquote {
  position: relative;
  background-color: transparent; /* Background is handled by the blurred layer */
  border-left: none; /* Cleaned up since sharp borders conflict with a blur */
  padding: calc(1.5 * var(--line-height)) 3ch;
  margin: calc(2 * var(--line-height)) 0;
  font-style: normal;
  
  /* PRINT FIX 1: Creates a hard container so the z-index:-1 doesn't fall behind the page */
  isolation: isolate; 
  z-index: 1; /* Keeps your text crisp and on top */
  break-inside: avoid; /* Prevents the box from splitting across two pages */
}

/* Creates the blurred blob background */
blockquote::before {
  content: '';
  position: absolute;
  inset: -10px; /* Expands the background outward so the blur fades smoothly */
  background-color: var(--workshop-box-bg);
  filter: blur(16px); /* Adjust this value to make it more or less blurry */
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; /* Rounds the edges into a soft shape */
  z-index: -1;
  
  /* PRINT FIX 2: Forces the PDF renderer to print the background color */
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
  
  /* PRINT FIX 3: Forces the PDF engine to correctly calculate the blur filter */
  transform: translateZ(0); 
}

blockquote p:last-child {
  margin-bottom: 0;
}


/* =========================================
   2. METADATA BLOCK
   ========================================= */
p:has(a[href="#meta"]) { display: none; }
p:has(a[href="#meta"]) + p {
  font-family: var(--header-font);
  font-size: calc(var(--font-size) * 1);
  padding-bottom: var(--line-height);
  margin-bottom: calc(2 * var(--line-height));
  grid-column-end: span 2; 
  break-inside: avoid;
}


/* =========================================
   3. THREE-COLUMN TABLE
   ========================================= */
p:has(a[href="#table3"]) { display: none; }
p:has(a[href="#table3"]) + ul {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  list-style: none;
  padding: 0;
  margin: 0 0 calc(2 * var(--line-height)) 0;
  border: 1px solid #DDDDDD;
  grid-column-end: span 2;
  break-inside: avoid; /* Keeps table together */
}
p:has(a[href="#table3"]) + ul li {
  padding: 10px 15px;
  border-bottom: 1px solid #DDDDDD;
  border-right: 1px solid #DDDDDD;
  margin: 0;
}
p:has(a[href="#table3"]) + ul li:nth-child(3n) { border-right: none; }
p:has(a[href="#table3"]) + ul li:nth-child(-n+3) {
  font-weight: bold;
}


/* =========================================
   4. PROCESS FLOWCHART
   ========================================= */
p:has(a[href="#flow"]) { display: none; }
p:has(a[href="#flow"]) + ol {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  list-style-type: none;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: calc(2 * var(--line-height));
  grid-column-end: span 2;
  break-inside: avoid;
}
p:has(a[href="#flow"]) + ol li {
  padding: 10px 20px;
  border-radius: 4px;
  font-weight: bold;
  position: relative;
}
p:has(a[href="#flow"]) + ol li:not(:last-child)::after {
  content: "➔";
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2em;
}

/* =========================================
   5. CIRCULAR PROCESS FLOWCHART
   ========================================= */
p:has(a[href^="#circle-flow"]) { display: none; }
p:has(a[href^="#circle-flow"]) + ol {
  /* Scaled these slightly so the 360-degree chart doesn't clip off A4 edges */
  --radius: 170px;      
  --item-size: 120px;   
  --item-radius: calc(var(--item-size) / 2);
  --gap: 16px;         
  
  --arrow-fwd: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M0 12H24 M18 6l6 6-6 6"/></svg>');
  --arrow-back: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M24 12H0 M6 6l-6 6 6 6"/></svg>');
  
  position: relative;
  width: calc(var(--radius) * 2 + var(--item-size));
  height: calc(var(--radius) * 2 + var(--item-size));
  list-style-type: none;
  padding: 0;
  margin: 3rem auto;
  break-inside: avoid;
}

p:has(a[href^="#circle-flow"]) + ol:has(li:last-child:nth-child(3)) { --total: 3; --chord-factor: 1.732; }
p:has(a[href^="#circle-flow"]) + ol:has(li:last-child:nth-child(4)) { --total: 4; --chord-factor: 1.414; }
p:has(a[href^="#circle-flow"]) + ol:has(li:last-child:nth-child(5)) { --total: 5; --chord-factor: 1.176; }
p:has(a[href^="#circle-flow"]) + ol:has(li:last-child:nth-child(6)) { --total: 6; --chord-factor: 1.000; }
p:has(a[href^="#circle-flow"]) + ol:has(li:last-child:nth-child(7)) { --total: 7; --chord-factor: 0.868; }
p:has(a[href^="#circle-flow"]) + ol:has(li:last-child:nth-child(8)) { --total: 8; --chord-factor: 0.765; }

p:has(a[href^="#circle-flow"]) + ol li:nth-child(1) { --index: 0; }
p:has(a[href^="#circle-flow"]) + ol li:nth-child(2) { --index: 1; }
p:has(a[href^="#circle-flow"]) + ol li:nth-child(3) { --index: 2; }
p:has(a[href^="#circle-flow"]) + ol li:nth-child(4) { --index: 3; }
p:has(a[href^="#circle-flow"]) + ol li:nth-child(5) { --index: 4; }
p:has(a[href^="#circle-flow"]) + ol li:nth-child(6) { --index: 5; }
p:has(a[href^="#circle-flow"]) + ol li:nth-child(7) { --index: 6; }
p:has(a[href^="#circle-flow"]) + ol li:nth-child(8) { --index: 7; }

p:has(a[href^="#circle-flow"]) + ol li {
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--item-size);
  height: var(--item-size);
  margin-top: calc(-1 * var(--item-radius));
  margin-left: calc(-1 * var(--item-radius));
  
  --angle: calc((360deg / var(--total)) * var(--index) - 90deg);
  --arrow-angle: calc(var(--angle) + (180deg / var(--total)) + 90deg);
  
  transform: rotate(var(--angle)) translate(var(--radius)) rotate(calc(-1 * var(--angle)));
  
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ffffff;
  border: 2px solid #333;
  border-radius: 50%;
  padding: 10px;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  font-size: 0.9em;
  line-height: 1.2;
  z-index: 2;
}
p:has(a[href^="#circle-flow"]) + ol li em { font-style: normal; }

p:has(a[href^="#circle-flow"]) + ol li::before {
  content: "";
  position: absolute;
  top: calc(50% - 12px);
  left: 50%;
  --chord-length-total: calc(var(--radius) * var(--chord-factor));
  width: calc(var(--chord-length-total) - (2 * var(--item-radius)) - (2 * var(--gap)));
  height: 24px;
  z-index: -1;
  transform-origin: left center;
  transform: rotate(var(--arrow-angle)) translate(calc(var(--item-radius) + var(--gap)));
  background-image: linear-gradient(#333, #333), var(--arrow-fwd);
  background-position: left center, right center;
  background-size: calc(100% - 12px) 2.5px, 24px 24px;
  background-repeat: no-repeat;
}

p:has(a[href^="#circle-flow-bi"]) + ol li::before,
p:has(a[href^="#circle-flow"]) + ol li:has(em):before {
  background-image: linear-gradient(#333, #333), var(--arrow-fwd), var(--arrow-back);
  background-position: center center, right center, left center;
  background-size: calc(100% - 24px) 2.5px, 24px 24px, 24px 24px;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

/* =========================================
   6. LINEAR PROCESS FLOWCHART (SINGLE ROW)
   ========================================= */
p:has(a[href^="#linear-flow"]) { display: none; }
p:has(a[href^="#linear-flow"]) + ol {
  --item-size: 100px;
  --arrow-space: 70px;  
  --gap: 16px;          
  
  --arrow-fwd: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M0 0 L10 5 L0 10 z" fill="%23a0a0a0"/></svg>');
  --arrow-back: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M10 0 L0 5 L10 10 z" fill="%23a0a0a0"/></svg>');
  
  display: flex;
  flex-direction: row;
  
  /* CRITICAL FOR PRINT: Allows long lines to bump to the next row instead of running off the page */
  flex-wrap: wrap;         
  
  align-items: center;
  gap: var(--arrow-space); 
  list-style-type: none;
  margin: 3rem 0;
  padding: 15px 5px;        
  break-inside: avoid;
}

p:has(a[href^="#linear-flow"]) + ol li {
  box-sizing: border-box;
  flex: 0 0 auto;           
  position: relative;
  width: var(--item-size);
  height: var(--item-size);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #ffffff;
  border: 2px solid #333;
  border-radius: 50%;
  padding: 10px;
  font-weight: bold;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  font-size: 0.9em;
  line-height: 1.2;
}

p:has(a[href^="#linear-flow"]) + ol li em { font-style: normal; }

p:has(a[href^="#linear-flow"]) + ol li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(100% + var(--gap));
  width: calc(var(--arrow-space) - (2 * var(--gap)));
  height: 10px;
  transform: translateY(-50%);
  z-index: -1;
  background-image: linear-gradient(#a0a0a0, #a0a0a0), var(--arrow-fwd);
  background-position: left center, right center;
  background-size: calc(100% - 9px) 2px, 10px 10px;
  background-repeat: no-repeat;
}

p:has(a[href="#linear-flow-bi"]) + ol li:not(:last-child)::after,
p:has(a[href="#linear-flow"]) + ol li:has(em):not(:last-child)::after {
  background-image: linear-gradient(#a0a0a0, #a0a0a0), var(--arrow-fwd), var(--arrow-back);
  background-position: center center, right center, left center;
  background-size: calc(100% - 18px) 2px, 10px 10px, 10px 10px;
}

/* =========================================
   7. LINEAR PROCESS FLOWCHART (SMART GRID)
   ========================================= */
p:has(a[href^="#linear-cards"]) { display: none; }
p:has(a[href^="#linear-cards"]) + ol {
  --gap: 40px;             
  display: grid;
  
  /* CRITICAL FOR PRINT: A4 width always behaves like desktop, so we force 2 columns */
  grid-template-columns: repeat(2, 1fr); 
  
  gap: var(--gap);
  list-style-type: none;
  margin: 3rem 0;
  padding: 0;
  break-inside: avoid;
}

p:has(a[href^="#linear-cards"]) + ol li {
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  text-align: left;
  background: #ffffff;
  border: 2px solid #333;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  font-size: 0.95em;
  line-height: 1.55;
  break-inside: avoid;
}

p:has(a[href^="#linear-cards"]) + ol li em { font-style: normal; }

p:has(a[href^="#linear-cards"]) + ol li::after {
  content: "";
  position: absolute;
  z-index: 10;
  width: 28px; 
  height: 28px;
  background-size: contain; 
  background-repeat: no-repeat;
  background-position: center;
}

/* ODD CARDS (1, 3, 5): Point Right */
p:has(a[href^="#linear-cards"]) + ol li:nth-child(odd):not(:last-child)::after {
  top: 50%;
  right: calc(-1 * (var(--gap) / 2));
  transform: translate(50%, -50%);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16 M14 6l6 6-6 6"/></svg>');
}
p:has(a[href="#linear-cards-bi"]) + ol li:nth-child(odd):not(:last-child)::after,
p:has(a[href="#linear-cards"]) + ol li:nth-child(odd):has(em):not(:last-child)::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16 M14 6l6 6-6 6 M10 6l-6 6 6 6"/></svg>');
}

/* EVEN CARDS (2, 4, 6): The Diagonal Crosshairs Arrow */
p:has(a[href^="#linear-cards"]) + ol li:nth-child(even):not(:last-child)::after {
  left: calc(-1 * (var(--gap) / 2));
  bottom: calc(-1 * (var(--gap) / 2));
  transform: translate(-50%, 50%); 
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18 M6 10v8h8"/></svg>');
}
p:has(a[href="#linear-cards-bi"]) + ol li:nth-child(even):not(:last-child)::after,
p:has(a[href="#linear-cards"]) + ol li:nth-child(even):has(em):not(:last-child)::after {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18 M6 10v8h8 M10 6h8v8"/></svg>');
}