/* ===============================
   VISUAL DIAGRAMS
   =============================== */

/* ---------------------------------------------------------------
   ΚΛΙΜΑΚΑ ΤΥΠΟΓΡΑΦΙΑΣ

   Δεν είναι νέο ύφος: είναι η κλίμακα που ήδη τηρούσε το αρχείο
   χωρίς να έχει γραφτεί πουθενά. Από τις 108 δηλώσεις font-size σε
   CSS pixel, οι 75 έπεφταν ήδη ακριβώς σε αυτές τις έξι τιμές.

   Σε rem, ώστε το κείμενο να μεγαλώνει όταν ο χρήστης ανεβάζει τη
   γραμματοσειρά του browser — τα px το αγνοούν αυτό.

   ΔΕΝ ισχύει για κείμενο μέσα σε SVG (.vf-kc-label, .vf-venn-label,
   .vf-venn-center, .vf-ac-cycle-label). Εκεί το μέγεθος είναι μονάδα
   viewBox και κλιμακώνεται με το σχήμα· μια τυπογραφική κλίμακα θα
   παραμόρφωνε τα διαγράμματα. Οι τιμές τους μένουν σε px επίτηδες.
   --------------------------------------------------------------- */
:root {
  --fs-xs:   0.75rem;    /* 12px — λεζάντες, badges, πηγές */
  --fs-sm:   0.8125rem;  /* 13px — δευτερεύον κείμενο, bullets */
  --fs-base: 0.875rem;   /* 14px — κύριο κείμενο διαγραμμάτων */
  --fs-md:   1rem;       /* 16px — τίτλοι καρτών */
  --fs-lg:   1.25rem;    /* 20px — τίτλοι διαγράμματος */
  --fs-xl:   1.625rem;   /* 26px — μεγάλοι αριθμοί, headline */
}
   
  
  /*1 ============================
  arrow-framework`    | Πολλά inputs → ένα framework / outcome   
	====================================  
   Example sto md
   [VISUAL:arrow-framework]
	target: Pedagogical framework

	- color: yellow
	  text: Ensures **structured, meaningful integration** of technology into artistic processes.

	- color: orange
	  text: Supports learner **autonomy, exploration and critical engagement**.

	- color: pink
	  text: Provides **consistent pedagogical grounding** for creative, culturally aware practice.

	- color: blue
	  text: Enables educators to design **inclusive and reflective learning pathways**.
	[/VISUAL]
   */

.vf-diagram {
  width: 100%;
  max-width: 780px;
  margin: 2rem auto;
  font-family: inherit;
  box-sizing: border-box;
}

/* Screen-reader-only text */
.vf-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===============================
   ARROW FRAMEWORK
   =============================== */

.vf-arrow-framework {
  --vf-yellow: var(--pulse-art-yellow, #FFF000);
  --vf-orange: var(--pulse-art-orange, #CD4B13);
  --vf-pink: var(--pulse-art-purple, #f5a9ed);
  --vf-blue: var(--pulse-art-blue, #0219fc);

  display: grid;
  grid-template-columns: minmax(440px, 1.7fr) 84px minmax(120px, .45fr);
	gap: 16px;
  align-items: center;
  

  width: 100%;
  max-width: 780px;
  margin: 2rem auto;
  padding: 6px 0;
  background: transparent;
  box-sizing: border-box;
}

.vf-arrow-left {
  display: grid;
  gap: 7px;
}

.vf-arrow-ribbon {
  position: relative;
  min-height: 66px;
  padding: 10px 30px 10px 58px;

  display: flex;
  align-items: center;

  clip-path: polygon(
    0 0,
    88% 0,
    100% 50%,
    88% 100%,
    0 100%,
    4% 50%
  );

  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.6;
  font-weight: 400;
  color: #111;

  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  box-sizing: border-box;
}

.vf-arrow-text {
  display: block;
  max-width: 420px;
  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.vf-arrow-text strong {
  font-weight: 750;
}

/* Το 58px αριστερό padding της κορδέλας κρατάει χώρο για το κυκλάκι, που
   είναι absolute. Με "numbers: off" δεν υπάρχει κυκλάκι, οπότε ο χώρος
   θα έμενε κενός και το κείμενο μετατοπισμένο χωρίς λόγο. */
.vf-arrow-no-numbers .vf-arrow-ribbon {
  padding-left: 30px;
}

/* Τα δύο font-size του .vf-arrow-number μένουν σε px και εκτός της
   κλίμακας επίτηδες: ο αριθμός είναι κεντραρισμένος μέσα σε κύκλο
   σταθερής διαμέτρου 22px, οπότε το μέγεθός του το δεσμεύει η
   γεωμετρία του κύκλου και όχι η τυπογραφία του κειμένου. */
.vf-arrow-number {
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);

  width: 22px;
  height: 22px;
  border-radius: 50%;

  display: grid;
  place-items: center;

  background: rgba(255, 255, 255, .78);
  color: #111;

  font-size: 11px;
  font-weight: 700;
}

.vf-yellow {
  background: var(--vf-yellow);
}

.vf-orange {
  background: var(--vf-orange);
}

.vf-pink {
  background: var(--vf-pink);
}

.vf-blue {
  background: var(--vf-blue);
  color: #fff;
}

.vf-blue,
.vf-blue .vf-arrow-text,
.vf-blue .vf-arrow-text strong {
  color: #fff;
}

.vf-blue .vf-arrow-number {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

.vf-arrow-main {
  width: 84px;
  height: 40px;
  background: #8a8a8a;

  clip-path: polygon(
    0 28%,
    60% 28%,
    60% 0,
    100% 50%,
    60% 100%,
    60% 72%,
    0 72%
  );

  filter: drop-shadow(4px 4px 3px rgba(0, 0, 0, .18));
}

.vf-arrow-target {
  font-size: var(--fs-md);
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0;
  max-width: 120px;
  color: #000;
  text-align: left;
}

.vf-diagram-notes {
  display: none;
}

/* Bootstrap safety */
.lesson-card .vf-arrow-framework,
.card .vf-arrow-framework,
.col .vf-arrow-framework,
[class*="col-"] .vf-arrow-framework {
  max-width: 100%;
  box-sizing: border-box;
}

/* Narrow screens */
@media (max-width: 768px) {
  .vf-arrow-framework {
    grid-template-columns: 1fr;
    max-width: 360px;
    gap: 14px;
    justify-items: center;
  }

  .vf-arrow-left {
    width: 100%;
    gap: 10px;
  }

  /* Τα panels γίνονται ορθογώνια κουτιά */
  .vf-arrow-ribbon {
    clip-path: none;
    border-radius: 10px;
    min-height: auto;
    padding: 12px 14px 12px 36px;
  }

  /* Τα 1,2,3,4 πιο αριστερά */
  .vf-arrow-number {
    left: 8px;
    width: 22px;
    height: 22px;
    font-size: 10px;
  }

  .vf-arrow-text {
    max-width: none;
  }

  /* Μικρότερο βέλος, πιο κάτω από το 4ο κουτί */
  .vf-arrow-main {
    width: 64px;
    height: 32px;
    margin: 14px auto 0;
    transform: rotate(90deg);
    background: #8a8a8a;
    filter: none;
  }

  /* Το target κεντραρισμένο και λίγο πιο κάτω */
  .vf-arrow-target {
    width: 100%;
    text-align: center;
    margin-top: 18px;
    justify-self: center;
  }
}

/* --- Panel surface ("panel: grey") ---
   Same tints and the same option name as the guidelines-grid and
   branches-flow panels, so a page that stacks several diagrams can
   separate them into readable sections. */
.vf-circle-tags.vf-ct-panel,
.vf-shape-four-text.vf-sft-panel {
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--vf-panel-bg, #f2f4f7);
  box-sizing: border-box;
}

.vf-ct-panel.vf-ct-panel-grey,   .vf-sft-panel.vf-sft-panel-grey   { --vf-panel-bg: #f2f4f7; }
.vf-ct-panel.vf-ct-panel-blue,   .vf-sft-panel.vf-sft-panel-blue   { --vf-panel-bg: #e8f1fb; }
.vf-ct-panel.vf-ct-panel-pink,   .vf-sft-panel.vf-sft-panel-pink   { --vf-panel-bg: #fdeef9; }
.vf-ct-panel.vf-ct-panel-yellow, .vf-sft-panel.vf-sft-panel-yellow { --vf-panel-bg: #fdf7d9; }
.vf-ct-panel.vf-ct-panel-orange, .vf-sft-panel.vf-sft-panel-orange { --vf-panel-bg: #fdeee6; }
.vf-ct-panel.vf-ct-panel-green,  .vf-sft-panel.vf-sft-panel-green  { --vf-panel-bg: #e9f5ec; }
.vf-ct-panel.vf-ct-panel-purple, .vf-sft-panel.vf-sft-panel-purple { --vf-panel-bg: #f0ebf8; }

@media (max-width: 768px) {
  .vf-circle-tags.vf-ct-panel,
  .vf-shape-four-text.vf-sft-panel {
    padding: 14px;
    border-radius: 14px;
  }
}

/* ============================
   CIRCLE TAGS
   A wrapping grid of outlined circles with a caption under each. The
   circle carries no content: it is a colour anchor that turns a list of
   fourteen abstract terms into something the eye can actually scan.
   ============================ */

.vf-circle-tags {
  margin: 1.6rem auto;
  max-width: 1040px;
}

.vf-ct-title {
  font-weight: 800;
  font-size: var(--fs-base);
  margin-bottom: 14px;
  color: var(--quaternary, #171940);
}

.vf-ct-grid {
  display: grid;
  grid-template-columns: repeat(var(--vf-ct-cols, 7), minmax(0, 1fr));
  gap: 18px 12px;
  align-items: start;
}

.vf-ct-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-width: 0;
  text-align: center;
}

.vf-ct-circle {
  display: block;
  width: 58px;
  height: 58px;
  border-radius: 50%;

  /* Ring only. A filled disc at this size reads as a button and invites
     a click that does nothing. */
  border: 4px solid currentColor;
}

.vf-ct-label {
  font-size: var(--fs-sm);
  line-height: 1.3;
  font-weight: 750;
  color: inherit;
  hyphens: auto;
}

.vf-ct-source {
  margin-top: 14px;
  font-size: var(--fs-xs);
  color: #666;
}

/* Two colours per item, not one. The ring is a large block of colour on
   white and can stay at full brand saturation; the label is 13px text and
   cannot. Brand pink (#f5a9ed) reaches only 1.8:1 against white and brand
   yellow 2.2:1, where 4.5:1 is the readable minimum for text this size —
   so the label takes a darkened version of the same hue while the ring
   keeps the poster's colour. Blue, green and purple already pass, so
   their label and ring stay identical. */
.vf-ct-item {
  --vf-ct-ring: currentColor;
}

.vf-ct-circle {
  border-color: var(--vf-ct-ring);
}

.vf-ct-item.vf-ct-blue {
  color: var(--pulse-art-blue, #0219fc);
}

.vf-ct-item.vf-ct-pink {
  --vf-ct-ring: var(--pulse-art-purple, #f5a9ed);
  color: #a01f8c;
}

.vf-ct-item.vf-ct-orange {
  --vf-ct-ring: var(--pulse-art-orange, #CD4B13);
  color: #a13a0c;
}

.vf-ct-item.vf-ct-yellow {
  --vf-ct-ring: #F5C800;
  color: #8a6400;
}

.vf-ct-item.vf-ct-green {
  color: #1e7b34;
}

.vf-ct-item.vf-ct-purple {
  color: #6a5296;
}

@media (max-width: 900px) {
  .vf-ct-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px 10px;
  }

  .vf-ct-circle {
    width: 48px;
    height: 48px;
    border-width: 3px;
  }
}

@media (max-width: 520px) {
  .vf-ct-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .vf-ct-label {
    font-size: var(--fs-xs);
  }
}

.vf-orange,
.vf-orange .vf-arrow-text,
.vf-orange .vf-arrow-text strong {
  color: #fff;
}

.vf-orange .vf-arrow-number {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}


/*2 ============================
  FEATURE FLOW | core features with arrows
====================================
   Example sto md
	[VISUAL:feature-flow]
	title: Core features of Inquiry-Based Learning

	- color: yellow
	  text: **Investigative questions** guide artistic and technological exploration.

	- color: pink
	  text: Learners **collect observations** from experiments, outputs and processes.

	- color: orange
	  text: **Digital tools** become objects of inquiry, not only instruments for production.

	- color: blue
	  text: **Interpretation and analysis** feed back into artistic decisions.
	[/VISUAL]
   /*
   
   [VISUAL:feature-flow-reverse]
title: 
- color: yellow
  text: A **sustained artistic investigation** anchored in a real theme or problem.

- color: orange
  text: A **meaningful final product** that combines artistic intention with digital execution.

- color: pink
  text: **Iterative design cycles** with clearly defined phases of development and revision.

- color: blue
  text: **Authentic audiences** for the work (peers, school exhibitions, online platforms, community events).
[/VISUAL]

 */



.vf-feature-flow {
  width: 100%;
  max-width: 1180px;
  margin: 2rem auto;
  font-family: inherit;
  box-sizing: border-box;
  overflow: visible;
}

.vf-feature-flow-title {
  margin-bottom: 1rem;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--quaternary, #171940);
}

.vf-feature-flow-grid {
  --vf-flow-gap: 28px;
  --vf-arrow-head: 12px;

  display: grid;
  /* One track per panel. The renderer sets --vf-flow-cols; the fallback
     of 4 keeps any grid rendered by older markup exactly as it was.
     Hard-coding 4 left a three-panel row occupying three quarters of the
     width, with the panels needlessly narrow and tall. */
  grid-template-columns: repeat(var(--vf-flow-cols, 4), minmax(0, 1fr));
  gap: var(--vf-flow-gap);
  align-items: stretch;
  overflow: visible;
}

.vf-feature-flow .vf-panel {
  position: relative;
  overflow: visible;
  z-index: 1;

  min-width: 0;
  min-height: 210px;
  height: 100%;

  padding: 18px 16px;

  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .16);

  border-top: 6px solid var(--quaternary, #171940);
  box-sizing: border-box;
}

.vf-feature-flow .vf-panel-number {
  width: 26px;
  height: 26px;
  margin-bottom: 12px;

  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, .08);
  color: #111;

  font-size: var(--fs-xs);
  line-height: 1;
  font-weight: 700;
}

.vf-feature-flow .vf-panel-text {
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.6;
  font-weight: 400;
  color: var(--lesson-ink-soft, #111);

  white-space: normal;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.vf-feature-flow .vf-panel-text strong {
  font-weight: 750;
}

/* Panels written with "split:": the bold lead becomes a heading and the
   sentence becomes a list. Square markers, to match the source slides. */
.vf-feature-flow .vf-panel-heading {
  font-weight: 750;
  margin: 0 0 8px;
}

.vf-feature-flow .vf-panel-items {
  margin: 0;
  padding: 0 0 0 1.15em;
  list-style: square;
}

.vf-feature-flow .vf-panel-items li {
  margin: 0 0 6px;
}

.vf-feature-flow .vf-panel-items li:last-child {
  margin-bottom: 0;
}

.vf-feature-flow .vf-panel-items li::marker {
  color: var(--quaternary, #171940);
}

/* Panel accents */
.vf-feature-flow .vf-panel.vf-yellow {
  border-top-color: var(--pulse-art-yellow, #FFF000);
}

.vf-feature-flow .vf-panel.vf-orange {
  border-top-color: var(--pulse-art-orange, #CD4B13);
}

.vf-feature-flow .vf-panel.vf-pink {
  border-top-color: var(--pulse-art-purple, #f5a9ed);
}

.vf-feature-flow .vf-panel.vf-blue {
  border-top-color: var(--pulse-art-blue, #0219fc);
}

/* Four extra accents so an eight-card diagram never has to repeat a
   colour. Same shape as the four above; only the token differs. */
.vf-feature-flow .vf-panel.vf-green {
  border-top-color: var(--pulse-art-green, #0E9F6E);
}

.vf-feature-flow .vf-panel.vf-teal {
  border-top-color: var(--pulse-art-teal, #0694A2);
}

.vf-feature-flow .vf-panel.vf-red {
  border-top-color: var(--pulse-art-red, #E02424);
}

.vf-feature-flow .vf-panel.vf-violet {
  border-top-color: var(--pulse-art-violet, #6941C6);
}

/* ============================
   FEATURE FLOW | normal arrows
   Direction: left to right
   Includes arrow after every panel, including blue.
   ============================ */

/* clear all arrow pseudo-elements first */
.vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel::before,
.vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel::after {
  display: none;
}

/* desktop arrows */
.vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel::before {
  display: block;
  content: "";
  position: absolute;

  top: 50%;
  right: calc(-1 * (var(--vf-flow-gap) / 2 + 6px));
  transform: translateY(-50%);

  width: 0;
  height: 0;

  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 12px solid #8a8a8a;
  border-right: 0;

  z-index: 21;
}

/* color by source/current panel */
.vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel.vf-yellow::before {
  border-left-color: var(--pulse-art-yellow, #FFF000);
}

.vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel.vf-orange::before {
  border-left-color: var(--pulse-art-orange, #CD4B13);
}

.vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel.vf-pink::before {
  border-left-color: var(--pulse-art-purple, #f5a9ed);
}

.vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel.vf-blue::before {
  border-left-color: var(--pulse-art-blue, #0219fc);
}

.vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel.vf-green::before {
  border-left-color: var(--pulse-art-green, #0E9F6E);
}

.vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel.vf-teal::before {
  border-left-color: var(--pulse-art-teal, #0694A2);
}

.vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel.vf-red::before {
  border-left-color: var(--pulse-art-red, #E02424);
}

.vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel.vf-violet::before {
  border-left-color: var(--pulse-art-violet, #6941C6);
}

/* …except the last one, which has nothing to point at. The arrow is
   drawn on the source panel rather than between panels, so the final
   card would otherwise fire one off the right edge of the diagram. */
.vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel:last-child::before {
  display: none;
}

/* ============================
   FEATURE FLOW REVERSE
   Direction: right to left
   Visual result: 1 ← 2 ← 3 ← 4
   ============================ */

.vf-feature-flow-reverse .vf-panel::before,
.vf-feature-flow-reverse .vf-panel::after {
  display: none;
}

/* desktop reverse arrows on cards 2, 3, 4 */
.vf-feature-flow-reverse .vf-panel:not(:first-child)::before {
  display: block;
  content: "";
  position: absolute;

  top: 50%;
  left: calc(-1 * (var(--vf-flow-gap) / 2 + 6px));
  right: auto;
  bottom: auto;

  transform: translateY(-50%);

  width: 0;
  height: 0;

  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 12px solid #8a8a8a;
  border-left: 0;

  z-index: 21;
}

/* color by source/current panel */
.vf-feature-flow-reverse .vf-panel.vf-yellow:not(:first-child)::before {
  border-right-color: var(--pulse-art-yellow, #FFF000);
}

.vf-feature-flow-reverse .vf-panel.vf-orange:not(:first-child)::before {
  border-right-color: var(--pulse-art-orange, #CD4B13);
}

.vf-feature-flow-reverse .vf-panel.vf-pink:not(:first-child)::before {
  border-right-color: var(--pulse-art-purple, #f5a9ed);
}

.vf-feature-flow-reverse .vf-panel.vf-blue:not(:first-child)::before {
  border-right-color: var(--pulse-art-blue, #0219fc);
}

.vf-feature-flow-reverse .vf-panel.vf-green:not(:first-child)::before {
  border-right-color: var(--pulse-art-green, #0E9F6E);
}

.vf-feature-flow-reverse .vf-panel.vf-teal:not(:first-child)::before {
  border-right-color: var(--pulse-art-teal, #0694A2);
}

.vf-feature-flow-reverse .vf-panel.vf-red:not(:first-child)::before {
  border-right-color: var(--pulse-art-red, #E02424);
}

.vf-feature-flow-reverse .vf-panel.vf-violet:not(:first-child)::before {
  border-right-color: var(--pulse-art-violet, #6941C6);
}

/* The first card gets no arrow. In reverse flow the arrow sits on the
   left of each card, so the first one used to point off the left edge
   of the diagram at nothing — the mirror image of the trailing arrow
   removed from the last card in normal flow. The :not(:first-child)
   rules above already skip it; this block used to add it back. */

/* ============================
   FEATURE FLOW | mobile
   Normal: vertical downward flow.
   Reverse: vertical upward flow.
   Hard reset prevents desktop side arrows from leaking into mobile.
   ============================ */

@media (max-width: 768px) {
  .vf-feature-flow,
  .vf-feature-flow-reverse {
    max-width: 420px;
    overflow: visible !important;
  }

  .vf-feature-flow .vf-feature-flow-grid,
  .vf-feature-flow-reverse .vf-feature-flow-grid {
    --vf-flow-gap: 34px;
    --vf-arrow-head: 14px;

    grid-template-columns: 1fr !important;
    gap: var(--vf-flow-gap) !important;
    min-width: 0;
    overflow: visible !important;
  }

  .vf-feature-flow .vf-panel,
  .vf-feature-flow-reverse .vf-panel {
    position: relative;
    min-height: 0;
    height: auto;
    padding: 14px 16px;
    overflow: visible !important;
  }

  .vf-feature-flow .vf-panel-number,
  .vf-feature-flow-reverse .vf-panel-number {
    margin-bottom: 8px;
  }

  .vf-feature-flow .vf-panel-text,
  .vf-feature-flow-reverse .vf-panel-text {
    line-height: 1.5;
  }

  /* Strong reset for every desktop arrow shape. */
  .vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel::before,
  .vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel::after,
  .vf-feature-flow-reverse .vf-panel::before,
  .vf-feature-flow-reverse .vf-panel::after {
    content: "" !important;
    display: none !important;
    position: absolute !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    z-index: 21;
    pointer-events: none;
  }

  /* Normal mobile flow: arrows only downward. Includes the last card. */
  .vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel::after {
    display: block !important;
    left: 50% !important;
    bottom: calc(-1 * (var(--vf-flow-gap) / 2 + 7px)) !important;
    transform: translateX(-50%) !important;

    border-left: 10px solid transparent !important;
    border-right: 10px solid transparent !important;
    border-top: var(--vf-arrow-head) solid #8a8a8a !important;
  }

  /* Reverse mobile flow: arrows only upward. Includes the first card. */
  .vf-feature-flow-reverse .vf-panel::after {
    display: block !important;
    left: 50% !important;
    top: calc(-1 * (var(--vf-flow-gap) / 2 + 7px)) !important;
    transform: translateX(-50%) !important;

    border-left: 10px solid transparent !important;
    border-right: 10px solid transparent !important;
    border-bottom: var(--vf-arrow-head) solid #8a8a8a !important;
  }

  /* …but not the first, which is the top of the stack and has nothing
     above it to point to. */
  .vf-feature-flow-reverse .vf-panel:first-child::after {
    display: none !important;
  }

  .vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel.vf-yellow::after {
    border-top-color: var(--pulse-art-yellow, #FFF000) !important;
  }

  .vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel.vf-orange::after {
    border-top-color: var(--pulse-art-orange, #CD4B13) !important;
  }

  .vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel.vf-pink::after {
    border-top-color: var(--pulse-art-purple, #f5a9ed) !important;
  }

  .vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel.vf-blue::after {
    border-top-color: var(--pulse-art-blue, #0219fc) !important;
  }

  .vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel.vf-green::after {
    border-top-color: var(--pulse-art-green, #0E9F6E) !important;
  }

  .vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel.vf-teal::after {
    border-top-color: var(--pulse-art-teal, #0694A2) !important;
  }

  .vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel.vf-red::after {
    border-top-color: var(--pulse-art-red, #E02424) !important;
  }

  .vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel.vf-violet::after {
    border-top-color: var(--pulse-art-violet, #6941C6) !important;
  }

  /* Same as on desktop: the stack ends at the last card, so it gets no
     downward arrow. */
  .vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel:last-child::after {
    display: none !important;
  }

  .vf-feature-flow-reverse .vf-panel.vf-yellow::after {
    border-bottom-color: var(--pulse-art-yellow, #FFF000) !important;
  }

  .vf-feature-flow-reverse .vf-panel.vf-orange::after {
    border-bottom-color: var(--pulse-art-orange, #CD4B13) !important;
  }

  .vf-feature-flow-reverse .vf-panel.vf-pink::after {
    border-bottom-color: var(--pulse-art-purple, #f5a9ed) !important;
  }

  .vf-feature-flow-reverse .vf-panel.vf-blue::after {
    border-bottom-color: var(--pulse-art-blue, #0219fc) !important;
  }

  .vf-feature-flow-reverse .vf-panel.vf-green::after {
    border-bottom-color: var(--pulse-art-green, #0E9F6E) !important;
  }

  .vf-feature-flow-reverse .vf-panel.vf-teal::after {
    border-bottom-color: var(--pulse-art-teal, #0694A2) !important;
  }

  .vf-feature-flow-reverse .vf-panel.vf-red::after {
    border-bottom-color: var(--pulse-art-red, #E02424) !important;
  }

  .vf-feature-flow-reverse .vf-panel.vf-violet::after {
    border-bottom-color: var(--pulse-art-violet, #6941C6) !important;
  }
}



/*5 ============================
  DO / DON'T | teaching strategies with center SVG hub
==================================== 
[VISUAL:do-dont]
title: 
center: IBL
image: img/dos-image.svg

do:
- **Ask open questions** and encourage discovery through variation.
- **Highlight how algorithms, prompts or parameters shape meaning** in the artwork.
- **Link investigative findings** directly to artistic decision-making.

dont:
- **Reduce inquiry to tool manipulation only** without questioning behaviour.
- **Focus solely on final outputs**, ignoring the exploratory process.
- **Present technology as a fixed or opaque black box** that cannot be examined or questioned.
[/VISUAL]




*/

.vf-do-dont {
  width: 100%;
  max-width: 1120px;
  margin: 2rem auto;
  font-family: inherit;
  box-sizing: border-box;
}

.vf-dd-title {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 700;
  text-align: left;
  color: var(--quaternary, #171940);
}

.vf-dd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}

.vf-dd-side {
  display: grid;
  gap: 14px;
}

/* group labels: hidden on desktop, visible on mobile */
.vf-dd-do-side::before,
.vf-dd-dont-side::before {
  display: none;
}

/* text boxes */
.vf-dd-item {
  position: relative;
  min-width: 0;
  padding: 14px 16px 14px 34px;

  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .13);

  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.6;
  font-weight: 400;
  color: var(--lesson-ink-soft, #111);

  box-sizing: border-box;
}

.vf-dd-item strong {
  font-weight: 750;
}

/* simple symbol at the start of each item */
.vf-dd-item::before {
  position: absolute;
  left: 14px;
  top: 14px;

  font-size: var(--fs-base);
  line-height: 1.6;
  font-weight: 800;
}

.vf-dd-do-side .vf-dd-item::before {
  content: "✓";
}

.vf-dd-dont-side .vf-dd-item::before {
  content: "×";
}

/* colors controlled from markdown */
.vf-dd-side.vf-yellow .vf-dd-item {
  border-left: 6px solid var(--pulse-art-yellow, #FFF000);
}

.vf-dd-side.vf-orange .vf-dd-item {
  border-left: 6px solid var(--pulse-art-orange, #CD4B13);
}

.vf-dd-side.vf-pink .vf-dd-item {
  border-left: 6px solid var(--pulse-art-purple, #f5a9ed);
}

.vf-dd-side.vf-blue .vf-dd-item {
  border-left: 6px solid var(--pulse-art-blue, #0219fc);
}

/* symbol color follows markdown color */
.vf-dd-side.vf-yellow .vf-dd-item::before {
  color: var(--pulse-art-yellow, #FFF000);
}

.vf-dd-side.vf-orange .vf-dd-item::before {
  color: var(--pulse-art-orange, #CD4B13);
}

.vf-dd-side.vf-pink .vf-dd-item::before {
  color: var(--pulse-art-purple, #f5a9ed);
}

.vf-dd-side.vf-blue .vf-dd-item::before {
  color: var(--pulse-art-blue, #0219fc);
}

/* center SVG */
.vf-dd-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vf-dd-hub-img {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
}

.vf-dd-hub-fallback {
  width: 190px;
  height: 190px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .16);

  font-size: 1rem;
  line-height: 1.2;
  font-weight: 800;
  color: var(--quaternary, #171940);
  text-align: center;
}

/* mobile: stacked boxes, no center SVG */
@media (max-width: 768px) {
  .vf-do-dont {
    max-width: 420px;
  }

  .vf-dd-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .vf-dd-center {
    display: none;
  }

  .vf-dd-side {
    gap: 12px;
  }

  /* mobile group titles */
  .vf-dd-do-side::before,
  .vf-dd-dont-side::before {
    display: block;
    margin-bottom: 6px;

    font-size: 1rem;
    line-height: 1.35;
    font-weight: 700;
    color: #111;
  }

  .vf-dd-do-side::before {
    content: "✓ Do";
  }

  .vf-dd-dont-side::before {
    content: "× Don’t";
  }

  .vf-dd-item {
    border-radius: 12px;
    padding: 14px 16px 14px 34px;
  }
}

/*5 ============================
  OUTCOMES RELEVANCE | two-card relation
==================================== 
[VISUAL:outcomes-relevance]
title: 
outcomesTitle: Learning outcomes
relevanceTitle: Relevance for art + technology

outcomes:
- Capacity to **develop a coherent artistic concept** from initial planning to completion.
- Understanding of **digital workflows and production pipelines** in art–technology projects.
- Ability to **revise work based on feedback and reflection**, iterating towards stronger outcomes.
- Competence in **communicating artistic intention and technical decisions** to peers, teachers and wider audiences.

relevance: Project-Based Learning supports the creation of **complex, multi-stage digital artworks** — such as animations, interactive pieces, generative visualisations, VR environments and soundscapes. It reflects **how artists and designers work in professional media contexts**, where planning, iteration and public presentation are central to the creative process.
[/VISUAL]



*/

.vf-outcomes-relevance {
  width: 100%;
  max-width: 1120px;
  margin: 2rem auto;
  font-family: inherit;
  box-sizing: border-box;
}

.vf-or-title {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 700;
  text-align: left;
  color: var(--quaternary, #171940);
}

.vf-or-two-card {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) 44px minmax(0, 1.05fr);
  gap: 12px;
  align-items: center;
}

.vf-or-card {
  min-width: 0;
  padding: 18px 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
  box-sizing: border-box;
}

.vf-or-outcomes-card {
  border-top: 6px solid var(--pulse-art-purple, #f5a9ed);
}

.vf-or-relevance-card {
  border-top: 6px solid var(--pulse-art-yellow, #FFF000);
}

.vf-or-card-title {
  margin-bottom: 0.8rem;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--quaternary, #171940);
}

.vf-or-list-bullets {
  margin: 0;
  padding-left: 1.15rem;
}

.vf-or-list-bullets li {
  margin-bottom: 0.65rem;
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.6;
  font-weight: 400;
  color: var(--lesson-ink-soft, #111);
}

.vf-or-list-bullets li:last-child {
  margin-bottom: 0;
}

.vf-or-text {
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.6;
  font-weight: 400;
  color: var(--lesson-ink-soft, #111);
}

.vf-or-text strong,
.vf-or-list-bullets strong {
  font-weight: 750;
}

/* connector: orange circle only */
.vf-or-connector {
  display: flex;
  align-items: center;
  justify-content: center;
}

.vf-or-dot {
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pulse-art-orange, #CD4B13);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  flex: 0 0 20px;
}

/* mobile */
@media (max-width: 768px) {
  .vf-outcomes-relevance {
    max-width: 420px;
  }

  .vf-or-two-card {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .vf-or-card {
    padding: 16px 18px;
  }

  .vf-or-connector {
    min-height: 20px;
  }

  .vf-or-dot {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }
}



/*3 ============================
  VERTICAL PROCESS | Porto vertical process
==================================== 
[VISUAL:vertical-process]
title: Procedure / Working Flow

- color: yellow
  heading: Question formulation
  text: Investigative questions guide artistic and technological exploration (e.g. “How does this work?”, “What happens if…?”).

- color: orange
  heading: Exploration of materials and tools
  text: Learners collect observations (visual, structural, aesthetic) from experiments, outputs and processes.
  
- color: pink
  heading: Interpretation
  text: Digital tools (e.g. AI platforms, coding environments) become objects of inquiry, not only instruments for production.
  
- color: blue
  heading: Synthesis
  text: Interpretation, analysis and pattern-finding are central, feeding back into artistic decisions and conceptual framing.
[/VISUAL]



*/

/* ============================
   VERTICAL PROCESS | compact dynamic
==================================== */

.vf-vertical-process {
  width: 100%;
  max-width: 560px;
  margin: 1rem auto;
  font-family: inherit;
  box-sizing: border-box;
}

.vf-vertical-process .process {
  position: relative;
  padding: 0 !important;
}

/* Κλείνει η default κάθετη γραμμή του Porto */
.vf-vertical-process .process::before,
.vf-vertical-process .process-vertical::before {
  display: none !important;
}

/* Κάθε step παίρνει ύψος ανάλογα με το κείμενό του */
.vf-vertical-process .process-step {
  display: flex;
  align-items: flex-start;
  position: relative;

  height: auto;
  min-height: 0;
  margin: 0 !important;
  padding: 0 0 1.3rem 0 !important;
}

/* Το τελευταίο step δεν χρειάζεται κάτω κενό */
.vf-vertical-process .process-step:last-child {
  padding-bottom: 0 !important;
}

/* Κάθετη γραμμή ανάμεσα στα steps */
.vf-vertical-process .process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 30px;
  top: 60px;
  bottom: 0;
  width: 1px;
  background: #e5e5e5;
}

/* Κύκλος */
.vf-vertical-process .process-step-circle {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 18px 0 0 !important;
  position: relative;
  z-index: 2;
}

/* Νούμερο μέσα στον κύκλο */
.vf-vertical-process .process-step-circle-content {
  font-size: var(--fs-base);
  font-weight: 800;
  line-height: 1;
}

/* Περιεχόμενο κειμένου */
.vf-vertical-process .process-step-content {
  flex: 1;
  min-width: 0;
  padding-top: 0.15rem;
}

.vf-vertical-process .process-step-content h4 {
  margin: 0 0 0.25rem 0;
  font-size: var(--fs-base);
  line-height: 1.25;
  font-weight: 700;
}

.vf-vertical-process .process-step-content p {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: 1.4;
}

/* PULSE-ART step circles */
.vf-process-step.vf-yellow .process-step-circle {
  background: var(--pulse-art-yellow, #FFF000);
}

.vf-process-step.vf-yellow .process-step-circle-content {
  color: #111;
}

.vf-process-step.vf-orange .process-step-circle {
  background: var(--pulse-art-orange, #CD4B13);
}

.vf-process-step.vf-orange .process-step-circle-content {
  color: #fff;
}

.vf-process-step.vf-pink .process-step-circle {
  background: var(--pulse-art-purple, #f5a9ed);
}

.vf-process-step.vf-pink .process-step-circle-content {
  color: #111;
}

.vf-process-step.vf-blue .process-step-circle {
  background: var(--pulse-art-blue, #0219fc);
}

.vf-process-step.vf-blue .process-step-circle-content {
  color: #fff;
}

/* Animation */
.vf-vertical-process .vf-process-step {
  opacity: 0;
  transform: translateY(10px);
  animation: vfFadeInUp 0.45s ease forwards;
}

.vf-vertical-process .vf-process-step:nth-child(1) {
  animation-delay: 0.1s;
}

.vf-vertical-process .vf-process-step:nth-child(2) {
  animation-delay: 0.2s;
}

.vf-vertical-process .vf-process-step:nth-child(3) {
  animation-delay: 0.3s;
}

.vf-vertical-process .vf-process-step:nth-child(4) {
  animation-delay: 0.4s;
}

@keyframes vfFadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/*4 ============================
  PROCESS STEPS | horizontal procedure columns
==================================== 
[VISUAL:process-steps]
title: Procedure / working flow

- color: yellow
  heading: Framing the project theme
  text: Learners co-define a **real, meaningful theme or problem** for their project. The theme anchors artistic choices and connects them to wider social or cultural questions.

- color: pink
  heading: Planning
  text: Learners plan **what they want to create** and **which digital tools** they will use. They break the work into phases and responsibilities within the group.

- color: orange
  heading: Creation and iteration
  text: Learners **draft, test, refine and redesign** digital artefacts using the chosen tools. Feedback informs **new versions**, keeping the project iterative.

- color: blue
  heading: Presentation and explanation
  text: The final artwork is **shared with an authentic audience**. Learners **explain their artistic intention and technical decisions**, linking process and outcome.
[/VISUAL]



*/

.vf-process-steps {
  width: 100%;
  max-width: 1120px;
  margin: 2rem auto;
  font-family: inherit;
  box-sizing: border-box;
}

.vf-process-steps-title {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 700;
  text-align: left;
  color: var(--quaternary, #171940);
  text-decoration: none;
}

.vf-process-steps-grid {
  display: grid;
  /* Number of columns matches the number of steps (set inline as
     --vf-ps-count by the renderer), so fewer steps automatically
     get wider columns and always fill the full available width.
     Capped at 5 so a very long list doesn't produce unreadably
     thin columns — it wraps to a second row instead. */
  grid-template-columns: repeat(min(var(--vf-ps-count, 4), 5), minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.vf-process-col {
  position: relative;
  min-width: 0;
  min-height: 295px;/*the height of the card*/
  padding-left: 8px;
  box-sizing: border-box;
}

/* grey separator/shadow at the left */
.vf-process-col::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 0;
  width: 8px;
  background: linear-gradient(to right, rgba(0, 0, 0, .28), rgba(0, 0, 0, 0));
  clip-path: polygon(0 0, 100% 8%, 100% 92%, 0 100%);
}

.vf-process-header {
  position: relative;
  min-height: 74px;
  padding: 12px 18px 12px 6px; /*header placement*/

  display: flex;
  align-items: center;
  gap: 8px;

  font-size: var(--fs-base);
  line-height: 1.12;
  font-weight: 700;
  color: #111;

  clip-path: polygon(
    0 0,
    82% 0,
    100% 50%,
    82% 100%,
    0 100%
  );

  box-sizing: border-box;
}

/* number in circle */
.vf-process-steps .vf-process-stepnum {
  flex: 0 0 24px;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  padding: 0;
  margin: 0;

  background: rgba(255, 255, 255, .46);
  color: #111;

  font-size: var(--fs-xs);
  line-height: 1;
  font-weight: 800;
  box-sizing: border-box;
}

.vf-process-heading {
  display: inline-block;
  font-size: var(--fs-sm);
  line-height: 1.12;
  font-weight: 700;
  max-width: 78%;
}

.vf-process-body {
  width: 100%;
  max-width: 100%;
  padding: 14px 0 0 4px;

  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.6;
  font-weight: 400;
  color: var(--lesson-ink-soft, #111);

  box-sizing: border-box;
}

.vf-process-body strong,
.vf-process-heading strong {
  font-weight: 750;
}


/* PULSE-ART colors */
.vf-process-col.vf-yellow .vf-process-header {
  background: var(--pulse-art-yellow, #FFF000);
  color: #111;
}

.vf-process-col.vf-orange .vf-process-header {
  background: var(--pulse-art-orange, #CD4B13);
  color: #fff;
}

.vf-process-col.vf-pink .vf-process-header {
  background: var(--pulse-art-purple, #f5a9ed);
  color: #111;
}

.vf-process-col.vf-blue .vf-process-header {
  background: var(--pulse-art-blue, #0219fc);
  color: #fff;
}

.vf-process-col.vf-orange .vf-process-stepnum,
.vf-process-col.vf-blue .vf-process-stepnum {
  background: rgba(255, 255, 255, .20);
  color: #fff;
}

.vf-process-col.vf-yellow .vf-process-stepnum,
.vf-process-col.vf-pink .vf-process-stepnum {
  background: rgba(255, 255, 255, .55);
  color: #111;
}

/* mobile */
@media (max-width: 768px) {
  .vf-process-steps {
    max-width: 420px;
  }

  .vf-process-steps-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .vf-process-col {
    min-height: auto;
    padding-left: 0;
  }

  .vf-process-header {
    min-height: auto;
    clip-path: none;
    border-radius: 10px;
  }

  .vf-process-col::before {
    display: none;
  }

  .vf-process-heading {
    max-width: none;
  }

  .vf-process-body,
  .vf-process-col:last-child .vf-process-body {
    width: 100%;
    max-width: 100%;
    padding: 12px 4px 0 4px;
  }
}

/*7 ============================
  FRAMEWORK BRANCHES | 
==================================== 
[VISUAL:framework-branches]
title: Methodological framework: three complementary approaches
targetText: Methodological framework

- color: yellow
  text: Inquiry-Based Learning (IBL)

- color: pink
  text: Project-Based Learning (PBL)

- color: orange
  text: Constructionist Learning (CL)

sideText: These approaches have a strong historical presence in **arts education, digital media education and creative technology contexts**.

sideText2: Each offers a distinct **lens for structuring learning processes**, supporting **meaning-making** and **guiding learners** as they use technological tools to express artistic ideas.
[/VISUAL]

targetImage: img/methodological-framework.svg
targetAlt: Methodological framework

*/

.vf-framework-branches {
  width: 100%;
  max-width: 1120px;
  margin: 2rem auto;
  font-family: inherit;
  box-sizing: border-box;
}

.vf-fb-title {
  margin: 0 0 1rem 0;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 700;
  text-align: left;
  color: var(--quaternary, #171940);
}

/* The side passage reads as a caption to the diagram, so it starts on the
   same line rather than floating at the vertical centre. The diagram
   column keeps centring its own octagon against the branches, because
   that alignment lives on .vf-fb-visual and is untouched by this. */
.vf-fb-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.vf-framework-branches.vf-fb-has-side .vf-fb-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr);
  column-gap: 24px;
}

.vf-framework-branches.vf-fb-no-side {
  max-width: 820px;
}

/* visual layout */
.vf-fb-visual {
  position: relative;
  z-index: 0;

  display: grid;
  /* The first track has to fit the octagon (150px). When it was narrower
     the shape overflowed its column and sat on top of the connector. The
     gap is the connector's run, so the two numbers below belong together:
     the bar spans the gap plus the 7px inset where the spine sits. */
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  min-width: 0;
}

.vf-fb-visual::before {
  display: none;
}

/* target / octagon */
.vf-fb-target {
  position: relative;
  z-index: 2;

  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vf-fb-target::after {
  display: none;
}

.vf-fb-target-text {
  position: relative;
  z-index: 3;

  width: 150px;
  min-height: 122px;
  padding: 16px 14px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--pulse-art-blue, #0219fc);
  color: #fff;

  clip-path: polygon(
    28% 0,
    72% 0,
    100% 28%,
    100% 72%,
    72% 100%,
    28% 100%,
    0 72%,
    0 28%
  );

  font-size: var(--fs-base);
  line-height: 1.35;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
}

.vf-fb-target-image img {
  position: relative;
  z-index: 3;

  width: 100%;
  max-width: 116px;
  height: auto;
  display: block;
}

/* branches */
.vf-fb-items {
  position: relative;
  z-index: 1;

  display: grid;
  gap: 10px;
  min-width: 0;
  padding-left: 24px;

  counter-reset: fb-step;
}

/* vertical spine */
/* The spine used to be one bar on the container with a fixed 31px inset,
   which only lined up while every ribbon was a single line high. Two-line
   ribbons made it overshoot past the top and bottom stubs. Each item now
   draws its own half-segments instead: from its centre down into the gap,
   and from the gap up to its centre. Consecutive halves meet in the gap,
   so the line runs from the first stub to the last whatever the heights. */
.vf-fb-item:not(:last-child)::after,
.vf-fb-item:not(:first-child) .vf-fb-ribbon::before {
  content: "";
  position: absolute;
  left: -17px;

  width: 3px;
  background: #8a8a8a;
  border-radius: 999px;
  z-index: 1;
}

.vf-fb-item:not(:last-child)::after {
  top: 50%;
  bottom: -5px; /* half the 10px grid gap */
}

.vf-fb-item:not(:first-child) .vf-fb-ribbon::before {
  top: -5px;
  bottom: 50%;
}

/* central connector: target/octagon to branch group */
.vf-fb-items::after {
  content: "";
  position: absolute;
  left: -30px; /* = the grid gap */
  top: 50%;
  transform: translateY(-50%);

  width: 37px; /* gap + the 7px inset where the spine sits */
  height: 3px;

  background: #8a8a8a;
  border-radius: 999px;
  z-index: 0;
}

.vf-fb-item {
  position: relative;
  min-width: 0;
  counter-increment: fb-step;
}

/* horizontal branch connectors */
.vf-fb-item::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);

  width: 15px;
  height: 3px;

  background: #8a8a8a;
  border-radius: 999px;
  z-index: 1;
}

.vf-fb-ribbon {
  position: relative;
  min-height: 58px;
  padding: 14px 50px 14px 18px;

  display: flex;
  align-items: center;

  border-radius: 10px;
  box-sizing: border-box;
  z-index: 2;
}

.vf-fb-text {
  font-size: var(--fs-base);
  line-height: 1.5;
  font-weight: 500;
  color: inherit;
}

.vf-fb-text strong {
  font-weight: 750;
}

/* number circle: same visual logic as the other diagrams */
.vf-fb-ribbon::after {
  content: counter(fb-step);
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);

  width: 26px;
  height: 26px;
  border-radius: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, .08);
  color: #111;

  font-size: var(--fs-xs);
  line-height: 1;
  font-weight: 700;
}

/* Reference under the branch column, and the one closing a side passage.
   Both come from "citation:" / "noteBreak:", never from inside the text. */
.vf-fb-citation {
  margin-top: 10px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #555;
  text-align: center;
}

.vf-fb-side-note {
  display: block;
  margin-top: 2px;
}

/* Pulse-Art colors */
.vf-fb-item.vf-yellow .vf-fb-ribbon {
  background: var(--pulse-art-yellow, #FFF000);
  color: #111;
}

.vf-fb-item.vf-orange .vf-fb-ribbon {
  background: var(--pulse-art-orange, #CD4B13);
  color: #fff;
}

.vf-fb-item.vf-pink .vf-fb-ribbon {
  background: var(--pulse-art-purple, #f5a9ed);
  color: #111;
}

.vf-fb-item.vf-blue .vf-fb-ribbon {
  background: var(--pulse-art-blue, #0219fc);
  color: #fff;
}

/* number contrast on dark boxes */
.vf-fb-item.vf-orange .vf-fb-ribbon::after,
.vf-fb-item.vf-blue .vf-fb-ribbon::after {
  background: rgba(255, 255, 255, .20);
  color: #fff;
}

.vf-fb-item.vf-yellow .vf-fb-ribbon::after,
.vf-fb-item.vf-pink .vf-fb-ribbon::after {
  background: rgba(0, 0, 0, .08);
  color: #111;
}

/* side text */
.vf-fb-side {
  min-width: 0;
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.5;
  font-weight: 400;
  color: var(--lesson-ink-soft, #111);
}

.vf-fb-side p {
  margin: 0 0 1rem 0;
}

.vf-fb-side p:last-child {
  margin-bottom: 0;
}

.vf-fb-side strong {
  font-weight: 750;
}


/* tablet / narrow desktop: diagram above, text below */
@media (max-width: 1200px) {
  .vf-framework-branches.vf-fb-has-side .vf-fb-layout,
  .vf-fb-layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .vf-fb-visual {
    grid-template-columns: 125px minmax(260px, 1fr);
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
  }

  .vf-fb-side {
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
  }
  .vf-fb-items {
    padding-left: 24px;
  }

  .vf-fb-item::before {
    left: -17px;
    width: 17px;
  }

  .vf-fb-items::after {
    left: -30px;
    width: 37px;
  }
}

/* mobile */
@media (max-width: 768px) {
  .vf-framework-branches,
  .vf-framework-branches.vf-fb-no-side {
    max-width: 420px;
  }

  .vf-framework-branches.vf-fb-has-side .vf-fb-layout,
  .vf-fb-layout {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .vf-fb-visual {
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;
    max-width: 420px;
  }

  .vf-fb-target-text {
    width: 150px;
    min-height: 118px;
  }

  .vf-fb-target-image img {
    max-width: 150px;
  }

  .vf-fb-items {
    width: 100%;
    padding-left: 0;
    justify-items: stretch;
    gap: 18px;
  }

  /* Stacked layout: one centred spine down the middle, so the per-item
     half-segments used on desktop are switched off here. */
  .vf-fb-item:not(:last-child)::after,
  .vf-fb-item:not(:first-child) .vf-fb-ribbon::before {
    display: none;
  }

  /* vertical mobile connector */
  .vf-fb-items::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -14px;
    bottom: 14px;
    width: 2px;
    background: #8a8a8a;
    border-radius: 999px;
    transform: translateX(-50%);
    z-index: 1;
  }

  /* hide desktop central connector */
  .vf-fb-items::after {
    display: none;
  }

  .vf-fb-item::before {
    left: 50%;
    top: -18px;
    transform: translateX(-50%);

    width: 2px;
    height: 18px;
  }

  .vf-fb-ribbon {
    min-height: auto;
    padding: 14px 50px 14px 16px;
    border-radius: 12px;
    text-align: center;
    justify-content: center;
  }

  .vf-fb-ribbon::after {
    width: 26px;
    height: 26px;
    right: 12px;
    font-size: var(--fs-xs);
  }

  .vf-fb-text {
    text-align: center;
  }
}



/* =====================================================
   FRAMEWORK BRANCHES — FLOW  ([VISUAL:framework-branches-flow])

   The renderer emitted seventeen vf-fbf-* classes and not one of them
   was ever styled, so the diagram came out as a stack of bare lines.
   Geometry and colours follow the plain framework-branches variant, and
   the target octagon is deliberately shared with it (.vf-fb-target-text)
   so the two diagrams stay identical where they overlap.

   Each row is one or two chevron segments. The notch is cut with
   clip-path, and the second segment overlaps the first by the width of
   that notch so the two read as one continuous arrow.
   ===================================================== */

.vf-framework-branches-flow {
  width: 100%;
  max-width: 1120px;
  margin: 2rem auto;
  font-family: inherit;
  box-sizing: border-box;
}

.vf-fbf-title {
  margin-bottom: 14px;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
}

.vf-fbf-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.vf-framework-branches-flow.vf-fbf-has-side .vf-fbf-layout {
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, .75fr);
  column-gap: 24px;
}

/* Octagon column plus the rows. Same track width and gap as the sibling
   diagram, so the two line up when they sit on consecutive slides. */
.vf-fbf-visual {
  position: relative;
  z-index: 0;

  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  min-width: 0;
}

.vf-fbf-main {
  min-width: 0;
}

.vf-fbf-rows {
  position: relative;
  display: grid;
  gap: 10px;
  min-width: 0;

  /* Room to the left for the spine and the stubs, same inset as the
     plain framework-branches variant so the two diagrams match. */
  padding-left: 24px;

  counter-reset: fbf-step;
}

/* Octagon to the spine: spans the 30px grid gap plus the 7px inset where
   the spine sits. */
.vf-fbf-rows::after {
  content: "";
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);

  /* 30px gap + 10px, so the bar runs through the spine instead of
     stopping against it — two rounded caps meeting exactly leave a
     visible nick at the join. */
  width: 40px;
  height: 3px;

  background: #8a8a8a;
  border-radius: 999px;
  z-index: 0;
}

/* Vertical spine, drawn as half-segments per row so it starts at the
   first stub and ends at the last whatever the row heights are. It
   cannot live on the ribbon: that has a clip-path, which would cut any
   pseudo-element positioned outside the chevron. */
.vf-fbf-row:not(:last-child)::after,
.vf-fbf-row:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -17px;

  width: 3px;
  background: #8a8a8a;
  border-radius: 999px;
  z-index: 1;
}

.vf-fbf-row:not(:last-child)::after {
  top: 50%;
  bottom: -5px; /* half the 10px grid gap */
}

.vf-fbf-row:not(:first-child)::before {
  top: -5px;
  bottom: 50%;
}

/* Stub from the spine into each row. */
.vf-fbf-row > .vf-fbf-item:first-child::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 50%;
  transform: translateY(-50%);

  /* Reaches the far side of the spine for the same reason. */
  width: 17px;
  height: 3px;

  background: #8a8a8a;
  border-radius: 999px;
  z-index: 1;
}

.vf-fbf-row {
  position: relative;
  display: grid;
  align-items: stretch;
  min-width: 0;
}

/* A paired row is one arrow split in two: the second segment starts
   under the first one's point, which is what makes them interlock. */
.vf-fbf-row-pair {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.vf-fbf-row-single {
  grid-template-columns: minmax(0, 1fr);
}

.vf-fbf-item {
  position: relative;
  min-width: 0;
  counter-increment: fbf-step;
}

/* 26px is the exact width of the notch, so overlapping by that much makes
   the two segments interlock seamlessly — and with a shared colour the
   join disappears entirely. Leaving 3px of it uncovered lets the page
   show through as a thin wedge, which is what marks 1 and 2 as separate
   steps rather than one long bar. */
.vf-fbf-item-second {
  margin-left: -23px;
}

/* The chevron. A notch on the left, a point on the right; the first
   segment of a row keeps a flat left edge where it meets the connector,
   and the last one is rounded off. */
.vf-fbf-ribbon {
  position: relative;
  height: 100%;
  min-height: 62px;
  padding: 14px 58px 14px 34px;

  display: flex;
  align-items: center;

  box-sizing: border-box;

  clip-path: polygon(
    0 0,
    calc(100% - 26px) 0,
    100% 50%,
    calc(100% - 26px) 100%,
    0 100%,
    26px 50%
  );
}

/* The first segment keeps the arrow tail the original has: a shallow
   wedge cut out of its left edge, smaller than the notch between
   segments so the row still reads as starting there. */
.vf-fbf-row > .vf-fbf-item:first-child .vf-fbf-ribbon {
  padding-left: 30px;

  clip-path: polygon(
    0 0,
    calc(100% - 26px) 0,
    100% 50%,
    calc(100% - 26px) 100%,
    0 100%,
    16px 50%
  );
}

.vf-fbf-text {
  font-size: var(--fs-base);
  line-height: 1.5;
  font-weight: 500;
  color: inherit;
}

.vf-fbf-text strong {
  font-weight: 750;
}

/* Number circle, continuous across both segments of a row. */
.vf-fbf-ribbon::after {
  content: counter(fbf-step);
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);

  width: 30px;
  height: 30px;
  border-radius: 50%;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #fff;
  color: #111;

  font-size: var(--fs-base);
  line-height: 1;
  font-weight: 700;
}

/* --- Leaf stack ("split:" on a row) ---
   The second segment becomes separate cards instead of one chevron, so
   a branch can fan out into two or three outcomes. The chevron notch is
   dropped here on purpose: a notch reads as "continues into", and these
   cards are siblings, not later steps. */
.vf-fbf-row-leaves {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  column-gap: 30px;
  align-items: center;
}

.vf-fbf-leaves {
  display: grid;
  gap: 10px;
  min-width: 0;
  position: relative;
}

.vf-fbf-leaf {
  position: relative;
  border-radius: 10px;
  padding: 11px 15px;
  font-size: 0.86rem;
  line-height: 1.35;
  font-weight: 600;
  min-width: 0;
}

/* Spine and stubs use the same 3px rounded grey as the octagon-to-branch
   connectors, so every line in the diagram reads as one system. The
   spine is drawn as half-segments per leaf — the same trick the branch
   rows use — so it begins at the first stub and ends at the last one
   whatever the card heights are. Fixed offsets left stray tails poking
   out above the first card and below the last. */
.vf-fbf-leaf:not(:last-child)::after,
.vf-fbf-leaf:not(:first-child)::before {
  content: "";
  position: absolute;
  left: -18px;

  width: 3px;
  background: #8a8a8a;
  border-radius: 999px;
}

.vf-fbf-leaf:not(:last-child)::after {
  top: 50%;
  bottom: -5px; /* half the 10px gap */
}

.vf-fbf-leaf:not(:first-child)::before {
  top: -5px;
  bottom: 50%;
}

/* Stub from the spine into each card. It lives on the inner text node
   because both of the card's own pseudo-elements are taken by the two
   spine halves above. */
.vf-fbf-leaf .vf-fbf-text::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);

  /* Runs through the spine rather than stopping against it: two rounded
     caps meeting exactly leave a visible nick at the join. */
  width: 18px;
  height: 3px;

  background: #8a8a8a;
  border-radius: 999px;
}

/* A single leaf has no spine, only its stub. */
.vf-fbf-leaves > .vf-fbf-leaf:only-child .vf-fbf-text::before {
  left: -18px;
}

/* Branch to its leaf spine. The chevron's point stops at the item's
   right edge and the spine sits 12px further on, leaving the two halves
   of the diagram visually unconnected. 15px so the bar runs through the
   spine instead of butting against it. The pseudo goes on the item and
   not the ribbon: the ribbon carries the chevron clip-path, which would
   cut anything drawn outside it. */
.vf-fbf-row-leaves > .vf-fbf-item:first-child::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);

  width: 15px;
  height: 3px;

  background: #8a8a8a;
  border-radius: 999px;
}

.vf-fbf-leaf.vf-yellow { background: var(--pulse-art-yellow, #FFF000); color: #111; }
.vf-fbf-leaf.vf-orange { background: var(--pulse-art-orange, #CD4B13); color: #fff; }
.vf-fbf-leaf.vf-pink   { background: var(--pulse-art-purple, #f5a9ed); color: #111; }
.vf-fbf-leaf.vf-blue   { background: var(--pulse-art-blue, #0219fc); color: #fff; }

@media (max-width: 768px) {
  .vf-fbf-row-leaves {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }

  /* Stacked on a narrow screen the connectors point nowhere. */
  .vf-fbf-leaf::before,
  .vf-fbf-leaf::after,
  .vf-fbf-leaf .vf-fbf-text::before,
  .vf-fbf-row-leaves > .vf-fbf-item:first-child::after {
    display: none;
  }
}

/* --- Panel surface ("panel: blue") ---
   Puts the diagram on a tinted board so it reads as its own section of
   the page. The tints are defined here rather than reused from the
   guidelines-grid palette because those custom properties are scoped to
   .vf-guidelines-grid and are not in scope on this element. */
.vf-framework-branches-flow.vf-fbf-panel {
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--fbf-panel-bg, #f2f4f7);
  box-sizing: border-box;
}

.vf-fbf-panel.vf-fbf-panel-grey   { --fbf-panel-bg: #f2f4f7; }
.vf-fbf-panel.vf-fbf-panel-blue   { --fbf-panel-bg: #e8f1fb; }
.vf-fbf-panel.vf-fbf-panel-pink   { --fbf-panel-bg: #fdeef9; }
.vf-fbf-panel.vf-fbf-panel-yellow { --fbf-panel-bg: #fdf7d9; }
.vf-fbf-panel.vf-fbf-panel-orange { --fbf-panel-bg: #fdeee6; }
.vf-fbf-panel.vf-fbf-panel-green  { --fbf-panel-bg: #e9f5ec; }
.vf-fbf-panel.vf-fbf-panel-purple { --fbf-panel-bg: #f0ebf8; }

@media (max-width: 768px) {
  .vf-framework-branches-flow.vf-fbf-panel {
    padding: 14px;
    border-radius: 14px;
  }
}

/* Pulse-Art colors — same values as framework-branches */
.vf-fbf-item.vf-yellow .vf-fbf-ribbon {
  background: var(--pulse-art-yellow, #FFF000);
  color: #111;
}

.vf-fbf-item.vf-orange .vf-fbf-ribbon {
  background: var(--pulse-art-orange, #CD4B13);
  color: #fff;
}

.vf-fbf-item.vf-pink .vf-fbf-ribbon {
  background: var(--pulse-art-purple, #f5a9ed);
  color: #111;
}

.vf-fbf-item.vf-blue .vf-fbf-ribbon {
  background: var(--pulse-art-blue, #0219fc);
  color: #fff;
}

/* Base bar under the rows, aligned with them rather than with the
   octagon, because it summarises the branches and not the whole. */
/* The bar and the reference used to live inside the same column as the
   rows, which meant the octagon centred itself against rows + bar +
   reference and ended up sitting too low. They are siblings now, and this
   offset — the octagon track plus the gap — keeps them lined up with the
   rows rather than with the whole diagram. */
.vf-fbf-below {
  margin-left: 180px;
}

.vf-fbf-base {
  margin-top: 10px;
  padding: 10px 18px;

  border-radius: 4px;
  text-align: center;

  font-size: var(--fs-base);
  line-height: 1.4;
  font-weight: 700;
}

.vf-fbf-base-yellow {
  background: var(--pulse-art-yellow, #FFF000);
  color: #111;
}

.vf-fbf-base-orange {
  background: var(--pulse-art-orange, #CD4B13);
  color: #fff;
}

.vf-fbf-base-pink {
  background: var(--pulse-art-purple, #f5a9ed);
  color: #111;
}

.vf-fbf-base-blue {
  background: var(--pulse-art-blue, #0219fc);
  color: #fff;
}

.vf-fbf-source {
  margin-top: 8px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #555;
  text-align: center;
}

/* tablet / narrow desktop: text below the diagram */
@media (max-width: 1200px) {
  .vf-framework-branches-flow.vf-fbf-has-side .vf-fbf-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .vf-framework-branches-flow .vf-fb-side {
    max-width: 620px;
    width: 100%;
    margin: 0 auto;
  }
}

/* mobile: the octagon on top, one segment per row, no chevrons —
   at this width the notches eat more space than they explain. */
@media (max-width: 768px) {
  .vf-fbf-visual {
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;
  }

  .vf-fbf-main {
    width: 100%;
  }

  .vf-fbf-rows {
    padding-left: 0;
  }

  .vf-fbf-below {
    margin-left: 0;
  }

  .vf-fbf-rows::after,
  .vf-fbf-row:not(:last-child)::after,
  .vf-fbf-row:not(:first-child)::before,
  .vf-fbf-row > .vf-fbf-item:first-child::before {
    display: none;
  }

  .vf-fbf-row-pair {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .vf-fbf-item-second {
    margin-left: 0;
  }

  .vf-fbf-ribbon,
  .vf-fbf-row > .vf-fbf-item:first-child .vf-fbf-ribbon {
    padding: 14px 52px 14px 16px;
    border-radius: 12px;
    clip-path: none;
  }
}




/* =====================================================
   ARC STEPS  ([VISUAL:arc-steps])

   Figure on the left, one panel per numbered segment on the right. The
   panels are stepped with a CSS variable set per panel by the renderer
   (--vf-as-step, 1 at the ends and 0 in the middle), so the column bows
   out to follow the curve of the figure while every panel stays in
   normal flow. Nothing is absolutely positioned, which is what lets a
   longer translation make its panel taller rather than overlap the next
   one, and lets the whole thing become a flat column on a phone.
   ===================================================== */

.vf-arc-steps {
  width: 100%;
  max-width: 1120px;
  margin: 2rem auto;
  font-family: inherit;
  box-sizing: border-box;
}

.vf-as-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: 24px;
  align-items: center;
}

/* The figure and the label that sits in its hollow. */
.vf-as-figure {
  position: relative;
  display: flex;
  justify-content: center;
  min-width: 0;
}

/* Wrapper the shared svg-shapes layer hydrates; the width set by
   "imageWidth:" lands here so the whole svg scales with it. */
.vf-as-shapes {
  position: relative;
  margin-inline: auto;
}

.vf-as-image {
  display: block;
  width: 100%;
  height: auto;
}

/* The half-moon opens to the left, so its hollow is a little left of
   centre and halfway down. Percentages, so the label follows the figure
   at any width. */
.vf-as-center {
  position: absolute;
  left: 20%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 8em;
  text-align: center;

  font-size: 0.95rem;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--gg-blue-accent, #1b3fa0);
}

.vf-as-panels {
  display: grid;
  gap: 8px;
  min-width: 0;
}

/* --vf-as-step runs 1 -> 0 -> 1 down the list. The end panels give up
   the full indent, the middle one none, so the left edges trace a curve
   that opens towards the figure. */
.vf-as-panel {
  display: flex;
  align-items: center;
  gap: 10px;

  /* How far the end panels pull left of the middle one. Big enough that
     the stagger reads as a curve rather than as a misalignment; the
     panels keep a common right edge, so only this side steps. */
  margin-left: calc(var(--vf-as-step, 0) * -1 * var(--vf-as-reach, 84px));
  padding: 9px 16px;

  /* A saturated bar in the segment's own colour. The panel tint is pale
     so the text stays readable, which makes it a weak link back to the
     figure; this bar carries the full colour and does the matching. */
  border-left: 6px solid var(--vf-as-accent, transparent);
  border-radius: 4px 12px 12px 4px;

  box-sizing: border-box;
  min-width: 0;
}

/* Το .vf-as-num το χρησιμοποιούν ΔΥΟ διαγράμματα, το arc-steps κι εδώ
   και το arrow-steps παρακάτω. Χωρίς περιορισμό στο δικό του section, ο
   κανόνας του arrow-steps (display: block) υπερίσχυε επειδή έρχεται
   αργότερα, και ακύρωνε το inline-flex — ο αριθμός έβγαινε πάνω αριστερά
   αντί για το κέντρο του κύκλου. */
.vf-arc-steps .vf-as-num {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: rgba(0, 0, 0, 0.12);

  font-size: var(--fs-xs);
  line-height: 1;
  font-weight: 700;
}

.vf-as-body {
  min-width: 0;
}

/* Περιορισμένο στο arc-steps: το ίδιο όνομα ορίζεται ξανά στο
   arrow-steps παρακάτω, που σήμερα κέρδιζε ως μεταγενέστερο και έδινε
   στους τίτλους των καρτών το μέγεθος του ΤΙΤΛΟΥ ΔΙΑΓΡΑΜΜΑΤΟΣ. */
.vf-arc-steps .vf-as-title {
  margin-bottom: 2px;
  font-size: var(--fs-base);
  line-height: 1.35;
  font-weight: 800;
}


.vf-arc-steps .vf-as-text {
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--fs-base);
  line-height: 1.45;
  color: #1c1c1c;
}

.vf-arc-steps .vf-as-source {
  margin-top: 10px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #555;
  text-align: right;
}

/* Panel tints, matching the palette used by the other diagrams. */
/* Two colours per panel: the pale tint for the background, and the strong
   one for the left bar, which is the shade actually used in the figure. */
.vf-as-panel.vf-as-yellow {
  background: var(--gg-yellow-light, #fdf3d0);
  --vf-as-accent: var(--pulse-art-yellow, #FFF000);
}

.vf-as-panel.vf-as-orange {
  background: var(--gg-orange-light, #fbe0d3);
  --vf-as-accent: #ff5c00;
}

.vf-as-panel.vf-as-blue {
  background: var(--gg-blue-light, #d6e6f7);
  --vf-as-accent: var(--pulse-art-blue, #0219fc);
}

.vf-as-panel.vf-as-pink {
  background: var(--gg-pink-light, #f9dced);
  --vf-as-accent: var(--pulse-art-purple, #f5a9ed);
}

.vf-as-panel.vf-as-green {
  background: var(--gg-green-light, #dcecd9);
  --vf-as-accent: var(--gg-green-accent, #14532d);
}

.vf-as-panel.vf-as-purple {
  background: var(--gg-purple-light, #e2dcee);
  --vf-as-accent: var(--gg-purple-accent, #4b2e83);
}

.vf-as-panel.vf-as-none {
  background: transparent;
  --vf-as-accent: #bbb;
}

.vf-as-panel.vf-as-yellow .vf-as-title { color: var(--gg-yellow-accent, #7a5c00); }
.vf-as-panel.vf-as-orange .vf-as-title { color: var(--gg-orange-accent, #8f3007); }
.vf-as-panel.vf-as-blue   .vf-as-title { color: var(--gg-blue-accent,   #1b3fa0); }
.vf-as-panel.vf-as-pink   .vf-as-title { color: var(--gg-pink-accent,   #8e1c5e); }
.vf-as-panel.vf-as-green  .vf-as-title { color: var(--gg-green-accent,  #14532d); }
.vf-as-panel.vf-as-purple .vf-as-title { color: var(--gg-purple-accent, #4b2e83); }

/* Narrower: keep the two columns but pull the step in, or the shortest
   panel ends up too narrow to hold a line of text. */
@media (max-width: 1100px) {
  .vf-as-panel {
    --vf-as-reach: 48px;
  }
}

/* Phone: figure on top, panels flat underneath. The stepped indent is
   meaningless once the figure is no longer beside them. */
@media (max-width: 820px) {
  .vf-as-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .vf-as-figure {
    max-width: 320px;
    margin: 0 auto;
  }

  .vf-as-panel {
    --vf-as-reach: 0px;
    margin-left: 0;
  }
}


/* =====================================================
   FEATURE FLOW UP — CARDS  ([VISUAL:feature-flow-up])

   Per the diagram guide: same syntax as feature-flow, cards without the
   arrows between them. The renderer emits its own class names
   (.vf-feature-flow-up-title / -grid, .vf-up-card and children), and the
   only rule in the stylesheet that mentioned this diagram was
   `.vf-feature-flow.vf-feature-flow-up`, which needs BOTH classes — but
   the section carries just `vf-diagram vf-feature-flow-up`, so it never
   matched and the cards came out as bare text.

   Geometry follows .vf-feature-flow: same max-width, same 4-up grid,
   same white panel with a coloured top border. Only the connecting
   arrows are absent, which is the whole point of the variant.
   ===================================================== */

.vf-feature-flow-up {
  width: 100%;
  max-width: 1180px;
  margin: 2rem auto;
  font-family: inherit;
  box-sizing: border-box;
}

.vf-feature-flow-up-title {
  margin-bottom: 14px;
  font-size: 1rem;
  line-height: 1.35;
  font-weight: 700;
  color: var(--quaternary, #171940);
}

.vf-feature-flow-up-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.vf-up-card {
  position: relative;
  min-width: 0;
  height: 100%;
}

.vf-up-card-inner {
  height: 100%;
  padding: 18px 16px;

  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .16);

  border-top: 6px solid var(--quaternary, #171940);
  box-sizing: border-box;
}

.vf-up-card-text {
  font-size: var(--fs-base);
  line-height: 1.6;
  font-weight: 400;
  color: var(--lesson-ink-soft, #111);

  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.vf-up-card-text strong {
  font-weight: 750;
}

/* Card accents — same colours as the feature-flow panels */
.vf-up-card.vf-yellow .vf-up-card-inner {
  border-top-color: var(--pulse-art-yellow, #FFF000);
}

.vf-up-card.vf-orange .vf-up-card-inner {
  border-top-color: var(--pulse-art-orange, #CD4B13);
}

.vf-up-card.vf-pink .vf-up-card-inner {
  border-top-color: var(--pulse-art-purple, #f5a9ed);
}

.vf-up-card.vf-blue .vf-up-card-inner {
  border-top-color: var(--pulse-art-blue, #0219fc);
}

.vf-up-card.vf-green .vf-up-card-inner {
  border-top-color: var(--pulse-art-green, #0E9F6E);
}

.vf-up-card.vf-teal .vf-up-card-inner {
  border-top-color: var(--pulse-art-teal, #0694A2);
}

.vf-up-card.vf-red .vf-up-card-inner {
  border-top-color: var(--pulse-art-red, #E02424);
}

.vf-up-card.vf-violet .vf-up-card-inner {
  border-top-color: var(--pulse-art-violet, #6941C6);
}

/* Three across before the cards get too narrow to hold a sentence. */
@media (max-width: 1000px) {
  .vf-feature-flow-up-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .vf-feature-flow-up-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* The live path renders feature-flow-up through renderFeatureFlowDiagram,
   so the markup is `vf-feature-flow vf-feature-flow-up` with an inline
   grid-template-columns. Inline styles beat the stylesheet, hence
   !important. Below 769px the existing mobile block already forces a
   single column. */
@media (min-width: 769px) and (max-width: 1024px) {
  .vf-feature-flow.vf-feature-flow-up .vf-feature-flow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* =====================================================
   FEATURE FLOW UP CARDS
   Reference-style independent upward value cards.
   Separate from .vf-feature-flow, so no connector arrows leak in.

   AUTHORING SYNTAX: see the "FEATURE FLOW / FEATURE FLOW UP —
   authoring guide" comment above parseFeatureFlowBlock() in
   visual-diagrams.js. It is the single source of truth for keys,
   colours and gotchas; do not copy it here, it will drift.

   Eight accent colours are wired up in this file:
     yellow  orange  pink  blue  green  teal  red  violet
   Adding a ninth means a rule in five places — panel border-top,
   forward arrow, reverse arrow, both mobile arrow blocks — plus the
   name in VF_PANEL_COLORS in the JS, or it silently falls back.
   ===================================================== */


.vf-feature-flow.vf-feature-flow-up .vf-panel::before,
.vf-feature-flow.vf-feature-flow-up .vf-panel::after {
  content: "" !important;
  display: none !important;

  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;

  width: 0 !important;
  height: 0 !important;

  transform: none !important;

  border: 0 !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  border-left: 0 !important;
}

/* Mobile: also no arrows */
@media (max-width: 768px) {
  .vf-feature-flow.vf-feature-flow-up .vf-panel::before,
  .vf-feature-flow.vf-feature-flow-up .vf-panel::after {
    content: "" !important;
    display: none !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: 0 !important;
    height: 0 !important;

    transform: none !important;

    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
  }
}

/* ===============================
   IMAGE + TEXT VISUAL
   =============================== 

Digital tools (e.g. **generative algorithms, visual coding, datasets**) become **objects of inquiry**.

The same **question-driven approach** used in STEM applies directly:

- “How does this algorithm transform the image?”
- “What visual pattern emerges if the parameters change?”

[VISUAL:image-text]
layout: center
image: content/img/module4/cubes.png
imageAlt: Three connected cubes

leftTitle: In STEM
leftText: Inquiry structures how learners **examine phenomena, test variables and interpret patterns** (NRC, 2012).

rightTitle: In Art
rightIntro: Artistic inquiry examines:
rightItems:
- **how meaning is created**
- **how materials behave**
- **how cultural context shapes visual form**
[/VISUAL]
   
   
   
   
   */

.vf-image-text {
  width: 100%;
  max-width: 880px;
  margin: 1.2rem auto 1.6rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  font-family: inherit;
  box-sizing: border-box;
}

.vf-it-left {
  text-align: center;
}

.vf-it-right {
  text-align: left;
}

.vf-it-left h4,
.vf-it-right h4 {
  margin: 0 0 0.6rem;
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 800;
  color: var(--quaternary, #171940);
}

.vf-it-left p,
.vf-it-right p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--lesson-ink-soft, #111);
}

.vf-it-right ul {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

.vf-it-right li {
  margin-bottom: 0.25rem;
  font-size: var(--fs-base);
  line-height: 1.35;
}

.vf-it-left strong,
.vf-it-right strong,
.vf-it-right li strong {
  font-weight: 800;
}

.vf-it-image {
  text-align: center;
}
/*ιμαγε σιζε*/
.vf-it-image img {
  width: 100%;
  max-width: 210px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* image left */
.vf-image-text-left {
  grid-template-columns: 210px minmax(0, 1fr) minmax(0, 1fr);
}

.vf-image-text-left .vf-it-image {
  grid-column: 1;
  grid-row: 1;
}

.vf-image-text-left .vf-it-left {
  grid-column: 2;
}

.vf-image-text-left .vf-it-right {
  grid-column: 3;
}

/* image right */
.vf-image-text-right {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 210px;
}

.vf-image-text-right .vf-it-left {
  grid-column: 1;
}

.vf-image-text-right .vf-it-right {
  grid-column: 2;
}

.vf-image-text-right .vf-it-image {
  grid-column: 3;
  grid-row: 1;
}
.vf-it-left,
.vf-it-right,
.vf-it-image {
  align-self: start;
}

.vf-it-left h4,
.vf-it-right h4 {
  margin-top: 0;
}

/* mobile */
@media (max-width: 768px) {
  .vf-image-text,
  .vf-image-text-left,
  .vf-image-text-right {
    max-width: 360px;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 1rem auto 1.4rem;
    text-align: center;
  }

  .vf-it-left,
  .vf-it-right {
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
  }

  .vf-it-image {
    margin: 0.2rem auto 0.4rem;
  }

  .vf-it-image img {
    width: 100%;
    max-width: 250px;
    margin: 0 auto;
  }

  .vf-it-left h4,
  .vf-it-right h4 {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    line-height: 1.2;
  }

  .vf-it-left p,
  .vf-it-right p {
    font-size: var(--fs-sm);
    line-height: 1.45;
  }

  .vf-it-right ul {
    display: inline-block;
    max-width: 300px;
    margin: 0.55rem auto 0;
    padding-left: 1.1rem;
    text-align: left;
  }

  .vf-it-right li {
    margin-bottom: 0.35rem;
    font-size: var(--fs-sm);
    line-height: 1.35;
  }
  .vf-it-image {
  order: 1;
}

.vf-it-left {
  order: 2;
}

.vf-it-right {
  order: 3;
}
}

/* ===============================
   TEXT + IMAGE REUSABLE BLOCK
   =============================== 
   
   [VISUAL:text-image]
layout: image-left
image: content/img/module4/steam-framework.png
imageAlt: STEAM framework diagram
imageWidth: 320px

text:
The three approaches introduced—**Inquiry-Based Learning (IBL), Project-Based Learning (PBL) and Constructionist Learning (CL)**—form the **pedagogical foundation** for how learners explore, design and create with technology.

When these processes are combined with **artistic expression, cultural meaning and aesthetic decision-making**, they naturally evolve into a **STEAM framework**.
[/VISUAL]
   
   */

.vf-text-image {
  width: 100%;
  max-width: 1040px;
  margin: 1.4rem auto 1.8rem;
  display: grid;
  gap: 42px;
  align-items: start;
  font-family: inherit;
  box-sizing: border-box;
}

/* Grid items default to min-width: auto, meaning they refuse to
   shrink below their content's natural size — this is what let
   long captions / broken-image alt text push past the card edge.
   min-width: 0 lets the column actually clip/wrap content instead. */
.vf-ti-text,
.vf-ti-image {
  min-width: 0;
}

.vf-text-image-image-right {
  grid-template-columns: minmax(0, 1.35fr) var(--vf-ti-image-width, 230px);
}

.vf-text-image-image-left {
  grid-template-columns: var(--vf-ti-image-width, 230px) minmax(0, 1.35fr);
}
.vf-text-image-image-left .vf-ti-image {
  grid-column: 1;
  grid-row: 1;
}

.vf-text-image-image-left .vf-ti-text {
  grid-column: 2;
  grid-row: 1;
}

/* "layout: center" — one column, text first and the image centred
   underneath it. For pictures that illustrate the whole passage rather
   than sit beside it, and for tall or wide images that would squeeze
   the text column at any side width. The renderer passes the layout
   name straight through as a class, so this needs no JS. */
.vf-text-image-center {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
}

.vf-text-image-center .vf-ti-text {
  grid-column: 1;
  grid-row: 1;
}

.vf-text-image-center .vf-ti-image {
  grid-column: 1;
  grid-row: 2;

  /* The width set by "imageWidth:" still applies, but as a cap on a
     centred block rather than as a column track. */
  width: var(--vf-ti-image-width, 230px);
  max-width: 100%;
  justify-self: center;
}

@media (max-width: 700px) {
  .vf-text-image-center {
    gap: 14px;
  }
}
/* "highlight: N" — one point and its sub-points pulled out with a band
   behind them, the way the slides mark the method list.

   The band reaches left with a thick border in its own colour rather
   than with padding: padding would push the text right, out of line
   with the points above and below, while a border plus a matching
   negative margin extends the paint and leaves the text exactly where
   it was. The sub-list is nested inside the item, so one background
   covers the whole group. */
li.vf-li-highlight {
  margin: 10px 0 10px calc(-1 * var(--vf-li-highlight-pull, 2.2em));
  padding: 10px 14px 10px 0;
  border-left: var(--vf-li-highlight-pull, 2.2em) solid var(--vf-li-highlight-bg, #f26a1b);

  background: var(--vf-li-highlight-bg, #f26a1b);

  /* The marker would sit outside the band, alone on the white margin. */
  list-style: none;
}

/* Everything inside goes white. Stated for each element and boosted with
   the ID, because the theme colours list items and paragraphs from
   #content-area rules that outweigh any number of classes. */
li.vf-li-highlight,
li.vf-li-highlight *,
#content-area li.vf-li-highlight,
#content-area li.vf-li-highlight *,
#content-area .lesson-card li.vf-li-highlight,
#content-area .lesson-card li.vf-li-highlight * {
  color: #fff !important;
}

.vf-td-text li.vf-li-highlight > ul,
.vf-ti-text li.vf-li-highlight > ul {
  margin: 6px 0 0;
  padding-left: 1.2em;
  list-style: disc outside;
}

li.vf-li-highlight > ul > li::marker {
  color: rgba(255, 255, 255, 0.85);
}

/* Second-level points inside a text column. Written for .vf-td-text and
   .vf-ti-text rather than for ul ul in general, so the theme's own lists
   elsewhere on the page are untouched. The marker changes shape and the
   indent is modest: in a half-width column a deep indent wastes the line
   the sub-point needs. */
.vf-td-text ul ul,
.vf-ti-text ul ul {
  margin: 4px 0 8px;
  padding-left: 1.2em;
  list-style: circle outside;
}

.vf-td-text ul ul li,
.vf-ti-text ul ul li {
  margin-bottom: 3px;
}

/* "quote: on" — the text column is a pull quote. Marks are drawn with
   pseudo-elements rather than typed into the source, so each language
   keeps the punctuation its own typography calls for and the translated
   string stays clean. */
.vf-ti-text.vf-ti-quote {
  /* A rule down the left edge, the way a pulled quotation is usually
     set. On the bar rather than on each paragraph, so a quote that runs
     to two paragraphs gets one continuous line instead of two stubs. */
  padding-left: 16px;

  /* Neutral grey, so the rule works next to any image and in any of the
     modules without picking up a colour that means something elsewhere.
     Override with --vf-ti-quote-rule where a slide wants its accent. */
  border-left: 4px solid var(--vf-ti-quote-rule, #c9c9c9);
}

.vf-ti-text.vf-ti-quote p {
  font-style: italic;
}

.vf-ti-text.vf-ti-quote p:first-child::before {
  content: open-quote;
}

.vf-ti-text.vf-ti-quote p:last-child::after {
  content: close-quote;
}

.vf-ti-text.vf-ti-quote {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

/* Two or more "image:" lines share the column. Equal widths rather than
   natural ones, so a tall picture next to a wide one still lines up at
   top and bottom instead of leaving a step. */
.vf-ti-images {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.vf-ti-images img {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: auto;
}

@media (max-width: 700px) {
  .vf-ti-images {
    flex-direction: column;
  }
}

/* "video:" — the player takes the image column, so it must behave like
   the image: full column width, and a fixed 16:9 box so the layout does
   not jump while the iframe loads. */
.vf-ti-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #000;
}

.vf-ti-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.vf-ti-caption {
  margin-top: 4px;
  font-size: var(--fs-sm);
  line-height: 1.35;
  font-weight: 400;
  color: #777;
  text-align: center;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

/* Shared paragraph typography for text-image and text-coded-arrows */
.vf-ti-text,
.vf-tca-copy {
  max-width: 620px;
}

.vf-ti-text p,
.vf-tca-copy p {
  margin: 0 0 1rem;
  font-size: var(--fs-base);
  line-height: 1.55;
  font-weight: 400;
  color: var(--lesson-ink-soft, #111);
}

.vf-ti-text p:last-child,
.vf-tca-copy p:last-child {
  margin-bottom: 0;
}

/* Bullet lists inside text-image: same typography as the paragraphs */
.vf-ti-text ul {
  margin: 0 0 1rem;
  padding: 0 0 0 1.15em;
  list-style: disc;
}

.vf-ti-text ul li {
  margin: 0 0 0.6rem;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--lesson-ink-soft, #111);
}

.vf-ti-text ul li:last-child {
  margin-bottom: 0;
}

.vf-ti-text ul:last-child {
  margin-bottom: 0;
}

.vf-ti-text strong,
.vf-tca-copy strong {
  font-weight: 700;
}

.vf-ti-image {
  text-align: center;
  overflow: hidden;         /* clips any oversized broken-image fallback */
  max-width: 100%;
}

.vf-ti-image img {
  width: 100%;
  max-width: var(--vf-ti-image-width, 230px);
  height: auto;
  min-height: 40px;         /* keeps broken-image icon/alt text boxed */
  display: block;
  margin: 0 auto;
  overflow: hidden;
  overflow-wrap: anywhere;
  object-fit: cover;
}
/* γκρι κουτί μόνο όταν η εικόνα δεν φορτώνει (το βάζει το visual-diagrams.js) */
.vf-ti-image img.vf-img-broken {
  background: #f2f2f2;
}
/* Mobile */
@media (max-width: 768px) {
  .vf-text-image,
  .vf-text-image-image-right,
  .vf-text-image-image-left {
    max-width: 420px;
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 1rem auto 1.5rem;
    text-align: left;
  }

  .vf-text-image-image-left .vf-ti-image,
  .vf-text-image-image-left .vf-ti-text {
    grid-column: auto;
    grid-row: auto;
  }

.vf-ti-text,
  .vf-tca-copy {
    max-width: 360px;
    margin: 0 auto;
    text-align: left;
  }

  .vf-ti-text p,
  .vf-tca-copy p {
    font-size: var(--fs-base);
    line-height: 1.55;
  }

  /* Optional Markdown setting: showImageOnMobile: no */
  .vf-ti-image.vf-ti-image-hide-mobile {
    display: none;
  }
}

/* ===============================
   TEXT + CODED ARROWS left or right
   =============================== 
[VISUAL:text-coded-arrows]
layout: arrows-right

text:
Visual and digital arts create learning environments where students **explore ideas, make meaning, collaborate, reflect and interpret multimodal content**. These environments directly support the **five learner competencies** described in the PULSE-ART framework.

- color: pink
  code: L1
  text: **Creative & Reflective Thinking**
  link: page-l1.html

- color: orange
  code: L2
  text: **Cultural Literacy & Awareness**
  link: page-l2.html

- color: blue
  code: L3
  text: **Personal & Collective Expression**
  link: page-l3.html

- color: orange
  code: L4
  text: **Collaborative Creation & Dialogue**
  link: page-l4.html

- color: pink
  code: L5
  text: **Critical Engagement & Interpretation**
  link: page-l5.html
[/VISUAL]

link: https://example.com/page-l1
   link: module2-slide15.html
   target="_blank" rel="noopener noreferrer"
   
   
   */

/* ===============================
   TEXT + CODED ARROWS
   =============================== */

.vf-text-coded-arrows {
  width: 100%;
  max-width: 980px;
  margin: 1.2rem auto 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 34px;
  align-items: start;
  font-family: inherit;
  box-sizing: border-box;
  overflow: hidden;
}

/* arrows/list on the left */
.vf-text-coded-arrows-arrows-left {
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
}

.vf-text-coded-arrows-arrows-left .vf-tca-list {
  grid-column: 1;
  grid-row: 1;
}

.vf-text-coded-arrows-arrows-left .vf-tca-copy {
  grid-column: 2;
  grid-row: 1;
}

/* arrows/list on the right */
.vf-text-coded-arrows-arrows-right .vf-tca-copy {
  grid-column: 1;
  grid-row: 1;
}

.vf-text-coded-arrows-arrows-right .vf-tca-list {
  grid-column: 2;
  grid-row: 1;
}

/* paragraph text */
.vf-tca-copy {
  max-width: 620px;
}

.vf-tca-copy p {
  margin: 0 0 0.85rem;
  font-size: var(--fs-base);
  line-height: 1.55;
  font-weight: 400;
  color: var(--lesson-ink-soft, #111);
}

.vf-tca-copy p:last-child {
  margin-bottom: 0;
}

.vf-tca-copy strong {
  font-weight: 700;
}

/* arrows list */
.vf-tca-list {
  display: grid;
  gap: 0;
  width: 100%;
  min-width: 0;
}

/* arrow item */
.vf-tca-item {
  min-height: 52px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: stretch;

  clip-path: polygon(
    0 0,
    calc(100% - 24px) 0,
    100% 50%,
    calc(100% - 24px) 100%,
    0 100%
  );

  overflow: hidden;
  box-sizing: border-box;

  text-decoration: none;
  color: inherit;
}

/* only linked arrows react */
.vf-tca-item:not(.vf-tca-disabled) {
  cursor: pointer;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    filter 0.18s ease;
}

/* non-linked arrows stay static */
.vf-tca-item.vf-tca-disabled {
  cursor: default;
}

.vf-tca-item:not(.vf-tca-disabled):visited,
.vf-tca-item:not(.vf-tca-disabled):hover,
.vf-tca-item:not(.vf-tca-disabled):active {
  color: inherit;
  text-decoration: none;
}

.vf-tca-item:not(.vf-tca-disabled):hover,
.vf-tca-item:not(.vf-tca-disabled):focus-visible {
  opacity: 0.72;
  filter: saturate(1.08);
}

.vf-text-coded-arrows-arrows-right .vf-tca-item:not(.vf-tca-disabled):hover,
.vf-text-coded-arrows-arrows-right .vf-tca-item:not(.vf-tca-disabled):focus-visible {
  transform: translateX(3px);
}

.vf-text-coded-arrows-arrows-left .vf-tca-item:not(.vf-tca-disabled):hover,
.vf-text-coded-arrows-arrows-left .vf-tca-item:not(.vf-tca-disabled):focus-visible {
  transform: translateX(-3px);
}

.vf-tca-item:not(.vf-tca-disabled):focus-visible {
  outline: 2px solid #222;
  outline-offset: 3px;
}

/* code block */
.vf-tca-code {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: var(--fs-base);
  line-height: 1.2;
  font-weight: 400;
  letter-spacing: 0;
}

/* arrow body */
.vf-tca-body {
  min-width: 0;
  display: flex;
  align-items: center;
}

.vf-tca-text {
  min-width: 0;
  width: 100%;
  padding: 8px 28px 8px 12px;

  font-size: var(--fs-sm);
  line-height: 1.25;
  font-weight: 600;

  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;

  box-sizing: border-box;
}

.vf-tca-text strong {
  font-weight: 700;
}

/* yellow / pink = black text */
.vf-tca-yellow {
  background: var(--pulse-art-yellow, #FFF000);
  color: #111;
}

.vf-tca-pink {
  background: var(--pulse-art-purple, #f5a9ed);
  color: #111;
}

.vf-tca-yellow .vf-tca-code,
.vf-tca-pink .vf-tca-code {
  color: rgba(0, 0, 0, 0.65);
  background: rgba(0, 0, 0, 0.10);
}

.vf-tca-yellow .vf-tca-text,
.vf-tca-yellow .vf-tca-text strong,
.vf-tca-pink .vf-tca-text,
.vf-tca-pink .vf-tca-text strong {
  color: #111;
}

/* orange / blue = white text */
.vf-tca-orange {
  background: var(--pulse-art-orange, #CD4B13);
  color: #fff;
}

.vf-tca-blue {
  background: var(--pulse-art-blue, #0219fc);
  color: #fff;
}

.vf-tca-orange .vf-tca-code,
.vf-tca-blue .vf-tca-code {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.18);
}

.vf-tca-orange .vf-tca-text,
.vf-tca-orange .vf-tca-text strong,
.vf-tca-blue .vf-tca-text,
.vf-tca-blue .vf-tca-text strong {
  color: #fff;
}

/* mobile */
@media (max-width: 768px) {
  .vf-text-coded-arrows,
  .vf-text-coded-arrows-arrows-left,
  .vf-text-coded-arrows-arrows-right {
    max-width: 420px;
    grid-template-columns: 1fr;
    gap: 22px;
    margin: 1rem auto 1.5rem;
  }

  .vf-text-coded-arrows-arrows-left .vf-tca-list,
  .vf-text-coded-arrows-arrows-left .vf-tca-copy,
  .vf-text-coded-arrows-arrows-right .vf-tca-list,
  .vf-text-coded-arrows-arrows-right .vf-tca-copy {
    grid-column: auto;
    grid-row: auto;
  }

  .vf-tca-copy {
    max-width: 620px;
  }

  .vf-tca-copy p {
    margin: 0 0 0.85rem;
    font-size: var(--fs-base);
    line-height: 1.55;
    font-weight: 400;
    color: var(--lesson-ink-soft, #111);
  }

  .vf-tca-copy p:last-child {
    margin-bottom: 0;
  }

  .vf-tca-copy strong {
    font-weight: 700;
  }

  .vf-tca-list {
    max-width: 340px;
    margin: 0 auto;
  }

  .vf-tca-item {
    min-height: 50px;
    grid-template-columns: 50px minmax(0, 1fr);
    clip-path: none;
    border-radius: 0;
  }

  .vf-tca-code {
    font-size: var(--fs-sm);
  }

  .vf-tca-text {
    padding: 8px 12px;
    font-size: var(--fs-sm);
    line-height: 1.25;
  }

  .vf-text-coded-arrows-arrows-right .vf-tca-item:not(.vf-tca-disabled):hover,
  .vf-text-coded-arrows-arrows-right .vf-tca-item:not(.vf-tca-disabled):focus-visible,
  .vf-text-coded-arrows-arrows-left .vf-tca-item:not(.vf-tca-disabled):hover,
  .vf-text-coded-arrows-arrows-left .vf-tca-item:not(.vf-tca-disabled):focus-visible {
    transform: none;
  }
}

/* ===============================
   CODED ARROWS + TARGET BULLETS
   =============================== 
   [VISUAL:coded-arrows-target]
bottomText: This shift supports contexts such as **digital arts**, where technical understanding and artistic meaning-making **must be developed together**.

- color: yellow
  code: 01
  text: STEM research (NRC, 2012; Bybee, 2013; OECD, 2019) describes a framework for developing **Knowledge, Skills, Attitudes and Values (KSAV)** in:
  target: scientific reasoning; technological understanding; engineering design; mathematical modelling

- color: pink
  code: 02
  text: STEAM frameworks (Yakman, 2008; Liao, 2016; Hetland et al., 2013; Peppler, 2010–2019) show that when learning also requires:
  target: artistic expression and aesthetic decision-making; creative ideation and cultural interpretation

- color: blue
  code: 03
  text: Moving from STEM to STEAM means **extending the KSAV foundation of STEM** with additional STEAM dimensions:
  target: understanding **meaning and representation**; engaging with **cultural and visual literacy**; using **creativity and expression** to shape digital artefacts
[/VISUAL]
   
   */

.vf-coded-arrows-target {
  width: 100%;
  max-width: 980px;
  margin: 1.2rem auto 1.5rem;
  font-family: inherit;
  box-sizing: border-box;
}

.vf-cat-layout {
  display: grid;
  gap: 0;
  min-width: 0;
}

/* "targetText:" puts an octagon beside the rows. It reuses the shape from
   framework-branches (.vf-fb-target-text) so the two diagrams match where
   they overlap, and sits in its own track here. */
.vf-cat-frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-width: 0;
}

.vf-cat-has-target .vf-cat-frame {
  /* The gap is where the connectors are drawn, so its width and the
     offsets below are one measurement: --vf-cat-gap to the row's left
     edge, and half the octagon (75px) further to its centre line. */
  --vf-cat-gap: 30px;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: var(--vf-cat-gap);
}

/* Lines from the octagon to each arrow. The middle one runs straight out
   of the right face; the outer two drop from the centre line, which is
   where the top and bottom faces sit, and then turn towards their arrow.

   The verticals are one row tall, which assumes the three rows are of
   equal height. They are: the arrows carry short labels and share a
   min-height. A row that grew taller than its neighbours would leave a
   small gap at the corner. */
.vf-cat-has-target .vf-cat-row {
  position: relative;
}

.vf-cat-has-target .vf-cat-row::before,
.vf-cat-has-target .vf-cat-row::after {
  content: "";
  position: absolute;
  background: #8a8a8a;
  border-radius: 999px;
  z-index: 0;
}

/* Horizontal arm into the arrow. */
.vf-cat-has-target .vf-cat-row::before {
  top: 50%;
  transform: translateY(-50%);
  height: 3px;
  left: calc(-1 * (var(--vf-cat-gap) + 75px));
  width: calc(var(--vf-cat-gap) + 75px);
}

/* The middle row meets the right face, so its arm is short. */
.vf-cat-has-target .vf-cat-row:nth-child(2)::before {
  left: calc(-1 * var(--vf-cat-gap));
  width: var(--vf-cat-gap);
}

/* Verticals on the centre line: down from the top face to row 1, and up
   from the bottom face to row 3. */
.vf-cat-has-target .vf-cat-row:first-child::after,
.vf-cat-has-target .vf-cat-row:last-child::after {
  left: calc(-1 * (var(--vf-cat-gap) + 75px));
  width: 3px;
}

.vf-cat-has-target .vf-cat-row:first-child::after {
  top: 50%;
  height: 100%;
}

.vf-cat-has-target .vf-cat-row:last-child::after {
  bottom: 50%;
  height: 100%;
}

/* Nothing to draw for a middle row that is also first or last. */
.vf-cat-has-target .vf-cat-row:nth-child(2)::after {
  display: none;
}

.vf-cat-target-shape {
  justify-self: center;
  position: relative;
  z-index: 2; /* paints over the connector lines that run beneath it */
}

/* "codeSide: right": the number moves to the point of the arrow, so the
   track order flips and the text gains the padding the code gave up. */
.vf-cat-code-right .vf-cat-arrow {
  grid-template-columns: minmax(0, 1fr) 84px;
}

.vf-cat-code-right .vf-cat-text {
  padding-left: 22px;
}

.vf-cat-code-right .vf-cat-code {
  padding-right: 26px;
}

@media (max-width: 820px) {
  .vf-cat-has-target .vf-cat-frame {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    justify-items: center;
  }

  /* Stacked, the octagon is above rather than beside, so the connectors
     have nothing to connect. */
  .vf-cat-has-target .vf-cat-layout {
    width: 100%;
  }

  .vf-cat-has-target .vf-cat-row::before,
  .vf-cat-has-target .vf-cat-row::after {
    display: none;
  }
}

.vf-cat-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 34px;
  align-items: center;
}

.vf-cat-arrow {
  min-height: 96px;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: stretch;

  clip-path: polygon(
    0 0,
    calc(100% - 34px) 0,
    100% 50%,
    calc(100% - 34px) 100%,
    0 100%
  );

  overflow: hidden;
  box-sizing: border-box;
}


.vf-cat-code {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 2rem;
  line-height: 1;
  font-weight: 300;
  letter-spacing: 0.02em;
}

.vf-cat-text {
  min-width: 0;
  padding: 16px 44px 16px 16px;

  /* Matched to the target text beside it: the label in the arrow and the
     sentence it points at are the same kind of content and should not
     look like different levels. */
  display: flex;
  align-items: center;

  font-size: var(--fs-base);
  line-height: 1.35;
  font-weight: 600;

  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  box-sizing: border-box;
}

.vf-cat-text strong {
  font-weight: 700;
}

.vf-cat-target {
  margin: 0;
  padding-left: 1.4rem;
}

/* The rows stack on a phone and the arrow ends up above its sentence
   rather than beside it, so each sentence repeats the arrow's number —
   without it the pairing is lost the moment the layout breaks. */
.vf-cat-target-wrap {
  display: flex;
  align-items: baseline;
  gap: 10px;

  /* A bar in the row's own colour, so the sentence stays tied to its
     arrow once the two are no longer side by side. */
  padding-left: 12px;
  border-left: 4px solid var(--vf-cat-accent, transparent);
}

.vf-cat-target-num {
  flex: 0 0 auto;
  font-size: var(--fs-base);
  line-height: 1.4;
  font-weight: 800;
  color: var(--lesson-ink-soft, #111);
  opacity: 0.55;
}

.vf-cat-target.vf-cat-target-plain {
  padding-left: 0;
  margin-left: 0;
  list-style: none;
}

.vf-cat-target.vf-cat-target-plain > li {
  margin-left: 0;
  padding-left: 0;
  text-indent: 0;
  list-style: none;
}

.vf-cat-target li {
  margin-bottom: 0.15rem;
  font-size: var(--fs-base);
  line-height: 1.4;
  font-weight: 400;
  color: var(--lesson-ink-soft, #111);
}

.vf-cat-target li::marker {
  font-size: 1.35em;
  color: #000;
}

.vf-cat-target strong {
  font-weight: 700;
}

/* colors */
.vf-cat-yellow {
  --vf-cat-accent: var(--pulse-art-yellow, #FFF000);
}

.vf-cat-pink {
  --vf-cat-accent: var(--pulse-art-purple, #f5a9ed);
}

.vf-cat-orange {
  --vf-cat-accent: var(--pulse-art-orange, #CD4B13);
}

.vf-cat-blue {
  --vf-cat-accent: var(--pulse-art-blue, #0219fc);
}

.vf-cat-yellow .vf-cat-arrow {
  background: var(--pulse-art-yellow, #FFF000);
  color: #111;
}

.vf-cat-pink .vf-cat-arrow {
  background: var(--pulse-art-purple, #f5a9ed);
  color: #111;
}

.vf-cat-orange .vf-cat-arrow {
  background: var(--pulse-art-orange, #CD4B13);
  color: #fff;
}

.vf-cat-blue .vf-cat-arrow {
  background: var(--pulse-art-blue, #0219fc);
  color: #fff;
}

.vf-cat-yellow .vf-cat-code,
.vf-cat-pink .vf-cat-code {
  color: rgba(0, 0, 0, 0.55);
  background: rgba(0, 0, 0, 0.10);
}

.vf-cat-orange .vf-cat-code,
.vf-cat-blue .vf-cat-code {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(0, 0, 0, 0.20);
}

.vf-cat-yellow .vf-cat-text,
.vf-cat-yellow .vf-cat-text strong,
.vf-cat-pink .vf-cat-text,
.vf-cat-pink .vf-cat-text strong {
  color: #111;
}

.vf-cat-orange .vf-cat-text,
.vf-cat-orange .vf-cat-text strong,
.vf-cat-blue .vf-cat-text,
.vf-cat-blue .vf-cat-text strong {
  color: #fff;
}

/* bottom note */
.vf-cat-bottom {
  margin: 14px auto 0;
  max-width: 920px;
  padding: 10px 18px;

  background: var(--pulse-art-orange, #CD4B13);
  color: #111;

  border-radius: 8px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);

  text-align: center;
  font-size: var(--fs-base);
  line-height: 1.35;
  font-weight: 400;
  color: #fff;
}

.vf-cat-bottom strong {
  font-weight: 700;
}
.vf-coded-arrows-target .vf-cat-target li {
  margin-bottom: 0.08rem;
  font-size: var(--fs-base);
  line-height: 1.25;
  font-weight: 400;
  color: var(--lesson-ink-soft, #111);
}

.vf-coded-arrows-target .vf-cat-target li:last-child {
  margin-bottom: 0;
}
.vf-coded-arrows-target .vf-cat-target li {
  margin-bottom: 0.08rem !important;
  line-height: 1.25 !important;
}


/* mobile */
@media (max-width: 768px) {
  .vf-coded-arrows-target {
    max-width: 420px;
    margin: 1rem auto 1.5rem;
  }

  .vf-cat-layout {
    gap: 18px;
  }

  .vf-cat-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .vf-cat-arrow {
    min-height: 0;
    grid-template-columns: 58px minmax(0, 1fr);
    clip-path: none;
    border-radius: 10px;
  }

  .vf-cat-code {
    font-size: 1.25rem;
  }

  .vf-cat-text {
    padding: 12px 14px;
    font-size: var(--fs-sm);
    line-height: 1.4;
  }

  .vf-cat-target {
    padding-left: 1.4rem;
  }

  .vf-cat-target li {
    font-size: var(--fs-sm);
    line-height: 1.4;
  }

  .vf-cat-bottom {
    font-size: var(--fs-sm);
    line-height: 1.4;
    padding: 10px 14px;
  }
}


/* ===============================
   FOUR TEXTS + CENTER IMAGE
   =============================== 
   ### Assessment principles for tech-enhanced arts

[VISUAL:four-text-image]
image: content/img/module4/assessment-principles.png
imageAlt: Four connected colored circles

topLeftColor: orange
topLeft: **Focus on process** – exploration, iteration and reflective thinking, not only final products.

topRightColor: yellow
topRight: **Provide rubrics** that assess concept, technique, creativity and reflection in a balanced way.

bottomLeftColor: blue
bottomLeft: **Use formative tools** such as journals, photo logs, exit reflections and peer critique to make learning visible.

bottomRightColor: pink
bottomRight: **Evaluate both** the artistic outcomes and learners’ **understanding of digital processes and tools**.
[/VISUAL]
   
   
   */
   /* ===============================
   FOUR TEXT IMAGE
   =============================== */

.vf-four-text-image {
  width: 100%;
  max-width: 760px;
  margin: 1.5rem auto;

  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(180px, 30vw, 260px) minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 18px 24px;
  align-items: center;

  font-family: inherit;
  box-sizing: border-box;
}

.vf-four-text-image,
.vf-four-text-image * {
  box-sizing: border-box;
  min-width: 0;
}

.vf-fti-image {
  grid-column: 2;
  grid-row: 1 / span 2;

  display: flex;
  align-items: center;
  justify-content: center;
}

.vf-fti-image img {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
}

.vf-fti-text {
  padding: 12px 14px;

  font-size: var(--fs-sm);
  line-height: 1.35;
  font-weight: 400;
  color: #111;

  background: transparent;
}

.vf-fti-text strong {
  font-weight: 700;
}

.vf-fti-top-left {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
}

.vf-fti-top-right {
  grid-column: 3;
  grid-row: 1;
  text-align: left;
}

.vf-fti-bottom-left {
  grid-column: 1;
  grid-row: 2;
  text-align: right;
}

.vf-fti-bottom-right {
  grid-column: 3;
  grid-row: 2;
  text-align: left;
}

/* optional color accents */
.vf-fti-orange {
  border-right: 6px solid var(--pulse-art-orange, #CD4B13);
}

.vf-fti-blue {
  border-right: 6px solid var(--pulse-art-blue, #0219fc);
}

.vf-fti-yellow {
  border-left: 6px solid var(--pulse-art-yellow, #FFF000);
}

.vf-fti-pink {
  border-left: 6px solid var(--pulse-art-purple, #f5a9ed);
}

.vf-fti-top-left,
.vf-fti-bottom-left {
  padding-right: 12px;
}

.vf-fti-top-right,
.vf-fti-bottom-right {
  padding-left: 12px;
}

/* mobile */
@media (max-width: 768px) {
  .vf-four-text-image {
    max-width: 420px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 12px;
  }

  .vf-fti-image,
  .vf-fti-top-left,
  .vf-fti-top-right,
  .vf-fti-bottom-left,
  .vf-fti-bottom-right {
    grid-column: 1;
    grid-row: auto;
    text-align: left;
  }

  .vf-fti-image {
    order: 1;
  }

  .vf-fti-top-left {
    order: 2;
  }

  .vf-fti-top-right {
    order: 3;
  }

  .vf-fti-bottom-left {
    order: 4;
  }

  .vf-fti-bottom-right {
    order: 5;
  }

  .vf-fti-image img {
    max-width: 240px;
  }

  .vf-fti-text {
    font-size: var(--fs-sm);
    line-height: 1.35;
  }

  .vf-fti-orange,
  .vf-fti-blue,
  .vf-fti-yellow,
  .vf-fti-pink {
    border-left-width: 6px;
    border-right: 0;
    padding-left: 12px;
    padding-right: 0;
  }
}

/* ===============================
   CENTER IMAGE + PAIRED TEXT
   Bootstrap-safe compact layout
   =============================== */

.vf-center-image-paired-text {
  width: 100%;
  max-width: 100%;
  margin: 1.25rem auto;

  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    clamp(210px, 28vw, 280px)
    minmax(0, 1fr);

  gap: 12px;
  align-items: center;

  font-family: "Inter", "Noto Sans", sans-serif;
  box-sizing: border-box;
  overflow: hidden;
}

/* Bootstrap/flex/grid safety */
.vf-center-image-paired-text,
.vf-center-image-paired-text * {
  min-width: 0;
  box-sizing: border-box;
}

.card .vf-center-image-paired-text,
.card-body .vf-center-image-paired-text,
.col .vf-center-image-paired-text,
[class*="col-"] .vf-center-image-paired-text {
  max-width: 100%;
}

/* Desktop: hide mobile-only paired layout */
.vf-cipt-mobile {
  display: none;
}

/* side text columns */
.vf-cipt-side {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.vf-cipt-row {
  min-height: 46px;
  display: flex;
  align-items: center;
  min-width: 0;
}

.vf-cipt-left .vf-cipt-row {
  justify-content: flex-end;
  text-align: right;
}

.vf-cipt-right .vf-cipt-row {
  justify-content: flex-start;
  text-align: left;
}

/* text */
.vf-cipt-text {
  min-width: 0;
  max-width: 100%;

  font-family: "Inter", "Noto Sans", sans-serif;
  font-size: var(--fs-md);
  line-height: 1.35;
  font-weight: 400;
  color: var(--lesson-ink-soft, #111);

  /* No hyphens: the columns are narrow enough that "auto" was breaking
     ordinary words mid-syllable ("back-grounds", "iden-tity"), which
     reads as a typo rather than as typesetting. Long words may still
     break if they cannot fit at all, hence overflow-wrap. The smaller
     size buys back the width that dropping hyphenation costs. */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

.vf-cipt-text strong {
  font-weight: 700;
}

/* colored connector lines */
.vf-cipt-left .vf-cipt-text {
  padding-right: 9px;
  border-right: 6px solid #ccc;
}

.vf-cipt-right .vf-cipt-text {
  padding-left: 9px;
  border-left: 6px solid #ccc;
}

/* An odd number of items leaves one side of the last row empty. Without
   this the empty cell still draws its connector, so a five-question
   figure shows a sixth bar pointing at nothing. */
.vf-cipt-left .vf-cipt-text:empty,
.vf-cipt-right .vf-cipt-text:empty {
  border: 0;
  padding: 0;
}

/* "numbers: on" — the position of each text, next to its connector.
   Without it the only clue to which segment a text belongs to is its
   height on the page, which breaks down as soon as the two columns hold
   different numbers of items.

   Counted in CSS rather than written into the markdown, so nothing here
   reaches the translation export and moving an item renumbers the rest.
   The count follows DOM order — the whole left column, then the whole
   right — which is exactly the reading order of the figure: 1,2,3 down
   the left, then 4,5 down the right. Empty rows are skipped, otherwise
   the blank cell opposite an odd last item would eat a number. */
/* The theme sizes body copy from #content-area rules, and an ID beats
   any number of classes, so the sizes set above can be overridden into
   something much larger than the rest of the diagram. Restate them with
   the ID boost, the same way .vf-note does further down. The plain
   selectors cover pages with no #content-area wrapper. */
.vf-cipt-text,
#content-area .vf-cipt-text,
#content-area .lesson-card .vf-cipt-text {
  font-size: var(--fs-md) !important;
  line-height: 1.35 !important;
}

.vf-cipt-center-text,
#content-area .vf-cipt-center-text,
#content-area .lesson-card .vf-cipt-center-text {
  font-size: var(--fs-sm) !important;
}

.vf-cipt-numbered {
  counter-reset: vf-cipt-step;
}

.vf-cipt-numbered .vf-cipt-row:not(:has(.vf-cipt-text:empty)) {
  counter-increment: vf-cipt-step;
}

.vf-cipt-numbered .vf-cipt-left .vf-cipt-row:not(:has(.vf-cipt-text:empty))::after,
.vf-cipt-numbered .vf-cipt-right .vf-cipt-row:not(:has(.vf-cipt-text:empty))::before {
  content: counter(vf-cipt-step);

  flex: 0 0 auto;
  align-self: center;

  font-size: var(--fs-xs);
  font-weight: 700;
  color: #555;
}

/* Sits between the text and the connector on both sides, so the numbers
   line up along the figure rather than at the outer edges. */
.vf-cipt-numbered .vf-cipt-left .vf-cipt-row::after {
  margin-left: 6px;
}

.vf-cipt-numbered .vf-cipt-right .vf-cipt-row::before {
  margin-right: 6px;
}

/* colors */
.vf-cipt-left .vf-cipt-row.vf-cipt-pink .vf-cipt-text,
.vf-cipt-right .vf-cipt-row.vf-cipt-pink .vf-cipt-text {
  border-color: var(--pulse-art-purple, #f5a9ed);
}

.vf-cipt-left .vf-cipt-row.vf-cipt-yellow .vf-cipt-text,
.vf-cipt-right .vf-cipt-row.vf-cipt-yellow .vf-cipt-text {
  border-color: var(--pulse-art-yellow, #FFF000);
}

.vf-cipt-left .vf-cipt-row.vf-cipt-orange .vf-cipt-text,
.vf-cipt-right .vf-cipt-row.vf-cipt-orange .vf-cipt-text {
  border-color: var(--pulse-art-orange, #CD4B13);
}

.vf-cipt-left .vf-cipt-row.vf-cipt-blue .vf-cipt-text,
.vf-cipt-right .vf-cipt-row.vf-cipt-blue .vf-cipt-text {
  border-color: var(--pulse-art-blue, #0219fc);
}

/* center image */
.vf-cipt-image-wrap {
  position: relative;
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

.vf-cipt-image {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
}

/* center overlay text */
.vf-cipt-center-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 42%;
  max-width: 105px;

  font-family: "Inter", "Noto Sans", sans-serif;
  font-size: var(--fs-xs);
  line-height: 1.1;
  font-weight: 800;
  text-align: center;
  color: #111;

  pointer-events: none;
}

/* medium Bootstrap columns / tablets */
@media (max-width: 992px) {
  .vf-center-image-paired-text {
    grid-template-columns:
      minmax(0, 1fr)
      clamp(190px, 30vw, 240px)
      minmax(0, 1fr);
    gap: 10px;
  }

  .vf-cipt-text {
    font-size: var(--fs-base);
    line-height: 1.3;
  }

  .vf-cipt-image {
    max-width: 240px;
  }

  .vf-cipt-center-text {
    max-width: 92px;
    font-size: var(--fs-xs);
  }
}

/* mobile */
@media (max-width: 768px) {
  .vf-center-image-paired-text {
    max-width: 420px;
    grid-template-columns: 1fr;
    gap: 16px;
    overflow: visible;
  }

  /* Hide desktop layout on mobile */
  .vf-cipt-image-wrap,
  .vf-cipt-left,
  .vf-cipt-right {
    display: none;
  }

  /* Show mobile paired layout */
  .vf-cipt-mobile {
    display: block;
  }

  .vf-cipt-mobile-title {
    margin: 0 0 16px 0;
    padding: 14px 16px;

    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .12);

    font-family: "Inter", "Noto Sans", sans-serif;
    font-size: var(--fs-md);
    line-height: 1.25;
    font-weight: 800;
    text-align: center;
    color: #111;
  }

  .vf-cipt-mobile-pair {
    position: relative;

    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    grid-template-areas:
      "code question"
      "code answer";

    gap: 8px 10px;

    margin-bottom: 14px;
    padding: 12px 14px;

    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .12);

    border-left: 6px solid #ccc;

    font-family: "Inter", "Noto Sans", sans-serif;
    box-sizing: border-box;
  }

  .vf-cipt-mobile-code {
    grid-area: code;

    width: 28px;
    height: 28px;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #eee;
    color: #111;

    font-size: var(--fs-xs);
    line-height: 1;
    font-weight: 800;
  }

  .vf-cipt-mobile-question {
    grid-area: question;

    font-size: var(--fs-sm);
    line-height: 1.35;
    font-weight: 700;
    color: #111;
  }

  .vf-cipt-mobile-answer {
    grid-area: answer;

    padding-top: 8px;
    border-top: 1px dashed rgba(0, 0, 0, .18);

    font-size: var(--fs-sm);
    line-height: 1.35;
    font-weight: 400;
    color: #111;
  }

  .vf-cipt-mobile-question strong,
  .vf-cipt-mobile-answer strong {
    font-weight: 700;
  }

  /* Mobile colors */
  .vf-cipt-mobile-pair.vf-cipt-pink {
    border-left-color: var(--pulse-art-purple, #f5a9ed);
  }

  .vf-cipt-mobile-pair.vf-cipt-yellow {
    border-left-color: var(--pulse-art-yellow, #FFF000);
  }

  .vf-cipt-mobile-pair.vf-cipt-orange {
    border-left-color: var(--pulse-art-orange, #CD4B13);
  }

  .vf-cipt-mobile-pair.vf-cipt-blue {
    border-left-color: var(--pulse-art-blue, #0219fc);
  }

  .vf-cipt-mobile-pair.vf-cipt-pink .vf-cipt-mobile-code {
    background: var(--pulse-art-purple, #f5a9ed);
    color: #111;
  }

  .vf-cipt-mobile-pair.vf-cipt-yellow .vf-cipt-mobile-code {
    background: var(--pulse-art-yellow, #FFF000);
    color: #111;
  }

  .vf-cipt-mobile-pair.vf-cipt-orange .vf-cipt-mobile-code {
    background: var(--pulse-art-orange, #CD4B13);
    color: #fff;
  }

  .vf-cipt-mobile-pair.vf-cipt-blue .vf-cipt-mobile-code {
    background: var(--pulse-art-blue, #0219fc);
    color: #fff;
  }
}


/* ===============================
   LEVELS ITEMS CENTER
   Supports 4 or 5 levels
   =============================== 
   [VISUAL:levels-items-center]
path: true

- color: pink
  text: Explore and refine ideas (L1)

- color: orange
  text: Recognise and interpret culture (L2)

- color: yellow
  text: Express identity (L3)

- color: orange
  text: Create collaboratively (L4)

- color: pink
  text: Reflect (L5)
[/VISUAL]
   
   
   
   
   
   */


.vf-levels-items-center {
  --vf-yellow: var(--pulse-art-yellow, #FFF000);
  --vf-orange: var(--pulse-art-orange, #CD4B13);
  --vf-pink: var(--pulse-art-purple, #f5a9ed);
  --vf-blue: var(--pulse-art-blue, #0219fc);

  position: relative;
  width: 100%;
  max-width: 760px;
  min-height: 360px;
  margin: 2rem auto;
  padding: 0 30px;

  font-family: inherit;
  box-sizing: border-box;
}

.vf-lic-count-4 {
  min-height: 330px;
}

/* levels wrapper */
.vf-lic-levels {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 16px;

  width: 100%;
  padding-top: 62px;

  box-sizing: border-box;
}

.vf-lic-count-4 .vf-lic-levels {
  padding-top: 72px;
}

.vf-lic-level {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
}

/* 5 levels */
.vf-lic-count-5 .vf-lic-level-1 .vf-lic-bar { width: 90%; }
.vf-lic-count-5 .vf-lic-level-2 .vf-lic-bar { width: 78%; }
.vf-lic-count-5 .vf-lic-level-3 .vf-lic-bar { width: 64%; }
.vf-lic-count-5 .vf-lic-level-4 .vf-lic-bar { width: 50%; }
.vf-lic-count-5 .vf-lic-level-5 .vf-lic-bar { width: 36%; }

/* 4 levels */
.vf-lic-count-4 .vf-lic-level-1 .vf-lic-bar { width: 90%; }
.vf-lic-count-4 .vf-lic-level-2 .vf-lic-bar { width: 72%; }
.vf-lic-count-4 .vf-lic-level-3 .vf-lic-bar { width: 54%; }
.vf-lic-count-4 .vf-lic-level-4 .vf-lic-bar { width: 36%; }

.vf-lic-bar {
  height: 36px;
  min-height: 36px;
  padding: 0 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.25;
  line-height: 1.2;
  font-weight: 400;
  text-align: center;
  color: #111;

  box-sizing: border-box;
}

/* colors */
.vf-lic-pink .vf-lic-bar {
  background: var(--vf-pink);
  color: #111;
}

.vf-lic-yellow .vf-lic-bar {
  background: var(--vf-yellow);
  color: #111;
}

.vf-lic-orange .vf-lic-bar {
  background: var(--vf-orange);
  color: #111;
}

.vf-lic-blue .vf-lic-bar {
  background: var(--vf-blue);
  color: #fff;
}

/* SVG path */
.vf-lic-path {
  position: absolute;
  inset: 0;
  z-index: 1;

  width: 100%;
  height: 100%;

  pointer-events: none;
}

/* Force path colour and avoid marker distortion */
.vf-levels-items-center .vf-lic-path > path {
  fill: none !important;
  stroke: #8d8d8d !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vf-levels-items-center .vf-lic-path marker path {
  fill: #8d8d8d !important;
  stroke: none !important;
}

/* labels */
.vf-lic-start,
.vf-lic-end {
  position: absolute;
  z-index: 3;

  font-family: inherit;
  font-size: var(--fs-xs);
  line-height: 1.35;
  font-weight: 400;
  color: #111;

  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.vf-lic-bar strong,
.vf-lic-start strong,
.vf-lic-end strong {
  font-weight: 700;
}


/* Begin */
.vf-lic-start {
  left: var(--vf-lic-start-x);
  top: var(--vf-lic-start-y);

  /* κέντρο ως προς την κάθετη γραμμή */
  transform: translate(-14px, 18px);

  max-width: 170px;
  text-align: center;
}
.vf-lic-end {
  left: var(--vf-lic-end-x);
  top: var(--vf-lic-end-y);

  /* πιο πάνω */
  transform: translate(32px, -22px);

  max-width: 220px;
  text-align: left;
}

/* no path */
.vf-lic-no-path .vf-lic-path,
.vf-lic-no-path .vf-lic-start,
.vf-lic-no-path .vf-lic-end {
  display: none;
}

.vf-lic-start,
.vf-lic-end {
  font-size: var(--fs-sm);
  line-height: 1.35;
}

/* mobile */
@media (max-width: 768px) {
  .vf-levels-items-center {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 420px;
    min-height: 0;
    padding: 18px 8px 18px;
  }

  /* κρύβουμε το desktop SVG path */
  .vf-lic-path {
    display: none;
  }

  /* labels */
  .vf-lic-start,
  .vf-lic-end {
    display: block;
    position: static;
    transform: none;

    max-width: 100%;
    margin: 0;

    font-size: var(--fs-sm);
    line-height: 1.35;
    font-weight: 400;
    color: #111;
    text-align: center;
  }

  .vf-lic-start strong,
  .vf-lic-end strong {
    font-weight: 700;
  }

  /* Growth πάνω */
  .vf-lic-end {
    order: 1;
    margin-bottom: 12px;
    max-width: 320px;
  }

  /* levels στη μέση */
  .vf-lic-levels {
    order: 2;

    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column-reverse; /* L4 επάνω → L1 κάτω */
    align-items: center;
    gap: 12px;

    width: 100%;
    padding-top: 18px;
    padding-bottom: 18px;
  }

  /* κάθετη γραμμή πίσω από τα κουτιά */
  .vf-lic-levels::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    width: 3px;
    background: #8d8d8d;
    border-radius: 999px;
    z-index: 0;
  }

  /* βελάκι στην κορυφή */
  .vf-lic-levels::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -2px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 14px solid #8d8d8d;
    z-index: 0;
  }

  .vf-lic-level {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .vf-lic-count-4 .vf-lic-level .vf-lic-bar,
  .vf-lic-count-5 .vf-lic-level .vf-lic-bar {
    width: 100%;
    max-width: 100%;
  }

  .vf-lic-bar {
    position: relative;
    z-index: 2;

    justify-content: center;
    height: auto;
    min-height: 0;
    padding: 12px 16px;
    border-radius: 12px;

    font-size: var(--fs-sm);
    line-height: 1.35;
    text-align: center;
  }

  /* Begin κάτω */
  .vf-lic-start {
    order: 3;
    margin-top: 12px;
    max-width: 320px;
  }
}










/* All diagrams the same font*/
/* Force visual diagrams to use site typography */
.vf-diagram,
.vf-diagram * {
  font-family: "Inter", "Noto Sans", sans-serif !important;
}
.vf-cipt-text {
  font-size: var(--fs-sm) !important;
  line-height: 1.32 !important;
  font-weight: 400 !important;
}

.vf-cipt-text strong {
  font-weight: 700 !important;
}

.vf-cipt-center-text {
  font-size: var(--fs-sm) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
}
/* ===============================
   GUIDELINES GRID (UDL-style matrix)
   [VISUAL:guidelines-grid]
   Columns: green / purple / blue (+ yellow / orange / pink fallbacks)
   Rows with rotated side labels (Access / Support / Executive Function)
   =============================== */

.vf-guidelines-grid {
  /* Column palettes: header (dark), cell (light), accent (titles/bullets) */
  --gg-green-dark:  #1e7b34;
  --gg-green-light: #d6ead7;
  --gg-green-accent:#14532d;

  --gg-purple-dark:  #6a5296;
  --gg-purple-light: #ded4ea;
  --gg-purple-accent:#463366;

  --gg-blue-dark:  #0b72a8;
  --gg-blue-light: #cfe8f5;
  --gg-blue-accent:#075985;

  --gg-yellow-dark:  #b58900;
  --gg-yellow-light: #fdf3c9;
  --gg-yellow-accent:#7a5c00;

  --gg-orange-dark:  #cd4b13;
  --gg-orange-light: #fbe0d2;
  --gg-orange-accent:#8f3007;

  --gg-pink-dark:  #b0489c;
  --gg-pink-light: #f7dcf1;
  --gg-pink-accent:#7d2f6e;

  --gg-rowlabel-bg: #efefef;
  --gg-rowlabel-color: #333;

  max-width: 980px;
}

.vf-gg-title {
  font-weight: 750;
  font-size: 1.05rem;
  margin: 0 0 12px;
  color: #222;
}

.vf-gg-table {
  display: grid;
  /* --vf-gg-template carries the per-column track list (variable
     widths / merges) set inline by the renderer; the repeat() is
     only a fallback for markup generated by older JS. */
  grid-template-columns: 34px var(--vf-gg-template, repeat(var(--vf-gg-cols, 3), minmax(0, 1fr)));
  gap: 10px;
  align-items: stretch;
}

/* Grids with no row labels (plain N-column tables) skip the
   rotated-label track entirely instead of reserving empty space */
.vf-gg-table.vf-gg-no-rowlabel {
  grid-template-columns: var(--vf-gg-template, repeat(var(--vf-gg-cols, 3), minmax(0, 1fr)));
}

/* --- Column headers --- */
.vf-gg-corner {
  /* empty top-left corner */
}

.vf-gg-header {
  border-radius: 14px;
  padding: 14px 16px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.35;
}

.vf-gg-header strong {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  margin-top: 2px;
}

.vf-gg-header.vf-gg-green  { background: var(--gg-green-dark); }
.vf-gg-header.vf-gg-purple { background: var(--gg-purple-dark); }
.vf-gg-header.vf-gg-blue   { background: var(--gg-blue-dark); }
.vf-gg-header.vf-gg-yellow { background: var(--gg-yellow-dark); }
.vf-gg-header.vf-gg-orange { background: var(--gg-orange-dark); }
.vf-gg-header.vf-gg-pink   { background: var(--gg-pink-dark); }

/* --- Rotated row labels --- */
.vf-gg-rowlabel {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gg-rowlabel-bg);
  border-radius: 8px;
  min-height: 100%;
}

.vf-gg-rowlabel span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gg-rowlabel-color);
  padding: 10px 0;
  text-align: center;
}

/* --- Cells --- */
.vf-gg-cell {
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #1c1c1c;
  box-sizing: border-box;

  /* Grid items default to min-width:auto and refuse to shrink below their
     longest word, which pushes the track wider than its share. This keeps
     the columns honest. Words are never split: a long one will simply run
     past the cell rather than break. */
  min-width: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.vf-gg-cell.vf-gg-green  { background: var(--gg-green-light); }
.vf-gg-cell.vf-gg-purple { background: var(--gg-purple-light); }
.vf-gg-cell.vf-gg-blue   { background: var(--gg-blue-light); }
.vf-gg-cell.vf-gg-yellow { background: var(--gg-yellow-light); }
.vf-gg-cell.vf-gg-orange { background: var(--gg-orange-light); }
.vf-gg-cell.vf-gg-pink   { background: var(--gg-pink-light); }

/* Colorless cell ("- cell: none"): no background at all */
.vf-gg-cell.vf-gg-none {
  background: transparent;
}

/* White card ("- cell: white"): white background + light border */
.vf-gg-cell.vf-gg-white {
  background: #fff;
  border: 1px solid #e2e2e2;
}

/* --- Compact density ("density: compact") ---
   For grids with many short rows — timelines, year-by-year lists —
   where the default spacing, sized for a few dense panels, spreads the
   rows so far apart that the sequence stops reading as one. */
.vf-gg-density-compact .vf-gg-table {
  gap: 6px;
}

.vf-gg-density-compact .vf-gg-cell {
  padding: 9px 13px;
  border-radius: 10px;
  line-height: 1.45;
}

.vf-gg-density-compact .vf-gg-cell-title {
  margin-bottom: 3px;
}

.vf-gg-density-compact .vf-gg-items li {
  margin-bottom: 2px;
}

.vf-gg-density-compact .vf-gg-figure {
  margin-top: 5px;
}

/* --- Panel surface ("panel: blue") ---
   Puts the whole grid on a tinted board so the rows read as a single
   unit. Colourless cells go white inside a panel — otherwise they
   disappear into the board and the rows lose their edges. */
.vf-guidelines-grid.vf-gg-panel {
  padding: 16px;
  border-radius: 18px;
  background: var(--gg-panel-bg, #f2f4f7);
  box-sizing: border-box;
}

.vf-gg-panel.vf-gg-panel-green  { --gg-panel-bg: var(--gg-green-light); }
.vf-gg-panel.vf-gg-panel-purple { --gg-panel-bg: var(--gg-purple-light); }
.vf-gg-panel.vf-gg-panel-blue   { --gg-panel-bg: var(--gg-blue-light); }
.vf-gg-panel.vf-gg-panel-yellow { --gg-panel-bg: var(--gg-yellow-light); }
.vf-gg-panel.vf-gg-panel-orange { --gg-panel-bg: var(--gg-orange-light); }
.vf-gg-panel.vf-gg-panel-pink   { --gg-panel-bg: var(--gg-pink-light); }
.vf-gg-panel.vf-gg-panel-grey   { --gg-panel-bg: #f2f4f7; }

.vf-gg-panel .vf-gg-cell.vf-gg-none {
  background: #fff;
}

.vf-gg-panel .vf-gg-title {
  margin-top: 2px;
}

@media (max-width: 768px) {
  .vf-guidelines-grid.vf-gg-panel {
    padding: 12px;
    border-radius: 14px;
  }
}

.vf-gg-cell-title {
  font-weight: 800;
  font-size: 0.98rem;
  line-height: 1.3;
  margin-bottom: 8px;
}

.vf-gg-cell.vf-gg-green  .vf-gg-cell-title { color: var(--gg-green-accent); }
.vf-gg-cell.vf-gg-purple .vf-gg-cell-title { color: var(--gg-purple-accent); }
.vf-gg-cell.vf-gg-blue   .vf-gg-cell-title { color: var(--gg-blue-accent); }
.vf-gg-cell.vf-gg-yellow .vf-gg-cell-title { color: var(--gg-yellow-accent); }
.vf-gg-cell.vf-gg-orange .vf-gg-cell-title { color: var(--gg-orange-accent); }
.vf-gg-cell.vf-gg-pink   .vf-gg-cell-title { color: var(--gg-pink-accent); }

.vf-gg-items {
  margin: 0;
  padding: 0 0 0 1.05em;
  list-style: disc;
}

/* Standalone [VISUAL:svg-shapes]. Inside guidelines-grid the image also
   carries .vf-gg-image and picks up a width from there, but on its own it
   had nothing at all and rendered at the file's natural size. */
.vf-ss-stage {
  position: relative;
  width: 100%;
}

.vf-ss-fallback {
  display: block;
  width: 100%;
  height: auto;
}
/* Το ενσωματωμένο svg αντικαθιστά το .vf-ss-fallback και χρειάζεται
   τις ίδιες διαστάσεις — χωρίς αυτό μένει inline και κουβαλάει το
   κενό της βασικής γραμμής, που χαλάει κεντράρισμα και μετρήσεις. */
.vf-ss-svg {
  display: block;
  width: 100%;
  height: auto;
}

.vf-ss-caption {
  margin-top: 8px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #555;
  text-align: center;
}

/* --- Labels drawn inside SVG shapes (imageText:) ---
   The renderer puts .vf-ss-text / .vf-ss-valign-* / .vf-ss-align-* on a div
   inside a foreignObject, but nothing ever styled them, so every label sat
   at the top-left of its shape. It only looked centred while the text was
   big enough to fill the box. Inside a foreignObject 1px == 1 SVG user
   unit, so these sizes scale with the diagram. */
.vf-ss-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1.15;

  /* Labels used to inherit their colour from whatever section the
     diagram sat in, so a template that set color:#fff anywhere up the
     tree rendered them white on white. A shape that needs light text
     declares "color: white" in the markdown, which lands as an inline
     style on this same div and wins over this rule. */
  color: #111;
}

.vf-ss-text.vf-ss-valign-top {
  justify-content: flex-start;
}

.vf-ss-text.vf-ss-align-center {
  align-items: stretch;
  text-align: center;
}

.vf-ss-text.vf-ss-align-left {
  align-items: stretch;
  text-align: left;
}

.vf-ss-text.vf-ss-align-right {
  align-items: stretch;
  text-align: right;
}

/* Each line must be allowed to fill the box and wrap inside it; with
   align-items: center it would shrink to its longest word and overflow
   the shape instead. */
/* Inside a circle there is nowhere for a long word to go, so breaking is
   the lesser evil here even though the prose columns keep it switched off.
   A single Greek or Dutch compound is often wider than the shape itself. */
.vf-ss-text .vf-ss-line,
.vf-ss-text .vf-ss-heading {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

/* "wrap: off": the label stays on one line and the text box is grown
   sideways by the placement code instead. max-width has to go with it —
   left at 100% the line would still be clipped to the shape's width and
   the measurement would come back short. */
.vf-ss-text.vf-ss-nowrap,
.vf-ss-text.vf-ss-nowrap .vf-ss-line,
.vf-ss-text.vf-ss-nowrap .vf-ss-heading {
  white-space: nowrap;
  max-width: none;
  overflow-wrap: normal;
}

.vf-ss-heading {
  margin-bottom: 0.15em;
  font-weight: 800;
}

/* "bullets: on": each text line becomes a point. The marker is drawn with
   a pseudo-element and the line is indented by its width, so a wrapped
   line hangs under the text rather than under the bullet. list-style is
   no use here: these are divs inside a foreignObject, not a real list. */
.vf-ss-line.vf-ss-bullet {
  text-align: left;
  padding-left: 1em;
  text-indent: -1em;
}

.vf-ss-line.vf-ss-bullet::before {
  content: "•\00a0";
}

/* The centre shape carries the diagram's main statement, so it is set in
   bold. Doing it here rather than with ** ** in the markdown keeps the
   emphasis out of the translated string: a translator can rewrite the
   sentence and the weight still applies, and it survives a round trip
   through the translation spreadsheet. */
/* The centre shape usually carries the diagram's main statement, so it is
   set in bold — but only when the whole label IS the statement. Where the
   shape has its own "heading:", that heading already carries the weight
   and bolding the rest would flatten the distinction between the two.

   Doing this here rather than with ** ** in the markdown keeps the
   emphasis out of the translated string, so it survives a round trip
   through the translation spreadsheet. */
.vf-ss-text[data-vf-ss-shape="shape1"]:not(:has(.vf-ss-heading)) {
  font-weight: 800;
}

/* "bold: on|off" on a shape. Written after the shape1 rule and with the
   extra class so it wins either way: a shape can take the weight without
   being shape1, and shape1 can give it up. */
.vf-ss-text.vf-ss-bold,
.vf-ss-text.vf-ss-bold .vf-ss-line {
  font-weight: 800;
}

.vf-ss-text.vf-ss-nobold,
.vf-ss-text.vf-ss-nobold .vf-ss-line {
  font-weight: 400;
}

/* "bullets: off" renders the cell's content as paragraphs, not a list, so
   none of the theme's <ul> margins and indents apply and the passage lines
   up with its title without anything having to be unset. */
.vf-gg-prose {
  margin: 0;
}

.vf-gg-prose p {
  margin: 0 0 8px;
}

.vf-gg-prose p:last-child {
  margin-bottom: 0;
}

/* A single passage reads as one unit with its heading, so it sits closer
   to the title than a list of separate points does. */
/* Εισαγωγική πρόταση που τελειώνει σε άνω κάτω τελεία, ανυψωμένη έξω από
   τη λίστα. Κανονικό βάρος, σε αντίθεση με το .vf-gg-cell-title: είναι
   συνεχόμενο κείμενο, όχι επικεφαλίδα. */
.vf-gg-lead {
  margin: 0 0 6px;
  line-height: 1.45;
}

.vf-gg-cell-title + .vf-gg-prose {
  margin-top: -4px;
}

/* A trailing parenthetical, moved to its own line by "noteBreak: on". */
.vf-gg-item-note {
  display: block;
}

/* "citation:" — an author reference, set apart from the passage it
   belongs to and never translated. */
.vf-gg-citation {
  margin: 10px 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: #555;
}

.vf-gg-items li {
  margin: 0 0 6px;
}

.vf-gg-items li:last-child {
  margin-bottom: 0;
}

.vf-gg-cell.vf-gg-green  .vf-gg-items li::marker { color: var(--gg-green-accent); }
.vf-gg-cell.vf-gg-purple .vf-gg-items li::marker { color: var(--gg-purple-accent); }
.vf-gg-cell.vf-gg-blue   .vf-gg-items li::marker { color: var(--gg-blue-accent); }

/* A cell holding only a figure uses its title as the figure's name, so it
   is set larger and centred rather than as a small panel heading. */
.vf-gg-cell.vf-gg-none .vf-gg-figure-label {
  margin-bottom: 10px;
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
}

/* "connectors: on" — a bracket down the left of the last column: one
   spine, a stub into every row, and an arm reaching back to the figure
   beside it. Drawn with pseudo-elements on the cells rather than as part
   of the image, so it follows the rows however tall they grow.

   The cells need room on their left for it, hence the padding shift. */
.vf-gg-table.vf-gg-connect .vf-gg-cell:not(:first-child) {
  position: relative;
  margin-left: 26px;
}

/* Spine: half a segment above and half below each row's midpoint, so
   consecutive halves meet and the line runs from the first stub to the
   last whatever the heights are. */
.vf-gg-table.vf-gg-connect .vf-gg-cell:not(:first-child)::before,
.vf-gg-table.vf-gg-connect .vf-gg-cell:not(:first-child)::after {
  content: "";
  position: absolute;
  left: -20px;
  width: 3px;
  background: #8a8a8a;
  border-radius: 999px;
}

.vf-gg-table.vf-gg-connect .vf-gg-cell:not(:first-child)::before {
  top: -8px;
  bottom: 50%;
}

.vf-gg-table.vf-gg-connect .vf-gg-cell:not(:first-child)::after {
  top: 50%;
  bottom: -8px;
}

/* No spine above the first row or below the last. */
.vf-gg-table.vf-gg-connect .vf-gg-cell:nth-child(2)::before,
.vf-gg-table.vf-gg-connect .vf-gg-cell:last-child::after {
  display: none;
}

/* The first cell of a row is the figure the bracket points at, so it gets
   no stub of its own — without this it drew a short dash floating to the
   left of the image. */
.vf-gg-table.vf-gg-connect .vf-gg-cell:first-child .vf-gg-cell-connector {
  display: none;
}

/* Stub from the spine into the row, and the arm back to the figure. */
.vf-gg-table.vf-gg-connect .vf-gg-cell-connector {
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);

  width: 20px;
  height: 3px;

  background: #8a8a8a;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .vf-gg-table.vf-gg-connect .vf-gg-cell:not(:first-child) {
    margin-left: 0;
  }

  .vf-gg-table.vf-gg-connect .vf-gg-cell:not(:first-child)::before,
  .vf-gg-table.vf-gg-connect .vf-gg-cell:not(:first-child)::after,
  .vf-gg-table.vf-gg-connect .vf-gg-cell-connector {
    display: none;
  }
}

/* "flow: on" — a tail hanging off each row's label cell, pointing at the
   next row. Same shape as the callouts in the source slides: one solid
   triangle in the cell's own colour, no shaft, no outline.

   The rows have no wrapper of their own: the renderer drops the cells
   straight into the grid, so the left column is the odd-numbered
   children. That holds only for two-column grids with no "- column:"
   headers and no row labels — anything else shifts the parity and the
   tails land in the wrong column. */
.vf-gg-table.vf-gg-flow {
  /* Room for the tail to hang into, plus clearance above and below it.
     Horizontal gap stays as it was, so "density: compact" still governs
     the column spacing. */
  row-gap: 32px;
}

.vf-gg-table.vf-gg-flow-c2 .vf-gg-cell:nth-child(odd),
.vf-gg-table.vf-gg-flow-c1 .vf-gg-cell {
  position: relative;
}

/* A single-column flow is a stack of steps, not a table: full page width
   turns each step into a wide band with a couple of words floating in
   it, so the column is capped and centred. */
.vf-gg-table.vf-gg-flow-c1 {
  max-width: 520px;
  margin-inline: auto;
}

/* Every step is one short line, and the boxes are taller than that line
   needs, so left-and-top text sits in the corner of an empty box. Centre
   it the way "valign: middle" would, without asking for the setting on
   each cell. */
.vf-gg-table.vf-gg-flow-c1 .vf-gg-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Centring alone is not enough: flex centres the content box including
   its margins, and the theme puts a margin-bottom on paragraphs and
   lists from an #content-area rule, so the visible text ends up sitting
   above the middle by half that margin. Zero them out, with the ID
   boost and !important needed to outrank the theme. The plain selectors
   cover pages with no #content-area wrapper. */
.vf-gg-table.vf-gg-flow-c1 .vf-gg-cell > *,
.vf-gg-table.vf-gg-flow-c1 .vf-gg-cell p,
.vf-gg-table.vf-gg-flow-c1 .vf-gg-cell ul,
.vf-gg-table.vf-gg-flow-c1 .vf-gg-cell li,
#content-area .vf-gg-table.vf-gg-flow-c1 .vf-gg-cell > *,
#content-area .vf-gg-table.vf-gg-flow-c1 .vf-gg-cell p,
#content-area .vf-gg-table.vf-gg-flow-c1 .vf-gg-cell ul,
#content-area .vf-gg-table.vf-gg-flow-c1 .vf-gg-cell li {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* "numbers: on" — a numbered badge per cell, counted in CSS so the
   markdown carries no numbers to renumber by hand when a step moves. */
.vf-gg-table.vf-gg-numbered {
  counter-reset: vf-gg-step;
}

.vf-gg-table.vf-gg-numbered .vf-gg-cell {
  padding-left: 60px;
}

.vf-gg-table.vf-gg-numbered .vf-gg-cell::before {
  counter-increment: vf-gg-step;
  content: counter(vf-gg-step);

  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);

  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;

  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);

  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  color: #111;
}

/* Same treatment the process-steps arrows give their step numbers: a
   translucent white disc reads as light-on-dark over the blue. */
.vf-gg-table.vf-gg-numbered .vf-gg-cell.vf-gg-blue::before {
  background: rgba(255, 255, 255, 0.20);
  color: #fff;
}

/* An uncoloured cell has no fill for the disc to sit on. */
.vf-gg-table.vf-gg-numbered .vf-gg-cell.vf-gg-none::before {
  background: rgba(0, 0, 0, 0.07);
}

/* On the light cell colours the accent titles read as muddy brown or
   slate rather than as text, so flow grids take near-black instead.
   Scoped to .vf-gg-flow: the accent titles are right on the smaller
   cells of the other grids, where the colour is doing identifying work
   rather than filling a whole column. */
.vf-gg-table.vf-gg-flow .vf-gg-cell .vf-gg-cell-title {
  color: #1c1c1c;
}

/* The tail itself: detached from the cell above, with a wide, shallow
   triangle so it reads as a direction rather than a spike. The last row
   has nothing to point at, hence the :not().

   Which cell carries the tail depends on the column count, which the
   renderer puts on the table as vf-gg-flow-c1 / -c2. With two columns
   the cells alternate, so the label column is the odd children and the
   last label is second-from-last overall. With one column every cell is
   a row of its own. */
.vf-gg-table.vf-gg-flow-c2 .vf-gg-cell:nth-child(odd):not(:nth-last-child(2))::after,
.vf-gg-table.vf-gg-flow-c1 .vf-gg-cell:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -23px;
  transform: translateX(-50%);

  width: 0;
  height: 0;

  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-top: 13px solid var(--gg-tail, transparent);
}

/* The triangle takes each colour's accent rather than its fill. Filled
   was right while this mimicked a callout tail hanging off a box, but
   between two identical boxes a triangle in the same tint carries no
   information: it has to read against the page, not against the cell.

   Passed down as a custom property on the cell rather than as a
   border-top-color on the ::after: the rule above carries a :not() and
   so outweighs any plain colour rule here, which would leave the
   triangle transparent. Custom properties inherit into the
   pseudo-element and sidestep that entirely.

   Set here rather than by editing the .vf-gg-cell colour rules, so
   nothing outside this block changes. A cell with no colour has no
   --gg-tail, falls back to transparent, and shows no tail. */
.vf-gg-table.vf-gg-flow .vf-gg-cell.vf-gg-green  { --gg-tail: var(--gg-green-accent); }
.vf-gg-table.vf-gg-flow .vf-gg-cell.vf-gg-purple { --gg-tail: var(--gg-purple-accent); }
.vf-gg-table.vf-gg-flow .vf-gg-cell.vf-gg-blue   { --gg-tail: var(--gg-blue-accent); }
.vf-gg-table.vf-gg-flow .vf-gg-cell.vf-gg-yellow { --gg-tail: var(--gg-yellow-accent); }
.vf-gg-table.vf-gg-flow .vf-gg-cell.vf-gg-orange { --gg-tail: var(--gg-orange-accent); }
.vf-gg-table.vf-gg-flow .vf-gg-cell.vf-gg-pink   { --gg-tail: var(--gg-pink-accent); }
.vf-gg-table.vf-gg-flow .vf-gg-cell.vf-gg-white  { --gg-tail: #8a8a8a; }

/* "shades: on" — each row a step further from its own tint toward its
   own accent, so a stack of identical boxes reads as a progression
   rather than as six unrelated notes. The hue never changes; only how
   far along its own ramp each row sits.

   --gg-base is the starting tint, --gg-tail the accent already set
   above for the arrow, so the ramp is defined once per colour and the
   steps below stay colour-agnostic. Eight steps; a ninth row and beyond
   simply hold at the darkest. The darkest step still clears 5.9:1
   against the body text, so no row needs different text colour. */
.vf-gg-table.vf-gg-shaded .vf-gg-cell.vf-gg-green  { --gg-base: var(--gg-green-light); }
.vf-gg-table.vf-gg-shaded .vf-gg-cell.vf-gg-purple { --gg-base: var(--gg-purple-light); }
.vf-gg-table.vf-gg-shaded .vf-gg-cell.vf-gg-blue   { --gg-base: var(--gg-blue-light); }
.vf-gg-table.vf-gg-shaded .vf-gg-cell.vf-gg-yellow { --gg-base: var(--gg-yellow-light); }
.vf-gg-table.vf-gg-shaded .vf-gg-cell.vf-gg-orange { --gg-base: var(--gg-orange-light); }
.vf-gg-table.vf-gg-shaded .vf-gg-cell.vf-gg-pink   { --gg-base: var(--gg-pink-light); }

.vf-gg-table.vf-gg-shaded .vf-gg-cell {
  background: color-mix(in srgb, var(--gg-tail) var(--gg-step, 0%), var(--gg-base, #fff));
}

.vf-gg-table.vf-gg-shaded .vf-gg-cell:nth-child(1) { --gg-step: 0%; }
.vf-gg-table.vf-gg-shaded .vf-gg-cell:nth-child(2) { --gg-step: 7%; }
.vf-gg-table.vf-gg-shaded .vf-gg-cell:nth-child(3) { --gg-step: 14%; }
.vf-gg-table.vf-gg-shaded .vf-gg-cell:nth-child(4) { --gg-step: 21%; }
.vf-gg-table.vf-gg-shaded .vf-gg-cell:nth-child(5) { --gg-step: 28%; }
.vf-gg-table.vf-gg-shaded .vf-gg-cell:nth-child(6) { --gg-step: 35%; }
.vf-gg-table.vf-gg-shaded .vf-gg-cell:nth-child(7) { --gg-step: 42%; }
.vf-gg-table.vf-gg-shaded .vf-gg-cell:nth-child(n+8) { --gg-step: 49%; }

/* Below 900px the grid collapses to one column per row, so the parity
   trick no longer points at anything: drop the tails and the extra row
   gap with them. */
@media (max-width: 900px) {
  .vf-gg-table.vf-gg-flow {
    row-gap: 10px;
  }

  .vf-gg-table.vf-gg-flow .vf-gg-cell::after {
    display: none;
  }
}

/* "palette: brand" — the presentation's own colours instead of the
   default tints, for grids that explain a step of a diagram drawn in
   those colours.

   The default tints are a different hue, not just a lighter one:
   --gg-blue-light is cyan while --pulse-art-blue is a violet-leaning
   blue, and --gg-yellow-light is cream while --pulse-art-yellow is a
   pure yellow. Side by side they do not read as the same colour at all,
   which is the whole point of colour-coding the steps.

   Lightening them is not an option either: mixing a saturated colour
   with white strips its saturation rather than just its darkness, and
   the blue in particular came out a greyish lilac that read as neither
   the same colour nor a deliberate one. So the colours are used as they
   are, exactly as the slides and the process-steps arrows use them, and
   the text colour follows the background instead. */
.vf-gg-table.vf-gg-brand .vf-gg-cell.vf-gg-yellow {
  background: var(--pulse-art-yellow, #FFF000);
  --gg-tail: var(--gg-yellow-accent);
  color: #111;
}

.vf-gg-table.vf-gg-brand .vf-gg-cell.vf-gg-pink {
  background: var(--pulse-art-purple, #f5a9ed);
  --gg-tail: var(--gg-pink-accent);
  color: #111;
}

.vf-gg-table.vf-gg-brand .vf-gg-cell.vf-gg-blue {
  background: var(--pulse-art-blue, #0219fc);
  --gg-tail: var(--pulse-art-blue, #0219fc);
  color: #fff;
}

/* Titles follow suit: the accent colours are tuned for the pale default
   tints and turn muddy on these, and on the blue they would be
   unreadable outright (2.3:1 against near-black, 8.2:1 against white). */
.vf-gg-table.vf-gg-brand .vf-gg-cell .vf-gg-cell-title {
  color: #111;
}

/* The theme colours list items and paragraphs from an #content-area
   rule, and an ID beats any number of classes — which is why the title
   above went white but the bullets stayed dark. Same fix the .vf-kc-*
   sizes use further down: state every text node explicitly, boost with
   the ID, and mark it important. The plain selector covers pages that
   have no #content-area wrapper. */
.vf-gg-table.vf-gg-brand .vf-gg-cell.vf-gg-blue,
.vf-gg-table.vf-gg-brand .vf-gg-cell.vf-gg-blue p,
.vf-gg-table.vf-gg-brand .vf-gg-cell.vf-gg-blue li,
.vf-gg-table.vf-gg-brand .vf-gg-cell.vf-gg-blue strong,
.vf-gg-table.vf-gg-brand .vf-gg-cell.vf-gg-blue em,
.vf-gg-table.vf-gg-brand .vf-gg-cell.vf-gg-blue .vf-gg-cell-title,
#content-area .vf-gg-table.vf-gg-brand .vf-gg-cell.vf-gg-blue,
#content-area .vf-gg-table.vf-gg-brand .vf-gg-cell.vf-gg-blue p,
#content-area .vf-gg-table.vf-gg-brand .vf-gg-cell.vf-gg-blue li,
#content-area .vf-gg-table.vf-gg-brand .vf-gg-cell.vf-gg-blue strong,
#content-area .vf-gg-table.vf-gg-brand .vf-gg-cell.vf-gg-blue em,
#content-area .vf-gg-table.vf-gg-brand .vf-gg-cell.vf-gg-blue .vf-gg-cell-title {
  color: #fff !important;
}

/* The bullet markers carry the blue accent colour, which disappears
   against the blue itself. */
.vf-gg-table.vf-gg-brand .vf-gg-cell.vf-gg-blue .vf-gg-items li::marker,
#content-area .vf-gg-table.vf-gg-brand .vf-gg-cell.vf-gg-blue .vf-gg-items li::marker {
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Mobile chip: hidden on desktop */
.vf-gg-chip {
  display: none;
}

.vf-gg-source {
  margin-top: 12px;
  font-size: 0.75rem;
  color: #666;
  font-style: italic;
}

/* --- corners: square --- */
/* Opt-in per grid via "corners: square" in the markdown. Used for grids
   that act as printable templates rather than sets of cards. */
.vf-gg-corners-square .vf-gg-header,
.vf-gg-corners-square .vf-gg-cell {
  border-radius: 0;
}

/* --- gap: none --- */
/* Cells sit flush; a hairline keeps the rows readable as separate
   fields. Higher specificity than the responsive .vf-gg-table rules,
   so it holds at every breakpoint. */
.vf-gg-gap-none .vf-gg-table {
  gap: 0;
}

.vf-gg-gap-none .vf-gg-cell,
.vf-gg-gap-none .vf-gg-header {
  border: 1px solid #fff;
}

/* Mobile stacks the table into a block; drop the per-cell margin too */
.vf-gg-gap-none .vf-gg-cell {
  margin-bottom: 0;
}

/* --- Tablet: tighten spacing --- */
@media (max-width: 900px) {
  .vf-gg-table {
    gap: 8px;
    grid-template-columns: 28px var(--vf-gg-template, repeat(var(--vf-gg-cols, 3), minmax(0, 1fr)));
  }

  .vf-gg-table.vf-gg-no-rowlabel {
    grid-template-columns: var(--vf-gg-template, repeat(var(--vf-gg-cols, 3), minmax(0, 1fr)));
  }

  .vf-gg-header {
    padding: 12px 12px;
    font-size: 0.85rem;
  }

  .vf-gg-header strong {
    font-size: 1rem;
  }

  .vf-gg-cell {
    padding: 12px 14px;
    font-size: 0.82rem;
  }

  .vf-gg-density-compact .vf-gg-table {
    gap: 5px;
  }

  .vf-gg-density-compact .vf-gg-cell {
    padding: 8px 11px;
  }
}

/* --- Mobile: stack to a single column --- */
@media (max-width: 900px) {
  /* flex rather than block, so the diagram cell can be pulled to the top
     with order:-1 while the markdown keeps its reading order on desktop
     (text column, diagram, text column). */
  .vf-gg-table {
    display: flex;
    flex-direction: column;
  }

  .vf-gg-cell.vf-gg-cell-media {
    order: -1;
  }

  /* Hide the desktop-only header row and rotated labels */
  .vf-gg-corner,
  .vf-gg-header,
  .vf-gg-rowlabel {
    display: none;
  }

  .vf-gg-cell {
    margin-bottom: 12px;
    padding: 14px 16px;
    font-size: 0.88rem;
  }

  /* Stacked cells are spaced with margin, not gap, so the desktop
     compact rule has nothing to tighten here — it has to be repeated. */
  .vf-gg-density-compact .vf-gg-cell {
    margin-bottom: 5px;
    padding: 9px 12px;
  }

  /* Show a compact chip so each card keeps its context */
  .vf-gg-chip {
    display: inline-block;
    margin-bottom: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
  }

  .vf-gg-cell.vf-gg-green  .vf-gg-chip { background: var(--gg-green-dark); }
  .vf-gg-cell.vf-gg-purple .vf-gg-chip { background: var(--gg-purple-dark); }
  .vf-gg-cell.vf-gg-blue   .vf-gg-chip { background: var(--gg-blue-dark); }
  .vf-gg-cell.vf-gg-yellow .vf-gg-chip { background: var(--gg-yellow-dark); }
  .vf-gg-cell.vf-gg-orange .vf-gg-chip { background: var(--gg-orange-dark); }
  .vf-gg-cell.vf-gg-pink   .vf-gg-chip { background: var(--gg-pink-dark); }

  /* Colorless/white cells still need a readable chip */
  .vf-gg-cell.vf-gg-none  .vf-gg-chip,
  .vf-gg-cell.vf-gg-white .vf-gg-chip { background: #6b6b6b; }

  .vf-gg-chip-sep {
    opacity: 0.7;
    padding: 0 2px;
  }
}

/* --- Print: keep cells intact --- */
@media print {
  .vf-guidelines-grid {
    break-inside: avoid-page;
  }

  .vf-gg-cell,
  .vf-gg-header {
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ===============================
   VENN THREE (three overlapping circles)
   [VISUAL:venn-three]
   =============================== */

.vf-venn-three {
  --venn-purple: #a58cc9;
  --venn-blue:   #4ec9ea;
  --venn-green:  #6fc98f;
  --venn-yellow: #f2d24b;
  --venn-orange: #ef9558;
  --venn-pink:   #ef8ecb;

  max-width: 540px;
  text-align: center;
}

.vf-venn-title {
  font-weight: 750;
  font-size: 1.05rem;
  margin: 0 0 10px;
  color: #222;
}

.vf-venn-three svg {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Circles: semi-transparent + multiply blend so overlaps darken naturally */
.vf-venn-circle {
  opacity: 0.78;
  mix-blend-mode: multiply;
}

.vf-venn-purple { fill: var(--venn-purple); }
.vf-venn-blue   { fill: var(--venn-blue); }
.vf-venn-green  { fill: var(--venn-green); }
.vf-venn-yellow { fill: var(--venn-yellow); }
.vf-venn-orange { fill: var(--venn-orange); }
.vf-venn-pink   { fill: var(--venn-pink); }

/* Labels: SVG text scales with the viewBox, so it stays
   proportional on every screen size automatically.
   Weight 500 was too light to hold up over the circles: the fills are
   semi-transparent and multiply-blended, so a label crossing an overlap
   loses contrast against a mottled mid-tone rather than flat colour.
   A heavier face costs nothing and reads at the small sizes the fit
   calculation lands on for long single words. */
.vf-venn-label {
  font-family: inherit;
  font-size: 30px;
  font-weight: 700;
  fill: #111;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .55);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.vf-venn-center {
  font-family: inherit;
  font-size: 40px;
  font-weight: 800;
  letter-spacing: 0.02em;
  fill: #111;
}

.vf-venn-source {
  margin-top: 10px;
  font-size: 0.75rem;
  color: #666;
  font-style: italic;
  text-align: center;
}

/* Mobile: the SVG already scales, just tighten margins */
@media (max-width: 700px) {
  .vf-venn-three {
    max-width: 100%;
    margin: 1.25rem auto;
  }
}

/* Print */
@media print {
  .vf-venn-three {
    break-inside: avoid-page;
  }

  .vf-venn-circle {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ===============================
   CONVERGE CARDS (top pills -> brace -> cards)
   [VISUAL:converge-cards]
   =============================== */

.vf-converge-cards {
  --cc-yellow-bg: #fdf6c3;
  --cc-orange-bg: #fbc78f;
  --cc-blue-bg:   #9dc9f5;
  --cc-purple-bg: #cf9df2;
  --cc-green-bg:  #9df5c3;
  --cc-pink-bg:   #f5a9dd;

  --cc-brace-color: #1a3fb5;

  max-width: 900px;
}

.vf-cc-title {
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 16px;
  color: #111;
}

/* --- Top pills --- */
.vf-cc-tops {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.vf-cc-top {
  border-radius: 16px;
  padding: 16px 20px;
  font-size: 0.98rem;
  line-height: 1.4;
  color: #1c1c1c;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vf-cc-top strong {
  font-weight: 800;
  margin-right: 0.35em;
}

.vf-cc-top.vf-cc-yellow { background: var(--cc-yellow-bg); }
.vf-cc-top.vf-cc-orange { background: var(--cc-orange-bg); }
.vf-cc-top.vf-cc-blue   { background: var(--cc-blue-bg); }
.vf-cc-top.vf-cc-purple { background: var(--cc-purple-bg); }
.vf-cc-top.vf-cc-green  { background: var(--cc-green-bg); }
.vf-cc-top.vf-cc-pink   { background: var(--cc-pink-bg); }

/* --- Brace / converging arrow --- */
.vf-cc-brace {
  display: block;
  width: 88%;
  height: 56px;
  margin: 4px auto 10px;
}

.vf-cc-brace path {
  stroke: var(--cc-brace-color);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}

.vf-cc-brace .vf-cc-brace-arrow {
  fill: var(--cc-brace-color);
  stroke: none;
}

/* --- Cards --- */
.vf-cc-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  max-width: 720px;
  margin: 0 auto;
}

.vf-cc-card {
  border-radius: 6px;
  padding: 16px 20px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #111;
}

.vf-cc-card.vf-cc-orange { background: var(--cc-orange-bg); }
.vf-cc-card.vf-cc-blue   { background: var(--cc-blue-bg); }
.vf-cc-card.vf-cc-purple { background: var(--cc-purple-bg); }
.vf-cc-card.vf-cc-green  { background: var(--cc-green-bg); }
.vf-cc-card.vf-cc-yellow { background: var(--cc-yellow-bg); }
.vf-cc-card.vf-cc-pink   { background: var(--cc-pink-bg); }

.vf-cc-card-title {
  font-weight: 800;
  font-size: 1.02rem;
  margin-bottom: 8px;
}

.vf-cc-items {
  margin: 0;
  padding: 0 0 0 1.1em;
  list-style: disc;
  font-weight: 600;
}

.vf-cc-items li {
  margin: 0 0 6px;
}

.vf-cc-items li:last-child {
  margin-bottom: 0;
}
.vf-cc-source {
  margin-top: 12px;
  font-size: 0.75rem;
  color: #666;
  font-style: italic;
}

/* --- Mobile --- */
@media (max-width: 700px) {
  .vf-cc-tops {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .vf-cc-top {
    padding: 12px 16px;
    font-size: 0.92rem;
  }

  /* Replace the wide brace with a compact centered arrow */
  .vf-cc-brace {
    width: 40%;
    height: 40px;
    margin: 2px auto 8px;
  }

  .vf-cc-cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .vf-cc-card {
    padding: 14px 16px;
    font-size: 0.9rem;
  }
}

/* --- Print --- */
@media print {
  .vf-converge-cards {
    break-inside: avoid-page;
  }

  .vf-cc-card,
  .vf-cc-top {
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ===============================
   PILL LIST (numbered pills + optional check badge)
   [VISUAL:pill-list]
   =============================== */

.vf-pill-list {
  --pl-accent: #f2ee00;
  max-width: 920px;
}

/* Accent variants (drives the pill drop-shadow and the badge) */
.vf-pl-accent-yellow { --pl-accent: #f2ee00; }
.vf-pl-accent-orange { --pl-accent: #f59a4b; }
.vf-pl-accent-blue   { --pl-accent: #57b6f0; }
.vf-pl-accent-green  { --pl-accent: #5fd58a; }
.vf-pl-accent-purple { --pl-accent: #b48ae0; }
.vf-pl-accent-pink   { --pl-accent: #f393cf; }

/* A "color:" line under a pill re-points the accent variable on that
   pill alone. Everything that uses the accent — the offset shadow here,
   the tag border in cloud layout — follows automatically, so no rule
   below needs to know a pill can differ from its block. */
.vf-pl-pill.vf-pl-p-yellow { --pl-accent: #f2ee00; }
.vf-pl-pill.vf-pl-p-orange { --pl-accent: #f59a4b; }
.vf-pl-pill.vf-pl-p-blue   { --pl-accent: #57b6f0; }
.vf-pl-pill.vf-pl-p-green  { --pl-accent: #5fd58a; }
.vf-pl-pill.vf-pl-p-purple { --pl-accent: #b48ae0; }
.vf-pl-pill.vf-pl-p-pink   { --pl-accent: #f393cf; }

.vf-pl-title {
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 18px;
  color: #111;
}

.vf-pl-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}

.vf-pl-layout.vf-pl-has-badge {
  grid-template-columns: minmax(0, 1fr) 180px;
}

/* --- Pills --- */
.vf-pl-pills {
  display: grid;
  gap: 26px;
}

/* "layout: cloud" — the pills become tags that flow and wrap, for a
   board of short scattered phrases. The stacked default is built for a
   handful of long statements: at six or seven short questions it turns
   into a very tall column of mostly empty rounded boxes. */
.vf-pl-cloud .vf-pl-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
}

.vf-pl-cloud .vf-pl-pill {
  padding: 9px 18px;
  font-size: var(--fs-md);
  line-height: 1.35;
  text-align: left;

  /* The stacked pill's layered accent shadow reads as depth on a big
     box and as blur on a small one. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.vf-pl-cloud .vf-pl-num {
  margin-right: 6px;
  font-weight: 700;
  opacity: 0.55;
}

/* "frame: dashed" — the outline that holds a board together, the way
   the slide groups its phrases into named areas.

   Narrower and tighter than the stacked default: that one is sized for
   full-width statement pills, while a board of short tags reads better
   held in, and two of these usually sit one under the other. */
.vf-pl-framed {
  max-width: 680px;
  padding: 14px 16px 16px;
  border: 2px dashed #2f4a7c;
  border-radius: 14px;
}

.vf-pl-framed .vf-pl-title {
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* The default 24px grid gap is there to separate the pills from the
   badge; with no badge it is just dead space above the tags. */
.vf-pl-cloud .vf-pl-layout {
  gap: 0;
}

.vf-pl-pill {
  position: relative;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 999px;
  padding: 26px 42px;
  font-size: 1rem;
  line-height: 1.5;
  color: #2b2b2b;
  text-align: center;

  /* Layered shadow: soft grey + accent-colored offset (like the slide) */
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.08),
    0 10px 0 -2px var(--pl-accent);
}

/* "density: compact" — the default pill is sized for three or four
   long statements with the badge beside them; at six it becomes a tall
   column of mostly empty space. Everything shrinks proportionally, the
   accent shadow included, so the pills still read as the same object. */
.vf-pl-compact .vf-pl-pills {
  gap: 14px;
}

.vf-pl-compact .vf-pl-pill {
  /* Padding and gaps only: the text keeps the block's normal size, so
     compact means less empty space, not smaller type. */
  padding: 14px 24px;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.07),
    0 6px 0 -2px var(--pl-accent);
}

.vf-pl-compact .vf-pl-title {
  margin-bottom: 12px;
}

/* With no badge the list has the full width, so it does not need the
   badge column's gap either. */
.vf-pl-compact .vf-pl-layout {
  gap: 16px;
}

.vf-pl-pill strong,
.vf-pl-num {
  font-weight: 800;
  color: #111;
}

.vf-pl-num {
  margin-right: 0.4em;
}

/* --- Check badge --- */
.vf-pl-badge {
  width: 180px;
  max-width: 100%;
  margin: 0 auto;
}

.vf-pl-badge svg {
  width: 100%;
  height: auto;
  display: block;
}

.vf-pl-badge-disc {
  fill: #fff;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18));
}

.vf-pl-badge-blob {
  fill: color-mix(in srgb, var(--pl-accent) 75%, #8a8a00);
  opacity: 0.9;
}

.vf-pl-badge-splash {
  fill: var(--pl-accent);
}

.vf-pl-badge-check {
  stroke: #fff;
  stroke-width: 7;
}

.vf-pl-source {
  margin-top: 12px;
  font-size: 0.75rem;
  color: #666;
  font-style: italic;
}

/* --- Tablet --- */
@media (max-width: 900px) {
  .vf-pl-layout.vf-pl-has-badge {
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 16px;
  }

  .vf-pl-pill {
    padding: 20px 28px;
    font-size: 0.94rem;
  }
}

/* --- Mobile: badge on top, pills stacked full-width --- */
@media (max-width: 700px) {
  .vf-pl-layout.vf-pl-has-badge {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .vf-pl-badge {
    width: 92px;
    order: -1;
  }

  .vf-pl-pills {
    gap: 18px;
  }

  .vf-pl-pill {
    padding: 16px 20px;
    font-size: 0.9rem;
    border-radius: 26px; /* softer pill so long text wraps nicely */
    box-shadow:
      0 2px 6px rgba(0, 0, 0, 0.08),
      0 7px 0 -2px var(--pl-accent);
  }
}

/* --- Print --- */
@media print {
  .vf-pill-list {
    break-inside: avoid-page;
  }

  .vf-pl-pill {
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ===============================
   KEY CIRCLES (circular diagram with 8 keys + center title)
   [VISUAL:key-circles]
   =============================== */

.vf-key-circles {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.vf-key-circles svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Labels inside the small circles — SVG text scales with the
   viewBox, so proportions are identical on desktop and mobile.
   The actual font-size is set inline per label (it auto-shrinks
   for labels that need many lines); this is just a fallback. */
.vf-kc-label {
  font-family: inherit;
  font-size: 9.5px;
  font-weight: 600;
  fill: #222;
}

/* Per-label size classes emitted by the renderer. Declared with
   !important AND boosted with the #content-area ID so they beat the
   theme's "#content-area .vf-diagram { font-size: 18px !important }"
   patch (higher specificity wins between two !important rules).
   The plain versions cover pages without #content-area. */
.vf-kc-label.vf-kc-fs-14,   #content-area .vf-kc-label.vf-kc-fs-14   { font-size: 14px !important; }
.vf-kc-label.vf-kc-fs-12-5, #content-area .vf-kc-label.vf-kc-fs-12-5 { font-size: 12.5px !important; }
.vf-kc-label.vf-kc-fs-11,   #content-area .vf-kc-label.vf-kc-fs-11   { font-size: 11px !important; }
.vf-kc-label.vf-kc-fs-10,   #content-area .vf-kc-label.vf-kc-fs-10   { font-size: 10px !important; }
.vf-kc-label.vf-kc-fs-9,    #content-area .vf-kc-label.vf-kc-fs-9    { font-size: 9px !important; }
.vf-kc-label.vf-kc-fs-8,    #content-area .vf-kc-label.vf-kc-fs-8    { font-size: 8px !important; }
.vf-kc-label.vf-kc-fs-7,    #content-area .vf-kc-label.vf-kc-fs-7    { font-size: 7px !important; }

/* Legacy sizes from the previous ladder, kept for compatibility */
.vf-kc-label.vf-kc-fs-10-5, #content-area .vf-kc-label.vf-kc-fs-10-5 { font-size: 10.5px !important; }
.vf-kc-label.vf-kc-fs-9-5,  #content-area .vf-kc-label.vf-kc-fs-9-5  { font-size: 9.5px !important; }
.vf-kc-label.vf-kc-fs-8-5,  #content-area .vf-kc-label.vf-kc-fs-8-5  { font-size: 8.5px !important; }
.vf-kc-label.vf-kc-fs-7-5,  #content-area .vf-kc-label.vf-kc-fs-7-5  { font-size: 7.5px !important; }
.vf-kc-label.vf-kc-fs-6-5,  #content-area .vf-kc-label.vf-kc-fs-6-5  { font-size: 6.5px !important; }
.vf-kc-label.vf-kc-fs-5-8,  #content-area .vf-kc-label.vf-kc-fs-5-8  { font-size: 5.8px !important; }
.vf-kc-label.vf-kc-fs-5-2,  #content-area .vf-kc-label.vf-kc-fs-5-2  { font-size: 5.2px !important; }

/* tspans must always inherit their parent <text> size, even if a
   theme rule tries to size everything inside .vf-diagram */
.vf-kc-label tspan,
#content-area .vf-kc-label tspan {
  font-size: inherit !important;
}

/* The big center title must also survive the theme patch */
#content-area .vf-kc-center {
  font-size: var(--fs-lg) !important;
}

/* Center title */
.vf-kc-center {
  font-family: inherit;
  font-size: var(--fs-lg);
  font-weight: 800;
  fill: #111;
}

.vf-kc-source {
  margin-top: 10px;
  font-size: 0.75rem;
  color: #666;
  font-style: italic;
  text-align: center;
}

@media (max-width: 700px) {
  .vf-key-circles {
    max-width: 100%;
    margin: 1.25rem auto;
  }
}

@media print {
  .vf-key-circles {
    break-inside: avoid-page;
  }

  .vf-key-circles svg {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ===============================
   ARROW STEPS (horizontal chevron process flow)
   [VISUAL:arrow-steps]
   =============================== */

.vf-arrow-steps {
  --as-notch: 26px; /* depth of the chevron point */
  max-width: 980px;
}

.vf-arrow-steps .vf-as-title {
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 14px;
  color: #111;
}

.vf-as-flow {
  display: flex;
  align-items: stretch;
}

.vf-as-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 22px calc(var(--as-notch) + 14px) 22px calc(var(--as-notch) + 8px);
  font-size: 1rem;
  font-weight: 800;
  color: #1c1c1c;
  line-height: 1.3;

  /* Chevron: arrow tip on the right, notch on the left */
  clip-path: polygon(
    0 0,
    calc(100% - var(--as-notch)) 0,
    100% 50%,
    calc(100% - var(--as-notch)) 100%,
    0 100%,
    var(--as-notch) 50%
  );
  margin-right: calc(-1 * var(--as-notch) + 6px); /* segments interlock */
}

/* First segment: flat left edge, no notch */
.vf-as-step.vf-as-first {
  clip-path: polygon(
    0 0,
    calc(100% - var(--as-notch)) 0,
    100% 50%,
    calc(100% - var(--as-notch)) 100%,
    0 100%
  );
  padding-left: 14px;
}

.vf-as-step:last-child {
  margin-right: 0;
}

.vf-as-text {
  display: block;
}

/* "numbers: on" — the position, above the label. Not a badge: the
   chevron is already the marker, so the number only has to be legible
   and out of the way of the text. */
/* Περιορισμένο στο δικό του section: το ίδιο όνομα κλάσης υπάρχει και
   στο arc-steps παραπάνω, όπου ο αριθμός είναι κύκλος και όχι γραμμή. */
.vf-arrow-steps .vf-as-num {
  display: block;
  margin-bottom: 2px;
  font-weight: 800;
  opacity: 0.75;
}

/* "perRow: N" — the steps are cut into rows of N by the renderer, each
   in its own .vf-as-flow. Long labels stay readable because the row
   holds only as many chevrons as asked for, instead of every step
   competing for one line's width. */
.vf-as-wrapped .vf-as-flow + .vf-as-flow {
  margin-top: 14px;
}

/* A wrapped row is a continuation, not a fresh start, so its chevrons
   keep their natural width rather than stretching to fill the row: a
   last row of one would otherwise blow up to full width. */
.vf-as-wrapped .vf-as-step {
  flex: 1 1 0;
}

/* Rows are stacked already, so the mobile rule that turns the flow
   vertical would double up. Leave it: below 700px a wrapped diagram
   becomes one column, which is the right answer on a phone anyway. */

.vf-arrow-steps .vf-as-source {
  margin-top: 12px;
  font-size: 0.75rem;
  color: #666;
  font-style: italic;
}

/* --- Tablet: tighter --- */
@media (max-width: 900px) {
  .vf-arrow-steps {
    --as-notch: 20px;
  }

  .vf-as-step {
    padding-top: 16px;
    padding-bottom: 16px;
    font-size: 0.9rem;
  }
}

/* --- Mobile: vertical flow, chevrons point downwards --- */
@media (max-width: 700px) {
  .vf-arrow-steps {
    --as-notch: 18px;
  }

  .vf-as-flow {
    flex-direction: column;
    align-items: stretch;
  }

  .vf-as-step {
    padding: 18px 16px calc(var(--as-notch) + 14px);
    margin-right: 0;
    margin-bottom: calc(-1 * var(--as-notch) + 6px);
    font-size: 0.95rem;

    /* Rotated chevron: tip at the bottom, notch at the top */
    clip-path: polygon(
      0 0,
      50% var(--as-notch),
      100% 0,
      100% calc(100% - var(--as-notch)),
      50% 100%,
      0 calc(100% - var(--as-notch))
    );
  }

  .vf-as-step.vf-as-first {
    padding-top: 14px;
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - var(--as-notch)),
      50% 100%,
      0 calc(100% - var(--as-notch))
    );
  }

  .vf-as-step:last-child {
    margin-bottom: 0;
  }
}

/* --- Print --- */
@media print {
  .vf-arrow-steps {
    break-inside: avoid-page;
  }

  .vf-as-step {
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ===============================
   ACTION CYCLES (action research spiral)
   [VISUAL:action-cycles]
   =============================== */

.vf-action-cycles {
  --ac-color: #1146a8; /* overridden inline by the color: option */

  /* Two cycles stack to nearly 900px of drawing, which at 560 wide made
     the diagram taller than most screens. The SVG scales to whatever
     width it is given, so this is purely how large it prints on the
     page. */
  max-width: 440px;
  margin-left: auto;
  margin-right: auto;
}

.vf-ac-title {
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 12px;
  color: #111;
  text-align: center;
}

.vf-action-cycles svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Strokes */
.vf-ac-line {
  stroke: var(--ac-color);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.vf-ac-line.vf-ac-thin {
  stroke-width: 3;
}

/* Filled arrowheads */
.vf-ac-fill {
  fill: var(--ac-color);
  stroke: none;
}

/* Texts — SVG text scales with the viewBox on every screen */
.vf-ac-cycle-label {
  font-family: inherit;
  font-size: 30px;
  font-weight: 800;
  fill: var(--ac-color);
}

.vf-ac-phase {
  font-family: inherit;
  font-size: var(--fs-xl);
  font-weight: 700;
  fill: var(--ac-color);
}

.vf-ac-source {
  margin-top: 10px;
  font-size: 0.75rem;
  color: #666;
  font-style: italic;
  text-align: center;
}

@media (max-width: 700px) {
  .vf-action-cycles {
    max-width: 100%;
    margin: 1.25rem auto;
  }
}

@media print {
  .vf-action-cycles {
    break-inside: avoid-page;
  }

  .vf-action-cycles svg {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ===============================
   COMPARE CARDS (N cards with colored footer band)
   [VISUAL:compare-cards]
   =============================== */

.vf-compare-cards {
  --cmp-orange: #f7941d;
  --cmp-blue:   #1f78c1;
  --cmp-green:  #2e9e5b;
  --cmp-purple: #7a5fb5;
  --cmp-pink:   #d1569f;
  --cmp-yellow: #e5b910;
  --cmp-teal:   #0e7c86;

  max-width: 1050px;
}

.vf-cmp-title {
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 16px;
  color: #111;
}

/* Grid: as many columns as fit, each at least 250px */
.vf-cmp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* --- Card --- */
.vf-cmp-card {
  --cmp-accent: var(--cmp-orange);
  display: flex;
  flex-direction: column;
  border: 2px solid var(--cmp-accent);
  background: #fff;
  overflow: hidden;
}

.vf-cmp-card.vf-cmp-orange { --cmp-accent: var(--cmp-orange); }
.vf-cmp-card.vf-cmp-blue   { --cmp-accent: var(--cmp-blue); }
.vf-cmp-card.vf-cmp-green  { --cmp-accent: var(--cmp-green); }
.vf-cmp-card.vf-cmp-purple { --cmp-accent: var(--cmp-purple); }
.vf-cmp-card.vf-cmp-pink   { --cmp-accent: var(--cmp-pink); }
.vf-cmp-card.vf-cmp-yellow { --cmp-accent: var(--cmp-yellow); }
.vf-cmp-card.vf-cmp-teal   { --cmp-accent: var(--cmp-teal); }

.vf-cmp-card-title {
  font-weight: 800;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.3;
  text-align: center;
  color: var(--cmp-accent);
  padding: 18px 20px 4px;
}

.vf-cmp-body {
  padding: 10px 20px 18px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #2b2b2b;
  flex: 1 1 auto; /* pushes the footer to the bottom */
}

/* Each item rendered as a dash-paragraph, like the slide */
.vf-cmp-item {
  margin: 0 0 14px;

  /* Room for the bullet, so wrapped lines align with the first word
     instead of running back under the marker. */
  padding-left: 1.15em;
  position: relative;
}

.vf-cmp-item:last-child {
  margin-bottom: 0;
}

/* The items are paragraphs, not a list, so the bullet is drawn rather
   than inherited from list-style. A hyphen read as punctuation left over
   from the source document; a real bullet reads as a list marker. */
.vf-cmp-item::before {
  content: "\2022";
  position: absolute;
  left: 0;
  top: 0;
  line-height: inherit;
}

/* "numbers: on" on a card — the points are a sequence, so they are
   counted instead of bulleted. Counted in CSS, so the markdown carries
   no numbers to renumber when a point moves, and nothing extra reaches
   the translation export. The reset is on the body, so each card counts
   from one. */
.vf-cmp-numbered {
  counter-reset: vf-cmp-step;
}

.vf-cmp-numbered .vf-cmp-item {
  padding-left: 1.6em;
}

.vf-cmp-numbered .vf-cmp-item::before {
  counter-increment: vf-cmp-step;
  content: counter(vf-cmp-step) ".";
  font-weight: 700;
}

/* "bullets: off" on a card — no marker and no hanging indent, so the
   points read as short paragraphs. Placed after the numbered rules so
   that a card asking for both ends up with neither, which is the more
   likely intent than a number with no indent. */
.vf-cmp-nobullets .vf-cmp-item {
  padding-left: 0;
}

.vf-cmp-nobullets .vf-cmp-item::before {
  content: none;
}

/* The renderer resolves card-level and item-level "bullets" together
   and marks each bare point itself, so a single item can drop its
   marker inside an otherwise bulleted or numbered card. Written last
   and with the extra class so it outranks the numbered rules above. */
.vf-cmp-item.vf-cmp-item-bare,
.vf-cmp-numbered .vf-cmp-item.vf-cmp-item-bare {
  padding-left: 0;
}

.vf-cmp-item.vf-cmp-item-bare::before,
.vf-cmp-numbered .vf-cmp-item.vf-cmp-item-bare::before {
  content: none;
  counter-increment: none;
}

.vf-cmp-item strong {
  font-weight: 800;
  color: #111;
}

/* --- Colored footer band with white text --- */
.vf-cmp-footer {
  background: var(--cmp-accent);
  color: #fff;
  font-weight: 800;
  font-size: 0.88rem;
  line-height: 1.45;
  padding: 16px 20px;
  margin-top: auto;
}

.vf-cmp-source {
  margin-top: 12px;
  font-size: 0.75rem;
  color: #666;
  font-style: italic;
}

/* --- Mobile: stacked vertically --- */
@media (max-width: 700px) {
  .vf-cmp-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .vf-cmp-card-title {
    padding: 14px 16px 2px;
    font-size: 1rem;
  }

  .vf-cmp-body {
    padding: 8px 16px 14px;
    font-size: 0.88rem;
  }

  .vf-cmp-footer {
    padding: 12px 16px;
    font-size: 0.85rem;
  }
}

/* --- Print: keep cards whole, force the colored bands on paper --- */
@media print {
  .vf-compare-cards {
    break-inside: auto; /* the grid may span pages... */
  }

  .vf-cmp-grid {
    /* Side-by-side comparison is the point of the diagram, so keep
       columns on paper too; two per row fits A4 portrait safely. */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
  }

  .vf-cmp-card {
    break-inside: avoid; /* ...but each card stays whole */
    border-width: 1.5pt;
  }

  .vf-cmp-card-title {
    color: var(--cmp-accent) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .vf-cmp-footer {
    background: var(--cmp-accent) !important;
    color: #fff !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ===============================
   LENS MERGE (two overlapping lenses + center circle)
   [VISUAL:lens-merge]
   =============================== */

.vf-lens-merge {
  max-width: 960px;
}

.vf-lm-title {
  font-weight: 800;
  font-size: 1.25rem;
  color: #2b2b2b;
  text-align: center;
  margin: 0 0 22px;
}

/* Layout: side label | graphic | side label */
.vf-lm-layout {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(0, 3fr) minmax(130px, 1fr);
  gap: 20px;
  align-items: center;
}

.vf-lm-graphic svg {
  width: 100%;
  height: auto;
  display: block;
}

/* --- SVG parts --- */
.vf-lm-lens {
  stroke: #4a4a4a;
  stroke-width: 2.5;
}

.vf-lm-circle {
  fill: #c4c4c4;
  stroke: #4a4a4a;
  stroke-width: 2.5;
}

.vf-lm-center-text {
  font-family: inherit;
  font-size: var(--fs-lg);
  font-weight: 800;
  fill: #3a3a3a;
}

.vf-lm-icon {
  fill: none;
  stroke: #3f3f3f;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Side labels --- */
.vf-lm-side-label {
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  margin-bottom: 8px;
}

.vf-lm-side-text {
  font-size: 0.88rem;
  line-height: 1.45;
  color: #444;
}

.vf-lm-left {
  text-align: right;
}

.vf-lm-right {
  text-align: left;
}

.vf-lm-source {
  margin-top: 12px;
  font-size: 0.75rem;
  color: #666;
  font-style: italic;
  text-align: center;
}

/* --- Tablet --- */
@media (max-width: 900px) {
  .vf-lm-layout {
    grid-template-columns: minmax(110px, 1fr) minmax(0, 2.6fr) minmax(110px, 1fr);
    gap: 12px;
  }

  .vf-lm-side-label {
    font-size: 1rem;
  }

  .vf-lm-side-text {
    font-size: 0.82rem;
  }
}

/* --- Mobile: labels above and below the graphic, centered --- */
@media (max-width: 700px) {
  .vf-lm-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .vf-lm-left,
  .vf-lm-right {
    text-align: center;
  }

  .vf-lm-left {
    order: 1;
  }

  .vf-lm-graphic {
    order: 2;
  }

  .vf-lm-right {
    order: 3;
  }

  .vf-lm-title {
    font-size: 1.1rem;
    margin-bottom: 14px;
  }
}

/* --- Print --- */
@media print {
  .vf-lens-merge {
    break-inside: avoid-page;
  }

  .vf-lens-merge svg {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .vf-lm-side-label {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ===============================
   YOUTUBE / VIMEO
   [VISUAL:youtube]
   =============================== */

.vf-youtube {
  width: min(100%, 840px);
  max-width: 840px;
  margin: 2rem auto;
  box-sizing: border-box;
}

/* Responsive 16:9 video frame */
.vf-yt-player {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
  border: 1px solid rgba(23, 25, 64, 0.14);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.16);
  box-sizing: border-box;
}

/* Direct YouTube embed: YouTube renders its own preview image. */
.vf-yt-player-direct {
  isolation: isolate;
}

.vf-yt-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Play overlay retained for Vimeo lite embeds. */
.vf-yt-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.16);
  border: 0;
  cursor: pointer;
  transition: background 0.2s ease;
}

.vf-yt-play svg {
  width: 72px;
  height: 51px;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.42));
  transition: transform 0.2s ease;
}

.vf-yt-play-bg {
  fill: rgba(30, 30, 30, 0.84);
}

.vf-yt-play-tri {
  fill: #fff;
}

.vf-yt-play:hover,
.vf-yt-play:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  outline: none;
}

.vf-yt-play:focus-visible {
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.92);
}

.vf-yt-play:hover .vf-yt-play-bg,
.vf-yt-play:focus-visible .vf-yt-play-bg {
  fill: #f00;
}

.vf-yt-play:hover svg,
.vf-yt-play:focus-visible svg {
  transform: scale(1.07);
}

/* YouTube/Vimeo iframe */
.vf-yt-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #111;
}

/* Caption card */
.vf-yt-caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin: 0;
  padding: 12px 4px 0;
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: left;
}

.vf-yt-link {
  display: inline-block;
  color: var(--quaternary, #171940);
  font-size: 0.96rem;
  font-weight: 750;
  text-decoration: none;
}

.vf-yt-link:hover {
  text-decoration: underline;
}

.vf-yt-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.vf-yt-credit {
  display: block;
  color: #666;
  font-size: 0.8rem;
  font-style: normal;
}

.vf-yt-error {
  padding: 14px 18px;
  border: 1px dashed #c66;
  color: #a33;
  border-radius: 10px;
  background: rgba(170, 51, 51, 0.04);
  font-size: 0.9rem;
}

/* Screen: hide the raw URL (used for print only). */
.vf-yt-print-url {
  display: none;
}

/* Mobile */
@media (max-width: 700px) {
  .vf-youtube {
    margin: 1.5rem auto;
  }

  .vf-yt-player {
    border-radius: 10px;
    box-shadow: 0 7px 20px rgba(17, 24, 39, 0.14);
  }

  .vf-yt-play svg {
    width: 58px;
    height: 41px;
  }

  .vf-yt-caption {
    padding-top: 9px;
  }
}

/* Print: keep the frame and expose the source URL. */
@media print {
  .vf-youtube {
    break-inside: avoid-page;
  }

  .vf-yt-player {
    box-shadow: none;
    border: 1pt solid #999;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .vf-yt-play {
    background: none;
  }

  .vf-yt-iframe {
    display: none;
  }

  .vf-yt-print-url {
    display: block;
    margin-top: 6px;
    text-align: left;
    font-size: 9pt;
    color: #333;
    word-break: break-all;
  }
}

/* ===============================
   FUNNEL (inverted funnel with stage labels)
   [VISUAL:funnel]
   =============================== */

.vf-funnel {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.vf-fn-title {
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 12px;
  color: #111;
  text-align: center;
}

.vf-funnel svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Funnel bands */
.vf-fn-band {
  stroke: #444;
  stroke-width: 2;
  stroke-linejoin: round;
}

/* Arrows pointing at each band */
.vf-fn-arrow {
  stroke: #4a4a4a;
  stroke-width: 2.4;
  stroke-linecap: round;
  fill: none;
}

.vf-fn-arrowhead {
  fill: #4a4a4a;
  stroke: none;
}

/* Texts — scale with the viewBox on every screen */
.vf-fn-label {
  font-family: inherit;
  font-size: var(--fs-lg);
  font-weight: 500;
  fill: #2b2b2b;
}

.vf-fn-endlabel {
  font-family: inherit;
  font-size: var(--fs-lg);
  font-weight: 500;
  fill: #2b2b2b;
}

.vf-fn-source {
  margin-top: 10px;
  font-size: 0.75rem;
  color: #666;
  font-style: italic;
  text-align: center;
}

@media (max-width: 700px) {
  .vf-funnel {
    max-width: 100%;
    margin: 1.25rem auto;
  }
}

@media print {
  .vf-funnel {
    break-inside: avoid-page;
  }

  .vf-funnel svg {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ===============================
   STANCE SPLIT (Agree / Disagree / Neutral)
   [VISUAL:stance-split]
   =============================== */

.vf-stance-split {
  /* Overridden inline: --ss-left, --ss-right, --ss-middle, --ss-zone */
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* The vf-ss- prefix is shared by two unrelated diagrams: stance-split and
   svg-shapes. Only this one name is emitted by both, so rather than
   renaming a whole prefix across the JS and the stylesheet, each keeps its
   own scoped rule. Everything else under vf-ss- belongs to one or the
   other and never overlaps. */
.vf-stance-split .vf-ss-title {
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 12px;
  color: #111;
  text-align: center;
}

.vf-svg-shapes .vf-ss-title {
  margin: 0 0 14px;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 800;
  color: var(--quaternary, #171940);
}

.vf-ss-frame {
  position: relative;
  border: 1px solid #ececec;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

/* --- Header bar --- */
.vf-ss-header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.10);
}

.vf-ss-side {
  display: flex;
  align-items: center;
  gap: 22px;
  min-width: 0;
}

.vf-ss-badge {
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.22));
}

.vf-ss-word {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* --- Free zone with the divider --- */
.vf-ss-zone {
  position: relative;
  height: var(--ss-zone, 280px);
}

.vf-ss-divider {
  position: absolute;
  left: 50%;
  top: -14px; /* tucks under the header bar */
  bottom: 0;
  width: 22px;
  transform: translateX(-50%);
  background: var(--ss-middle);
}

.vf-ss-middle {
  position: absolute;
  left: 50%;
  top: 26%;
  transform: translate(-50%, -50%);
  background: var(--ss-middle);
  color: #fff;
  font-size: 1.35rem;
  font-weight: 600;
  padding: 18px 46px;
  border-radius: 999px;
  white-space: nowrap;
}

.vf-ss-source {
  margin-top: 10px;
  font-size: 0.75rem;
  color: #666;
  font-style: italic;
  text-align: center;
}

/* --- Mobile --- */
@media (max-width: 700px) {
  .vf-ss-header {
    padding: 10px 12px;
  }

  .vf-ss-side {
    gap: 10px;
  }

  .vf-ss-badge {
    width: 44px;
    height: 44px;
  }

  .vf-ss-word {
    font-size: 1.1rem;
  }

  .vf-ss-zone {
    height: max(180px, calc(var(--ss-zone, 280px) * 0.7));
  }

  .vf-ss-divider {
    width: 14px;
  }

  .vf-ss-middle {
    font-size: 1rem;
    padding: 12px 28px;
  }
}

/* --- Print --- */
@media print {
  .vf-stance-split {
    break-inside: avoid-page;
  }

  .vf-ss-header {
    box-shadow: none;
    border-bottom: 1pt solid #ddd;
  }

  .vf-ss-badge,
  .vf-ss-divider,
  .vf-ss-middle,
  .vf-ss-word {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ===============================
   VIMEO additions (shares the vf-yt-* base styles)
   [VISUAL:vimeo]  — also: [VISUAL:youtube] with a vimeo.com url
   =============================== */

/* Dark placeholder shown when no thumbnail is available
   (e.g. unlisted Vimeo videos) */
.vf-yt-placeholder {
  background: linear-gradient(135deg, #23272e 0%, #10141a 100%);
}

/* Vimeo-flavored play button (rounded rectangle, brand blue on hover) */
.vf-yt-play-bg-vimeo {
  fill: rgba(23, 35, 34, 0.85);
}

.vf-yt-play-vimeo:hover .vf-yt-play-bg-vimeo,
.vf-yt-play-vimeo:focus-visible .vf-yt-play-bg-vimeo {
  fill: #17a3e8; /* vimeo blue */
}

/* ===============================
   PAGE BACKGROUND
   [VISUAL:page-background]
   =============================== */

/* The block renders only a <style> tag; make sure no stray
   wrapper around it takes vertical space in the flow */
style.vf-page-background {
  display: none;
}

/* ===============================
   PYRAMID NOTES (tiered pyramid with sticky notes)
   [VISUAL:pyramid-notes]
   =============================== */

.vf-pyramid-notes {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.vf-pn-title {
  font-weight: 800;
  font-size: 1.05rem;
  margin: 0 0 12px;
  color: #111;
  text-align: center;
}

.vf-pyramid-notes svg {
  width: 100%;
  height: auto;
  display: block;
}

.vf-pn-triangle {
  stroke-width: 3;
  stroke-linejoin: round;
}

.vf-pn-divider {
  stroke-width: 3;
  fill: none;
}

.vf-pn-note {
  stroke-width: 2.5;
  stroke-linejoin: round;
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.18));
}

.vf-pn-note-text {
  font-family: inherit;
  font-size: var(--fs-lg);
  font-weight: 600;
}

.vf-pn-source {
  margin-top: 10px;
  font-size: 0.75rem;
  color: #666;
  font-style: italic;
  text-align: center;
}

@media (max-width: 700px) {
  .vf-pyramid-notes {
    max-width: 100%;
    margin: 1.25rem auto;
  }
}

@media print {
  .vf-pyramid-notes {
    break-inside: avoid-page;
  }

  .vf-pn-note {
    filter: none; /* drop-shadows print poorly */
  }

  .vf-pyramid-notes svg {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ===============================
   TEXT + DIAGRAM (bullets/paragraphs + ANY nested [VISUAL:...] type)
   [VISUAL:text-diagram]
   =============================== */

.vf-text-diagram {
  width: 100%;
  max-width: 1040px;
  margin: 1.4rem auto 1.8rem;
  display: grid;
  gap: 42px;
  align-items: start;
  font-family: inherit;
  box-sizing: border-box;
}

/* Wider than the plain text-image thumbnail column, but capped so a
   nested diagram (key-circles, venn-three...) doesn't grow taller
   than the text just because it scales to the full column width */
.vf-text-diagram-image-right {
  grid-template-columns: minmax(0, 1.3fr) minmax(200px, 260px);
}

.vf-text-diagram-image-left {
  grid-template-columns: minmax(200px, 260px) minmax(0, 1.3fr);
}

.vf-text-diagram-image-left .vf-td-diagram {
  grid-column: 1;
  grid-row: 1;
}

.vf-text-diagram-image-left .vf-td-text {
  grid-column: 2;
  grid-row: 1;
}

/* Text side reuses the same typography as text-image */
.vf-td-text {
  max-width: 620px;
  min-width: 0;
  align-self: start;
}

.vf-td-text p {
  margin: 0 0 1rem;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--lesson-ink-soft, #111);
}

.vf-td-text p:last-child {
  margin-bottom: 0;
}

.vf-td-text ul {
  margin: 0 0 1rem;
  padding: 0 0 0 1.15em;
  list-style: disc;
}

.vf-td-text ul li {
  margin: 0 0 0.6rem;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--lesson-ink-soft, #111);
}

.vf-td-text ul li:last-child {
  margin-bottom: 0;
}

.vf-td-text ul:last-child,
.vf-td-text p:last-child {
  margin-bottom: 0;
}

.vf-td-text strong {
  font-weight: 700;
}

/* Diagram side: center whatever nested diagram renders here,
   pinned to the top of the row (never vertically centered) */
.vf-td-diagram {
  width: 100%;
  min-width: 0;
  align-self: start;
}

.vf-td-diagram .vf-diagram {
  max-width: 100%;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
}

.vf-td-caption {
  margin-top: 6px;
  font-size: var(--fs-sm);
  line-height: 1.2;
  color: #777;
  text-align: center;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

/* --- Mobile: stack, diagram first feels awkward for reading order,
   so keep text first, diagram after, regardless of layout --- */
@media (max-width: 768px) {
  .vf-text-diagram,
  .vf-text-diagram-image-right,
  .vf-text-diagram-image-left {
    max-width: 480px;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 1rem auto 1.5rem;
  }

  .vf-text-diagram-image-left .vf-td-diagram,
  .vf-text-diagram-image-left .vf-td-text {
    grid-column: 1;
  }

  .vf-text-diagram-image-left .vf-td-diagram {
    grid-row: 2;
  }

  .vf-text-diagram-image-left .vf-td-text {
    grid-row: 1;
  }
}

/* --- Print --- */
@media print {
  .vf-text-diagram {
    break-inside: avoid-page;
  }
}

/* ===============================
   THEME-PATCH OVERRIDES (custom2.css lines ~5340)
   The theme rule "#content-area .lesson-card .vf-diagram *"
   (specificity 1,2,0) flattens every element inside diagrams to
   15px !important. These selectors add ".lesson-card" to ours,
   reaching specificity (1,3,0) so they win regardless of
   stylesheet load order. Inline !important styles emitted by the
   JS renderers are the primary defense; this is the backup.
   =============================== */

#content-area .lesson-card .vf-kc-label.vf-kc-fs-14   { font-size: 14px !important; }
#content-area .lesson-card .vf-kc-label.vf-kc-fs-12-5 { font-size: 12.5px !important; }
#content-area .lesson-card .vf-kc-label.vf-kc-fs-11   { font-size: 11px !important; }
#content-area .lesson-card .vf-kc-label.vf-kc-fs-10   { font-size: 10px !important; }
#content-area .lesson-card .vf-kc-label.vf-kc-fs-9    { font-size: 9px !important; }
#content-area .lesson-card .vf-kc-label.vf-kc-fs-8    { font-size: 8px !important; }
#content-area .lesson-card .vf-kc-label.vf-kc-fs-7    { font-size: 7px !important; }

#content-area .lesson-card .vf-kc-label tspan {
  font-size: inherit !important;
}

#content-area .lesson-card .vf-kc-center {
  font-size: var(--fs-lg) !important;
}

#content-area .lesson-card .vf-ti-caption,
#content-area .lesson-card .vf-td-caption {
  font-size: var(--fs-sm) !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

#content-area .lesson-card .vf-yt-caption,
#content-area .lesson-card .vf-yt-credit,
#content-area .lesson-card .vf-kc-source,
#content-area .lesson-card .vf-venn-source,
#content-area .lesson-card .vf-gg-source,
#content-area .lesson-card .vf-cc-source,
#content-area .lesson-card .vf-pl-source,
#content-area .lesson-card .vf-as-source,
#content-area .lesson-card .vf-ac-source,
#content-area .lesson-card .vf-cmp-source,
#content-area .lesson-card .vf-lm-source,
#content-area .lesson-card .vf-fn-source,
#content-area .lesson-card .vf-ss-source,
#content-area .lesson-card .vf-pn-source {
  font-size: var(--fs-xs) !important;
  line-height: 1.35 !important;
  font-weight: 400 !important;
}

#content-area .lesson-card .vf-yt-caption .vf-yt-link {
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
}

/* ===============================
   REFERENCES (bibliography) & NOTE (aside)
   [VISUAL:references]  [VISUAL:note]
   =============================== */

.vf-references {
  max-width: 860px;
  margin: 1.6rem 0 1.2rem;
  padding-top: 0.9rem;
  border-top: 1px solid #e4e4e4;
}

.vf-refs-title,
#content-area .lesson-card .vf-refs-title {
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 0.6rem;
}

.vf-refs-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* APA-style hanging indent */
.vf-refs-list li,
#content-area .lesson-card .vf-refs-list li {
  font-size: var(--fs-sm) !important;
  line-height: 1.5 !important;
  color: #444;
  padding-left: 1.6em;
  text-indent: -1.6em;
  margin-bottom: 0.55rem;
  overflow-wrap: break-word;
  word-break: break-word;
}

.vf-refs-list li:last-child {
  margin-bottom: 0;
}

/* Emphasised "Authors. (Year)." head — the anchor for scanning */
.vf-refs-head {
  font-weight: 650;
  color: #222;
}

/* A / B / C dividers (letters: on) */
.vf-refs-letter,
#content-area .lesson-card .vf-refs-letter {
  font-size: var(--fs-xs) !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em;
  color: #999;
  border-bottom: 1px solid #e7e7e7;
  padding: 0 0 3px !important;
  margin: 14px 0 8px;
  text-indent: 0 !important;
  list-style: none;
}

.vf-refs-letter:first-child {
  margin-top: 0;
}

.vf-refs-list a,
#content-area .lesson-card .vf-refs-list a {
  font-size: inherit !important;
  color: #1a4fb0;
  text-decoration: none;
}

.vf-refs-list a:hover {
  text-decoration: underline;
}

/* --- Note / aside callout --- */
.vf-note {
  max-width: 860px;
  margin: 1.2rem 0;
  padding: 12px 18px;
  border-left: 4px solid #b9c8e8;
  background: #f6f8fc;
  border-radius: 0 8px 8px 0;
}

.vf-note-label,
#content-area .lesson-card .vf-note-label {
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5872a8;
  margin-bottom: 4px;
}

.vf-note p,
#content-area .lesson-card .vf-note p {
  font-size: var(--fs-sm) !important;
  line-height: 1.5 !important;
  color: #333;
  margin: 0 0 0.6rem;
}

.vf-note p:last-child {
  margin-bottom: 0;
}

/* "accent: <colour>" — same shape, different edge and wash. Orange is
   the one that matters here: a safeguarding disclaimer should not look
   like a neutral aside. The label colour carries most of the signal, so
   the backgrounds stay pale enough for body text. */
.vf-note-orange {
  border-left-color: #e07b28;
  background: #fdf2e8;
}

.vf-note-orange .vf-note-label,
#content-area .lesson-card .vf-note-orange .vf-note-label {
  color: #a8500f;
}

.vf-note-pink {
  border-left-color: #c9569f;
  background: #fcf0f7;
}

.vf-note-pink .vf-note-label,
#content-area .lesson-card .vf-note-pink .vf-note-label {
  color: #8d3670;
}

.vf-note-yellow {
  border-left-color: #efb51e;
  background: #fdf8e6;
}

.vf-note-yellow .vf-note-label,
#content-area .lesson-card .vf-note-yellow .vf-note-label {
  color: #7a5c00;
}

.vf-note-green {
  border-left-color: #2e9e5b;
  background: #eef8f1;
}

.vf-note-green .vf-note-label,
#content-area .lesson-card .vf-note-green .vf-note-label {
  color: #1f6b3d;
}

.vf-note a,
#content-area .lesson-card .vf-note a {
  font-size: inherit !important;
  color: #1a4fb0;
}

/* --- Mobile --- */
@media (max-width: 700px) {
  .vf-refs-list li,
  #content-area .lesson-card .vf-refs-list li {
    font-size: var(--fs-xs) !important;
  }

  .vf-note {
    padding: 10px 14px;
  }
}

/* --- Print --- */
@media print {
  /* Μια μεγάλη βιβλιογραφία πρέπει να ρέει σε πολλές σελίδες —
     κρατάμε ακέραιη κάθε καταχώρηση, όχι όλο το section */
  .vf-references {
    break-inside: auto;
  }

  .vf-refs-list li {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Ένα γράμμα-διαχωριστικό (letters: on) δεν μένει ποτέ ορφανό
     στο τέλος σελίδας — κολλάει με την πρώτη καταχώρησή του */
  .vf-refs-letter {
    break-after: avoid;
    page-break-after: avoid;
  }

  .vf-note {
    break-inside: avoid-page;
  }

  /* Στο χαρτί τα links της βιβλιογραφίας δείχνουν το URL τους */
  .vf-refs-list a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555;
    word-break: break-all;
  }
}

/* ===============================
   SHAPE FOUR TEXT
   ===============================
   ### Παράδειγμα χρήσης

[VISUAL:shape-four-text]
title: Moroccan Music Initiatives Cycle
image: ./content/module5/morocco-music.svg
imageAlt: Infinity cycle of the four phases
imageWidth: 560px

topLeftColor: yellow
topLeftHeading: Learn Songs
topLeft: Acquire songs from various home cultures.

topRightColor: pink
topRightHeading: Perform Songs
topRight: Present songs in public or private settings.

bottomLeftColor: purple
bottomLeftHeading: Create Exchange
bottomLeft: Facilitate intercultural dialogue and understanding.

bottomRightColor: orange
bottomRightHeading: Share Songs
bottomRight: Distribute songs among community members.
[/VISUAL]

*/

.vf-shape-four-text {
  /* accent = χρώμα επικεφαλίδας (δίχρωμο κείμενο: επικεφαλίδα + ουδέτερη
     περιγραφή). Οι αποχρώσεις είναι σκουρότερες εκδοχές των brand
     χρωμάτων, γιατί ένα brand χρώμα φτιαγμένο για επιφάνειες δεν είναι
     αναγνώσιμο ως κείμενο: το pink #d63bbd έδινε 4.02:1 σε λευκό και το
     yellow #b98d00 μόλις 3.06:1, με ελάχιστο το 4.5:1. Τώρα κανένα δεν
     πέφτει κάτω από 5.3:1. Τα brand vars μένουν διαθέσιμα ως override. */
  --vf-sft-yellow: var(--pulse-art-yellow-text, #8a6400);
  --vf-sft-orange: var(--pulse-art-orange-text, #b8420f);
  --vf-sft-blue:   var(--pulse-art-blue, #0219fc);
  --vf-sft-pink:   var(--pulse-art-pink-text, #b02a99);
  --vf-sft-purple: #5b26c9;
  --vf-sft-green:  #1e7b34;
  --vf-sft-teal:   #0f766e;

  width: 100%;
  max-width: 860px;
  margin: 2rem auto;
  font-family: inherit;
  box-sizing: border-box;
}

.vf-shape-four-text,
.vf-shape-four-text * {
  box-sizing: border-box;
  min-width: 0;
}

.vf-sft-title {
  margin: 0 0 1.4rem 0;

  /* Overridable per block with "titleSize:". */
  font-size: var(--vf-sft-title-size, 1.25rem);
  line-height: 1.3;
  font-weight: 700;
  text-align: center;
  color: var(--quaternary, #171940);
}

.vf-sft-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* κάθε μισό → κέντρα στο 1/4 και στα 3/4 */
  grid-template-rows: auto auto auto;
  column-gap: 24px;
  row-gap: 14px;

  /* Ήταν "end", ώστε τα πάνω κελιά να ακουμπούν στο κεντρικό σχήμα.
     Με ορατά περιγράμματα αυτό αφήνει κουτιά διαφορετικού ύψους να
     κρέμονται άνισα· το stretch τα εξισώνει ανά γραμμή. */
  align-items: stretch;
}

/* ---- κελιά κειμένου ---- */
.vf-sft-cell {
  max-width: 300px;
  justify-self: center;   /* κεντράρισμα μέσα στο μισό → 1/4 και 3/4 */
  text-align: center;

  /* Το χρώμα ζούσε μόνο στην επικεφαλίδα, οπότε τα τέσσερα τεταρτημόρια
     δεν είχαν κανένα όριο και το διάγραμμα διαβαζόταν ως τέσσερα
     ασύνδετα κομμάτια κειμένου. Το περίγραμμα χρησιμοποιεί το ίδιο
     --vf-sft-accent που ορίζει ήδη κάθε κελί από το χρώμα του. */
  padding: 14px 16px;
  border: 2px solid var(--vf-sft-accent, #d6d8e0);
  border-radius: 4px;
}

/* Τα κελιά χωρίς περιεχόμενο είναι κρατημένες θέσεις του grid: ένα
   περίγραμμα εκεί θα ήταν ένα άδειο κουτί. */
.vf-sft-cell.vf-sft-empty {
  padding: 0;
  border: 0;
}

.vf-sft-top-left     { grid-column: 1; grid-row: 1; }
.vf-sft-top-right    { grid-column: 2; grid-row: 1; }
.vf-sft-bottom-left  { grid-column: 1; grid-row: 3; align-self: start; }
.vf-sft-bottom-right { grid-column: 2; grid-row: 3; align-self: start; }

.vf-sft-heading {
  margin-bottom: 5px;

  /* Overridable per block with "headingSize:". */
  font-size: var(--vf-sft-heading-size, 16px);
  line-height: 1.25;
  font-weight: 700;
  color: var(--vf-sft-accent, #111);
}

.vf-sft-text {
  /* Overridable per block with "textSize:". */
  font-size: var(--vf-sft-text-size, 13.5px);
  line-height: 1.4;
  font-weight: 400;
  color: #111;
}

.vf-sft-text strong,
.vf-sft-heading strong {
  font-weight: 700;
}

/* ---- χρώματα επικεφαλίδων ---- */
.vf-sft-yellow { --vf-sft-accent: var(--vf-sft-yellow); }
.vf-sft-orange { --vf-sft-accent: var(--vf-sft-orange); }
.vf-sft-blue   { --vf-sft-accent: var(--vf-sft-blue); }
.vf-sft-pink   { --vf-sft-accent: var(--vf-sft-pink); }
.vf-sft-purple { --vf-sft-accent: var(--vf-sft-purple); }
.vf-sft-green  { --vf-sft-accent: var(--vf-sft-green); }
.vf-sft-teal   { --vf-sft-accent: var(--vf-sft-teal); }

/* ---- κεντρικό σχήμα ---- */
.vf-sft-shape {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vf-sft-shape img {
  display: block;
  width: 100%;
  max-width: var(--vf-sft-shape-w, 560px);
  height: auto;
}

.vf-sft-shape-fallback {
  padding: 26px 34px;
  border-radius: 999px;
  border: 3px solid var(--quaternary, #171940);

  /* Overridable per block with "centerSize:"; 15px is only a default. */
  font-size: var(--vf-sft-center-size, 15px);
  font-weight: 700;
  text-align: center;
  color: var(--quaternary, #171940);
}

/* ---- κινητά: μία στήλη, σχήμα πρώτο ---- */
@media (max-width: 768px) {
  .vf-shape-four-text {
    max-width: 420px;
  }

  .vf-sft-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 14px;
  }

  .vf-sft-cell,
  .vf-sft-shape {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
  }

  .vf-sft-shape        { order: 1; }
  .vf-sft-top-left     { order: 2; }
  .vf-sft-top-right    { order: 3; }
  .vf-sft-bottom-left  { order: 4; }
  .vf-sft-bottom-right { order: 5; }

  .vf-sft-shape img {
    max-width: min(var(--vf-sft-shape-w, 560px), 320px);
  }

  .vf-sft-empty { display: none; }
}

/* ---- εκτύπωση ---- */
@media print {
  .vf-shape-four-text {
    max-width: 100%;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .vf-sft-shape img {
    max-width: 110mm;
    max-height: 60mm;
    width: auto;
  }

  .vf-sft-title   { font-size: 13pt; }
  .vf-sft-heading { font-size: 11pt; }
  .vf-sft-text    { font-size: 10pt; line-height: 1.3; }
}


/* ===============================
   EMPHASIS LIST
   ===============================
   ### Παραδείγματα χρήσης

[VISUAL:emphasis-list]
style: lead

- color: blue
  lead: Tools and outputs:
  text: Multimedia editing (audio/video), digital story archives, classroom publication/sharing.

- color: blue
  lead: Outcomes:
  text: Student-centred production, and use of stories to build classroom learning communities.
[/VISUAL]

[VISUAL:emphasis-list]
style: box

- color: orange
  lead: Risks:
  text: Risk of exposing sensitive personal or family information to a wider audience.
[/VISUAL]

   style: lead (default) = χρωματιστό bold lead
   style: line = χρωματιστή κάθετη γραμμή αριστερά + bold lead
   style: box = κάθε στοιχείο σε χρωματιστό πλαίσιο πλήρους πλάτους
   accent: default χρώμα · ανά στοιχείο override με - color:
   bullets: off (default) — μόνο με bullets: on εμφανίζονται
   width: full (default) ή normal (560px)
   lineWidth: πάχος πλαϊνής γραμμής/μπάρας — px ("8"), "thick", "thin"
*/

.vf-emphasis-list {
  /* Παλέτα 7 διακριτών χρωμάτων. Ανά χρώμα: lead-κείμενο (WCAG 4.5:1
     πάνω στο tint), tint πλαισίου, έντονη απόχρωση για μπάρα/γραμμή. */
  --vf-el-blue:    var(--pulse-art-blue, #0219fc);
  --vf-el-teal:    #06718a;
  --vf-el-green:   #117e39;
  --vf-el-amber:   #935e07;
  --vf-el-orange:  #b44211;
  --vf-el-crimson: #b82051;
  --vf-el-violet:  #7c3aed;

  --vf-el-blue-bg:    #e6e8ff;
  --vf-el-teal-bg:    #e6f4f7;
  --vf-el-green-bg:   #e8f6ed;
  --vf-el-amber-bg:   #fef5e7;
  --vf-el-orange-bg:  #faede7;
  --vf-el-crimson-bg: #fae9ef;
  --vf-el-violet-bg:  #f2ebfd;

  --vf-el-blue-line:    var(--pulse-art-blue, #0219fc);
  --vf-el-teal-line:    #0891b2;
  --vf-el-green-line:   #16a34a;
  --vf-el-amber-line:   #f59e0b;
  --vf-el-orange-line:  var(--pulse-art-orange, #CD4B13);
  --vf-el-crimson-line: #d1245c;
  --vf-el-violet-line:  #7c3aed;

  width: 100%;
  max-width: 560px;   /* width: normal — συνεπές με τους άλλους συμπαγείς τύπους */
  margin: 1.6rem auto;
  font-family: inherit;
  box-sizing: border-box;
}

.vf-emphasis-list,
.vf-emphasis-list * {
  box-sizing: border-box;
  min-width: 0;
}

/* πλήρες πλάτος (default) — παρακάμπτει το max-width του .vf-diagram */
.vf-emphasis-list.vf-el-full {
  max-width: 100%;
}

.vf-el-title {
  margin: 0 0 0.9rem 0;
  font-size: 1.05rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--quaternary, #171940);
}

/* ---- στοιχείο ---- */
.vf-el-item {
  display: flex;
  /* baseline alignment left single-line boxes looking bottom-heavy: the
     bullet and the paragraph shared a baseline instead of sharing the
     box's middle, so the space above the text read as larger than the
     space below it. */
  align-items: center;
  gap: 7px;
}

/* "sideIntro:" / "sideItem:" put a column of prose next to the list.
   Text on the left by default, which is the reading order the slides use;
   "sidePosition: right" swaps them. */
.vf-el-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.vf-el-main {
  min-width: 0;
}

.vf-el-side {
  min-width: 0;
}

/* With the prose on the right the two columns swap in the DOM, so nothing
   extra is needed here; the class is kept as a styling hook. */
.vf-el-has-side .vf-el-title {
  margin-top: 0;
}

.vf-el-side-intro {
  margin: 0 0 12px;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: #111;
}

.vf-el-side-items {
  margin: 0;
  padding-left: 1.1em;
}

.vf-el-side-items li {
  margin-bottom: 12px;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: #111;
}

.vf-el-side-items li:last-child {
  margin-bottom: 0;
}

/* Trailing reference, moved to its own line by "noteBreak: on". */
.vf-el-note {
  display: block;
}

@media (max-width: 900px) {
  .vf-el-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
}

/* "columns: 2" (or 3). The items move into their own wrapper so the
   title and the source can stay full width above and below them. */
.vf-el-items {
  display: grid;
  column-gap: 16px;
  align-items: start;
}

.vf-el-cols-2 .vf-el-items {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vf-el-cols-3 .vf-el-items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vf-el-source {
  margin-top: 4px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #555;
  text-align: right;
}

@media (max-width: 700px) {
  .vf-el-cols-2 .vf-el-items,
  .vf-el-cols-3 .vf-el-items {
    grid-template-columns: 1fr;
  }
}


/* The page wraps the lesson in #content-area and sets `#content-area p
   { margin-bottom: 0.9rem }`. That is an ID selector, so no amount of
   class nesting here can outrank it — and inside a flex box the child's
   margin does not collapse, it is added to the box, which is what made
   these read as bottom-heavy despite symmetric padding. !important is
   the only way to win short of naming the host page's ID in here, which
   would tie this stylesheet to one particular template. */
.vf-emphasis-list .vf-el-body {
  margin: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: #111;
}

.vf-emphasis-list .vf-el-side-intro {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

.vf-emphasis-list .vf-el-side-items li > p {
  margin: 0 !important;
}

.vf-el-lead {
  font-weight: 700;
  color: var(--vf-el-accent, #111);
}

.vf-el-body strong {
  font-weight: 700;
}

/* ---- χρώματα ---- */
.vf-el-blue    { --vf-el-accent: var(--vf-el-blue);    --vf-el-accent-bg: var(--vf-el-blue-bg);    --vf-el-accent-line: var(--vf-el-blue-line); }
.vf-el-teal    { --vf-el-accent: var(--vf-el-teal);    --vf-el-accent-bg: var(--vf-el-teal-bg);    --vf-el-accent-line: var(--vf-el-teal-line); }
.vf-el-green   { --vf-el-accent: var(--vf-el-green);   --vf-el-accent-bg: var(--vf-el-green-bg);   --vf-el-accent-line: var(--vf-el-green-line); }
.vf-el-amber,
.vf-el-yellow  { --vf-el-accent: var(--vf-el-amber);   --vf-el-accent-bg: var(--vf-el-amber-bg);   --vf-el-accent-line: var(--vf-el-amber-line); }
.vf-el-orange  { --vf-el-accent: var(--vf-el-orange);  --vf-el-accent-bg: var(--vf-el-orange-bg);  --vf-el-accent-line: var(--vf-el-orange-line); }
.vf-el-crimson,
.vf-el-pink    { --vf-el-accent: var(--vf-el-crimson); --vf-el-accent-bg: var(--vf-el-crimson-bg); --vf-el-accent-line: var(--vf-el-crimson-line); }
.vf-el-violet,
.vf-el-purple  { --vf-el-accent: var(--vf-el-violet);  --vf-el-accent-bg: var(--vf-el-violet-bg);  --vf-el-accent-line: var(--vf-el-violet-line); }

/* ---- style: lead (bullets + χρωματιστό bold lead) ---- */
.vf-el-style-lead .vf-el-item {
  margin: 0 0 10px 0;
}

.vf-el-style-lead .vf-el-item:last-child {
  margin-bottom: 0;
}

.vf-el-bullet {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #111;
  transform: translateY(1px);
}

/* ---- style: box (χρωματιστό πλαίσιο πλήρους πλάτους) ---- */
.vf-el-style-box .vf-el-item {
  margin: 0 0 8px 0;
  padding: 9px 16px;
  border-left: var(--vf-el-line-w, 6px) solid var(--vf-el-accent-line, var(--vf-el-accent, #111));
  border-radius: 10px;
  background: var(--vf-el-accent-bg, #f4f4f4);
}

.vf-el-style-box .vf-el-item:last-child {
  margin-bottom: 0;
}

/* ---- style: line (χρωματιστή κάθετη γραμμή αριστερά στο lead) ---- */
.vf-el-style-line .vf-el-item {
  margin: 0 0 10px 0;
  padding-left: 12px;
  border-left: var(--vf-el-line-w, 5px) solid var(--vf-el-accent-line, var(--vf-el-accent, #111));
}

.vf-el-style-line .vf-el-item:last-child {
  margin-bottom: 0;
}

/* ---- κινητά ---- */
@media (max-width: 768px) {
  .vf-el-body {
    font-size: var(--fs-base);
    line-height: 1.5;
  }

  .vf-el-style-box .vf-el-item {
    padding: 9px 14px;
  }

  .vf-el-style-line .vf-el-item {
    padding-left: 10px;
  }
}

/* ---- εκτύπωση ---- */
@media print {
  .vf-emphasis-list {
    max-width: 100%;
  }

  .vf-el-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .vf-el-body {
    font-size: 10.5pt;
    line-height: 1.35;
  }

  .vf-el-style-box .vf-el-item {
    background: var(--vf-el-accent-bg, #f4f4f4) !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


/* ===============================
   DIAGRAM ZOOM (the ⤢ button on every diagram)
   ===============================
   The renderer builds .vf-dz-overlay / -scroll / -canvas / -content /
   -close and the .vf-diagram-zoom button, but none of them were ever
   styled. Without position:fixed the overlay was just a div appended to
   <body>, so opening it dumped the clone at the far left of the page.
   Sizing is done in JS (it measures the diagram and sets width/transform
   on .vf-dz-content), so the rules here only place and frame things. */

.vf-diagram {
  position: relative;
}

.vf-diagram-zoom {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  font-size: var(--fs-base);
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.vf-diagram:hover .vf-diagram-zoom,
.vf-diagram-zoom:focus-visible {
  opacity: 1;
}

.vf-diagram-zoom:hover {
  background: #fff;
}

/* Touch devices have no hover, so the button stays visible there. */
@media (hover: none) {
  .vf-diagram-zoom {
    opacity: 1;
  }
}

.vf-dz-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  background: rgba(10, 10, 12, 0.88);
  -webkit-tap-highlight-color: transparent;
}

.vf-dz-overlay.vf-dz-open {
  display: block;
}

.vf-dz-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

/* JS sets the box's width/height to the scaled size; this only centres
   the scaled content inside it. */
.vf-dz-canvas {
  position: relative;
  flex: 0 0 auto;
  margin: auto;
}

/* transform-origin must be the top left corner: JS positions the box
   assuming the scale grows down and to the right from there. */
.vf-dz-content {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: top left;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  box-sizing: content-box;
}

.vf-dz-close {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 1;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
}

.vf-dz-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

body.vf-lightbox-locked {
  overflow: hidden;
}

@media (max-width: 700px) {
  .vf-dz-scroll {
    padding: 10px;
  }

  .vf-dz-close {
    top: 8px;
    right: 8px;
  }
}


/* ===============================
   IMAGE ZOOM / LIGHTBOX
   =============================== */

/* Any real content image inside a diagram can be enlarged.
   Video thumbnails (YouTube/Vimeo) are excluded — they already
   have their own click behaviour (play button). */
.vf-diagram img:not(.vf-yt-thumb) {
  cursor: zoom-in;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.vf-diagram img:not(.vf-yt-thumb):hover,
.vf-diagram img:not(.vf-yt-thumb):focus-visible {
  opacity: 0.92;
}

/* "zoom: off" — the figure is not separately enlargeable, so it must not
   invite a click: no magnifier cursor, no hover fade. Written with the
   same shape as the rule above (and placed after it) because a plain
   .vf-no-image-zoom .vf-cipt-image selector loses to it on specificity
   and would leave the cursor unchanged. The diagram's own zoom button
   still enlarges figure and text together. */
.vf-diagram.vf-no-image-zoom img:not(.vf-yt-thumb) {
  cursor: default;
}

.vf-diagram.vf-no-image-zoom img:not(.vf-yt-thumb):hover,
.vf-diagram.vf-no-image-zoom img:not(.vf-yt-thumb):focus-visible {
  opacity: 1;
}

/* Overlay */
.vf-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(10, 10, 12, 0.88);
  animation: vf-lightbox-fade-in 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.vf-lightbox-overlay.vf-lightbox-open {
  display: flex;
}

@keyframes vf-lightbox-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.vf-lightbox-figure {
  position: relative;
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.vf-lightbox-img {
  display: block;
  max-width: 92vw;
  max-height: 84vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  cursor: zoom-out;
  animation: vf-lightbox-scale-in 0.15s ease;
}

@keyframes vf-lightbox-scale-in {
  from { transform: scale(0.97); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.vf-lightbox-caption {
  color: #f2f2f2;
  font-size: var(--fs-sm) !important;
  text-align: center;
  max-width: 80vw;
  opacity: 0.85;
}

.vf-lightbox-close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: #111;
  font-size: var(--fs-lg);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.vf-lightbox-close:hover {
  background: #eee;
}

@media (max-width: 700px) {
  .vf-lightbox-overlay {
    padding: 16px;
  }

  .vf-lightbox-close {
    top: -14px;
    right: 0;
  }
}

@media print {
  .vf-lightbox-overlay {
    display: none !important;
  }
}

/* Optional image inside a cell (e.g. a photo + credit line next
   to text cells in the same grid) */
.vf-gg-figure {
  margin: 8px 0 0;
}

/* When "imageWidth:" is set, the shapes wrapper becomes a fixed-width
   block. text-align (which is all "align: center" sets on the cell) has
   no effect on a block, so it needs auto margins of its own. */
.vf-gg-cell.vf-gg-align-center .vf-gg-figure .vf-svg-shapes,
.vf-gg-cell.vf-gg-align-center .vf-gg-figure > .vf-gg-image {
  margin-inline: auto;
}

.vf-gg-cell.vf-gg-align-right .vf-gg-figure .vf-svg-shapes {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

.vf-gg-image {
  display: block;
  width: var(--gg-img-w, 100%);
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  margin-inline: auto;

  /* Optional frame, set per cell with "imageBorder:". Defaults to none,
     so no existing image changes. box-sizing keeps the declared
     imageWidth the outer width rather than growing by the border. */
  border: var(--gg-img-border, none);
  box-sizing: border-box;
}

/* Flags. Two problems the generic image rules can't know about: a flag
   with a white band (France, Italy, Greece, Nigeria …) loses that band
   against a white page and reads as two detached blocks, and the 8px
   radius above is far too round at flag sizes. Scoped to the /flags/
   folder so every country added later is covered without touching this
   file again. object-fit: contain because a flag's ratio is part of the
   flag — cropping one is wrong in a way cropping a photo is not. */
.vf-gg-image[src*="/flags/"],
.vf-ti-image img[src*="/flags/"] {
  border: 1px solid #d0d0d0;
  border-radius: 2px;
  background: #fff;
  object-fit: contain;
}

.vf-gg-image-caption {
  margin-top: 6px;
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: #666;
  text-align: center;
}

.vf-gg-image-caption a {
  color: #1a4fb0;
}

.vf-gg-cell-media {
  display: flex;
  flex-direction: column;
}

/* --- Per-cell alignment (align: / valign: in the markdown) --- */
.vf-gg-cell.vf-gg-align-center {
  text-align: center;
}

.vf-gg-cell.vf-gg-align-center .vf-gg-items {
  list-style-position: inside;
  padding-left: 0;
}

.vf-gg-cell.vf-gg-align-right {
  text-align: right;
}

.vf-gg-cell.vf-gg-align-right .vf-gg-items {
  list-style-position: inside;
  padding-left: 0;
}

/* Vertical centering turns the cell into a flex column; the mobile
   chip keeps its natural width via align-self. */
.vf-gg-cell.vf-gg-valign-middle,
.vf-gg-cell.vf-gg-valign-bottom {
  display: flex;
  flex-direction: column;
}

.vf-gg-cell.vf-gg-valign-middle {
  justify-content: center;
}

.vf-gg-cell.vf-gg-valign-bottom {
  justify-content: flex-end;
}

.vf-gg-cell .vf-gg-chip {
  align-self: flex-start;
}

.vf-gg-cell.vf-gg-align-center .vf-gg-chip {
  align-self: center;
}

.vf-gg-cell.vf-gg-align-right .vf-gg-chip {
  align-self: flex-end;
}

/* --- Round photo (imageShape: round) --- */
.vf-gg-figure.vf-gg-image-round .vf-gg-image {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: var(--gg-img-w, min(100%, 280px));
  margin-inline: auto;
}

.vf-gg-cell.vf-gg-align-right .vf-gg-figure.vf-gg-image-round .vf-gg-image {
  margin-inline: auto 0;
}


/* ===============================
   LINE CHART
   [VISUAL:line-chart]
   =============================== */

.vf-line-chart {
  max-width: 760px;
  margin: 1.4rem auto 1.6rem;
}

.vf-lc-title {
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 1.05rem;
  text-align: center;
  color: #2b2b2b;
}

.vf-line-chart svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Gridlines sit behind everything and should read as a ruler, not as
   data: thin, pale, and no line at the top or bottom to box the plot in. */
.vf-lc-grid {
  stroke: #e6e6e6;
  stroke-width: 1;
}

.vf-lc-axis-line {
  stroke: #bdbdbd;
  stroke-width: 1.5;
}

.vf-lc-axis {
  font-family: inherit;
  font-size: var(--fs-lg);
  fill: #666;
}

.vf-lc-line {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vf-lc-error {
  stroke-width: 2;
}

/* The bracket marks a statistically significant span; it is an
   annotation over the data, so it takes the ink colour rather than a
   series colour. */
.vf-lc-bracket {
  stroke: #111;
  stroke-width: 4;
}

.vf-lc-bracket-label {
  font-family: inherit;
  font-size: var(--fs-xl);
  font-weight: 800;
  fill: #111;
}

.vf-lc-legend-swatch {
  stroke-width: 7;
  stroke-linecap: round;
}

.vf-lc-legend-label {
  font-family: inherit;
  font-size: var(--fs-lg);
  fill: #444;
}

.vf-lc-source {
  margin-top: 8px;
  font-size: 0.78rem;
  font-style: italic;
  color: #666;
  text-align: center;
}


/* ===============================
   FOUR TEXT IMAGE — colour bars + 3-text layout
   Append at the END of visual-diagrams.css.
   =============================== */

/* 1) The colour bar always faces the image, whatever the colour:
      left column -> bar on its right, right column -> bar on its left,
      text under the image -> bar on top.
      (Before, the side came from the colour: yellow/pink always left,
      orange/blue always right, so a yellow text on the left pointed away.) */
.vf-fti-orange { --fti-color: var(--pulse-art-orange, #CD4B13); }
.vf-fti-blue   { --fti-color: var(--pulse-art-blue, #0219fc); }
.vf-fti-yellow { --fti-color: var(--pulse-art-yellow, #FFF000); }
.vf-fti-pink   { --fti-color: var(--pulse-art-purple, #f5a9ed); }

.vf-four-text-image .vf-fti-top-left,
.vf-four-text-image .vf-fti-bottom-left {
  border-left: 0;
  border-right: 6px solid var(--fti-color, transparent);
}

.vf-four-text-image .vf-fti-top-right,
.vf-four-text-image .vf-fti-bottom-right {
  border-right: 0;
  border-left: 6px solid var(--fti-color, transparent);
}

/* 2) Three texts (two beside the image, one under it).
      The renderer adds .vf-fti-three and gives the bottom text
      .vf-fti-bottom-center. */
.vf-four-text-image.vf-fti-three {
  --fti-image-w: clamp(180px, 30vw, 260px);
  max-width: 900px;                 /* wider: side texts get fewer, longer lines */
  grid-template-columns: minmax(0, 1fr) var(--fti-image-w) minmax(0, 1fr);
}

.vf-four-text-image.vf-fti-three .vf-fti-image {
  grid-row: 1;
}

.vf-four-text-image .vf-fti-bottom-center {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 2;
  justify-self: center;
  width: 100%;
  max-width: 480px;
  padding: 22px 16px 0;
  text-align: center;
  border: 0;
}

/* short bar, about as wide as the base of the image, not the whole text */
.vf-four-text-image .vf-fti-bottom-center::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(var(--fti-image-w, 220px) * 0.7);
  height: 6px;
  transform: translateX(-50%);
  background: var(--fti-color, transparent);
}

/* mobile: one column, every bar on the left, as before */
@media (max-width: 768px) {
  .vf-four-text-image .vf-fti-text {
    border-top: 0;
    border-right: 0;
    border-left: 6px solid var(--fti-color, transparent);
    padding-left: 12px;
    padding-right: 0;
  }

  .vf-four-text-image.vf-fti-three {
    max-width: 420px;
    grid-template-columns: 1fr;
  }

  .vf-four-text-image .vf-fti-bottom-center {
    grid-column: 1;
    grid-row: auto;
    order: 4;
    justify-self: stretch;
    max-width: none;
    padding: 12px 0 12px 12px;
    text-align: left;
  }

  .vf-four-text-image .vf-fti-bottom-center::before {
    display: none;
  }
}

/* print: pdp-print-dynamic.js forces the 4-text grid with !important */
.pdp-print-step-content .vf-four-text-image.vf-fti-three {
  --fti-image-w: 40mm;
}
.pdp-print-step-content .vf-four-text-image.vf-fti-three .vf-fti-image {
  grid-row: 1 !important;
}
.pdp-print-step-content .vf-four-text-image.vf-fti-three .vf-fti-bottom-center {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  justify-self: center !important;
  max-width: 120mm !important;
  text-align: center !important;
  padding-top: 5mm !important;
}
.pdp-print-step-content .vf-four-text-image .vf-fti-bottom-center::before {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

/* ============================
   FEATURE FLOW | σύμβολα αντί για βελάκια
   Στο md:  connector: + =
   Το JS βάζει data-connector στις κάρτες και vf-ff-symbols στο block.
   Χωρίς connector: τα βελάκια μένουν όπως ήταν.
   ============================ */
.vf-feature-flow:not(.vf-feature-flow-reverse) .vf-panel[data-connector]::before {
  content: attr(data-connector);
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--pulse-art-blue, #0219fc);
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 36px;
  text-align: center;
  right: calc(-1 * (var(--vf-flow-gap) / 2 + 18px));
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

/* λίγο φαρδύτερο κενό, για να χωράει ο κύκλος χωρίς να πατάει στις κάρτες */
.vf-feature-flow.vf-ff-symbols .vf-feature-flow-grid {
  --vf-flow-gap: 44px;
}

/* ο κύκλος παίρνει το χρώμα της κάρτας από την οποία ξεκινά */
.vf-feature-flow .vf-panel.vf-yellow[data-connector]::before { background: var(--pulse-art-yellow, #FFF000); color: #171940; }
.vf-feature-flow .vf-panel.vf-orange[data-connector]::before { background: var(--pulse-art-orange, #CD4B13); }
.vf-feature-flow .vf-panel.vf-pink[data-connector]::before   { background: var(--pulse-art-purple, #f5a9ed); color: #171940; }
.vf-feature-flow .vf-panel.vf-green[data-connector]::before  { background: var(--pulse-art-green, #0E9F6E); }
.vf-feature-flow .vf-panel.vf-teal[data-connector]::before   { background: var(--pulse-art-teal, #0694A2); }
.vf-feature-flow .vf-panel.vf-red[data-connector]::before    { background: var(--pulse-art-red, #E02424); }
.vf-feature-flow .vf-panel.vf-violet[data-connector]::before { background: var(--pulse-art-violet, #6941C6); }

@media (max-width: 768px) {
  /* στο κινητό: χωρίς βελάκια, το σύμβολο κάτω από την κάρτα */
  .vf-feature-flow.vf-ff-symbols .vf-panel::after {
    display: none !important;
  }

  .vf-feature-flow.vf-ff-symbols .vf-panel[data-connector]::after {
    content: attr(data-connector) !important;
    display: block !important;
    left: 50% !important;
    bottom: calc(-1 * (var(--vf-flow-gap) / 2 + 16px)) !important;
    transform: translateX(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    border: 0 !important;
    border-radius: 50%;
    background: var(--pulse-art-blue, #0219fc);
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 32px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  }
}