/*
  Vertical Accordion Stack

  A variant of the Vertical Accordion: the image column becomes an isometric
  layer stack, and each layer is linked to one accordion step. Opening a step
  colours its layer and stacks it, and every layer below it, on the bottom
  layer; the layers above keep floating.

  Layout and the illustration live here rather than in Tailwind utilities,
  because tailwind.css is precompiled and would not contain them.

  The section never takes the theme's `dark` class (see module.html), but text
  colours still use selectors of at least (0,3,1), so they also hold if the
  module ever sits inside a `.dark` wrapper: the light-card reset in
  tailwind.css (`:is(.dark) :is(.bg-light, ...) :is(h1, .h1, ..., p, li)`) is
  (0,3,0).
*/

.vertical-accordion-stack {
  --vas-ink: #0D0D0D;
  --vas-muted: #65645F;
  --vas-rail: #DFDDD4;
  --vas-focus: #0E602A;
  --vas-ease-soft: cubic-bezier(0.4, 0, 0.6, 1);
  /* Moves settle without overshoot, so a landing layer never dips into the pile. */
  --vas-ease-move: cubic-bezier(0.45, 0, 0.2, 1);
}

/* ------------------------------------------------------------------ card */

/* The card is positioned so that it paints above the section's image overlay
   (BACKGROUND.CREATE draws that as an absolutely positioned ::before), which
   would otherwise dim the card and swallow clicks on the steps. */
.vertical-accordion-stack .vas-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "intro"
    "stage"
    "steps";
  row-gap: 24px;
  padding: 20px;
}

.vertical-accordion-stack .vas-intro { grid-area: intro; }
.vertical-accordion-stack .vas-stage { grid-area: stage; }
.vertical-accordion-stack .vas-steps { grid-area: steps; }

@media (min-width: 768px) {
  .vertical-accordion-stack .vas-card {
    padding: 32px;
    row-gap: 32px;
  }
}

/* One column keeps the text to a readable measure; the stage stays full width. */
@media (max-width: 1199px) {
  .vertical-accordion-stack .vas-intro,
  .vertical-accordion-stack .vas-steps { max-width: 760px; }
}

/* Two columns from 1200px. Below that the stage column would be too narrow
   for the stack and its labels at a legible size. */
@media (min-width: 1200px) {
  .vertical-accordion-stack .vas-card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "intro stage"
      "steps stage";
    column-gap: 48px;
    row-gap: 40px;
  }

  .vertical-accordion-stack .vas-intro { padding-top: 8px; }
  /* Top-aligned, so the headings never move when a longer or shorter
     description opens, even when a tall stack sets the card's height. */
  .vertical-accordion-stack .vas-steps { align-self: start; padding-bottom: 8px; }

  /* The stage is as tall as the text column and centres the stack, so the
     stack would drift as descriptions of different lengths open. module.js
     pins it where it was first centred (see pinStack there). */
  .vertical-accordion-stack .vas-stage[data-pinned] { align-items: flex-start; }
  .vertical-accordion-stack .vas-stage[data-pinned] .vas-comp { margin-top: var(--vas-comp-top, 0px); }
}

/* ------------------------------------------------------------------ colours
   One class per layer colour, shared by the layer, its label and its step.
   --vas-top/left/right are the three faces when the layer is active, --vas-c
   is the text and rail colour. */

.vertical-accordion-stack .vas-c-plum         { --vas-top: #3B1645; --vas-left: #2F1237; --vas-right: #230D2A; --vas-c: #3B1645; }
.vertical-accordion-stack .vas-c-magenta      { --vas-top: #860C6E; --vas-left: #6B0A58; --vas-right: #500742; --vas-c: #860C6E; }
.vertical-accordion-stack .vas-c-green        { --vas-top: #0E602A; --vas-left: #0B4D22; --vas-right: #083D1C; --vas-c: #0E602A; }
.vertical-accordion-stack .vas-c-bright-green { --vas-top: #45BF69; --vas-left: #379954; --vas-right: #29733F; --vas-c: #226035; }
/* The NHS App blue of the stack hero, on its top, left and right faces. */
.vertical-accordion-stack .vas-c-nhs-blue     { --vas-top: #3A86CF; --vas-left: #1F66B3; --vas-right: #124E91; --vas-c: #1F66B3; }

/* ------------------------------------------------------------------ stage */

.vertical-accordion-stack .vas-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 16px;
  overflow: hidden;
  border-radius: 12px;
  background:
    radial-gradient(90% 90% at 0% 100%, #E1D4EF 0%, rgba(225, 212, 239, 0) 65%),
    radial-gradient(80% 80% at 100% 0%, #FFE1D2 0%, rgba(255, 225, 210, 0) 60%),
    #FBF8F4;
  container-type: inline-size;
}

@media (min-width: 768px) {
  .vertical-accordion-stack .vas-stage { padding: 24px; }
}

/*
  The composition: the stack (330 units wide, leader lines included) and a
  190px label column starting 337 units in. --u is the size of one unit. It is
  1px until the stage is too narrow for stack plus labels, then shrinks.
  On a narrow stage the labels are hidden (the steps name every layer) and the
  stack alone scales to fit, capped at 300px tall; see the container queries.

  Vertical positions: --y is the top corner of a layer, in units. module.html
  sets each layer's resting --r and stacked --s (see there).
    floating (above the open step)      --r - --up (the open step's lift, often 0)
    the open layer and those below it   --s (stacked on the bottom layer, with gaps)
  module.js keeps is-active, is-stacked (the layers under the open one) and
  --up current, and staggers the moves with --vas-delay when a visitor jumps
  several steps, so the layers land or lift off one after another.
*/
.vertical-accordion-stack .vas-comp {
  --lw: 190px;
  --u: min(1px, (100cqw - var(--lw)) / 337);
  position: relative;
  flex: none;
  width: calc(337 * var(--u) + var(--lw));
  height: calc(var(--vbh) * var(--u));
}

/* In one column the stack is also held to about half the screen height, so on
   a landscape tablet a step and its layer can be on screen together. */
@media (max-width: 1199px) {
  .vertical-accordion-stack .vas-comp {
    --u: min(1px, (100cqw - var(--lw)) / 337, max(0.45px, (50vh - 40px) / var(--vbh)));
  }
}

.vertical-accordion-stack .vas-svg {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: calc(330 * var(--u));
  height: calc(var(--vbh) * var(--u));
  overflow: visible;
}

.vertical-accordion-stack :is(.vas-layer, .vas-label) {
  --y: calc(var(--r) - var(--up, 0));
}
.vertical-accordion-stack :is(.vas-layer, .vas-label):is(.is-active, .is-stacked) {
  --y: var(--s);
}
/* Layers stacked under the open one keep a short label (the title only), as
   the stack hero labels its pile. Where module.js finds no room for them
   (data-pile="off") they step aside, quickly, so they are gone before the
   next layer lands. */
.vertical-accordion-stack .vas-label.is-stacked :is(.vas-label__kicker, .vas-label__sub) {
  max-height: 0;
  opacity: 0;
}
.vertical-accordion-stack [data-pile="off"] .vas-label.is-stacked {
  opacity: 0;
  pointer-events: none;
  transition: transform 420ms var(--vas-ease-move) var(--vas-delay, 0ms), opacity 90ms linear var(--vas-delay, 0ms);
}
.vertical-accordion-stack [data-pile="off"] .vas-layer.is-stacked .vas-leader { opacity: 0; }

/* In SVG a CSS px in a transform is one user unit, so this is --y units. */
.vertical-accordion-stack .vas-layer {
  --vas-f-top: #FFFFFF;
  --vas-f-left: #F4F1EA;
  --vas-f-right: #E9E5DC;
  --vas-f-edge: #C6C4BD;
  --vas-f-mark: #DFDDD4;
  --vas-f-core: #DFDDD4;
  --vas-f-leader: #62456A;
  /* Face art: lines and icons, the Dr tile, and the rising digits. */
  --vas-f-ink: #A9A69D;
  --vas-f-dot: #C6C4BD;
  --vas-f-glow: rgba(169, 166, 157, 0);
  --vas-f-tile-hi: #F4F2EC;
  --vas-f-tile-lo: #E4E1D8;
  --vas-f-tile-side: #D3D0C7;
  --vas-f-bit: #9D3D8A;
  --vas-f-bit-o: 0.45;
  transform: translateY(calc(var(--y) * 1px));
  transition: transform 420ms var(--vas-ease-move) var(--vas-delay, 0ms);
}

.vertical-accordion-stack .vas-layer.is-active {
  --vas-f-top: var(--vas-top);
  --vas-f-left: var(--vas-left);
  --vas-f-right: var(--vas-right);
  --vas-f-edge: var(--vas-right);
  --vas-f-mark: rgba(248, 245, 236, 0.5);
  --vas-f-core: #F8F5EC;
  --vas-f-leader: var(--vas-c);
  --vas-f-ink: #F8F5EC;
  --vas-f-dot: #45BF69;
  --vas-f-glow: rgba(69, 191, 105, 0.2);
  --vas-f-tile-hi: #6ACC87;
  --vas-f-tile-lo: #29733F;
  --vas-f-tile-side: #0B4D22;
  --vas-f-bit: #F8F5EC;
  --vas-f-bit-o: 0.85;
}

.vertical-accordion-stack .vas-face,
.vertical-accordion-stack .vas-core {
  stroke-width: 1;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill 220ms var(--vas-ease-soft) var(--vas-delay, 0ms), stroke 220ms var(--vas-ease-soft) var(--vas-delay, 0ms);
}
.vertical-accordion-stack .vas-face { stroke: var(--vas-f-edge); }
.vertical-accordion-stack .vas-face--top { fill: var(--vas-f-top); }
.vertical-accordion-stack .vas-face--left { fill: var(--vas-f-left); }
.vertical-accordion-stack .vas-face--right { fill: var(--vas-f-right); }
.vertical-accordion-stack .vas-core { fill: var(--vas-f-core); stroke: none; pointer-events: none; }

.vertical-accordion-stack .vas-mark {
  fill: none;
  stroke: var(--vas-f-mark);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
  transition: stroke 220ms var(--vas-ease-soft) var(--vas-delay, 0ms);
}
.vertical-accordion-stack .vas-mark--dashed {
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
}

/* ------------------------------------------------------------------ face art
   Drawn in face space (see module.html), so strokes are in face units and are
   foreshortened with the face, like the stack hero's canvas drawing. */

.vertical-accordion-stack .vas-art { pointer-events: none; }
/* Colour changes wait for the layer's stagger delay, like its faces, so its art
   never turns before the face under it does. */
.vertical-accordion-stack .vas-art :is(path, circle, rect) {
  transition: fill 220ms var(--vas-ease-soft) var(--vas-delay, 0ms), stroke 220ms var(--vas-ease-soft) var(--vas-delay, 0ms);
}
.vertical-accordion-stack .vas-art stop { transition: stop-color 220ms var(--vas-ease-soft) var(--vas-delay, 0ms); }
.vertical-accordion-stack .vas-fx-grid,
.vertical-accordion-stack .vas-fx-dash {
  fill: none;
  stroke: var(--vas-f-ink);
  stroke-width: 0.55;
  stroke-linecap: round;
}
.vertical-accordion-stack .vas-fx-grid { stroke-opacity: 0.3; }
.vertical-accordion-stack .vas-fx-dash { stroke-opacity: 0.58; stroke-dasharray: 2 1.4; }
.vertical-accordion-stack .vas-fx-dot { fill: var(--vas-f-dot); }
.vertical-accordion-stack .vas-fx-glow-in { stop-color: var(--vas-f-glow); }
.vertical-accordion-stack .vas-fx-glow-out { stop-color: var(--vas-f-glow); stop-opacity: 0; }
.vertical-accordion-stack .vas-fx-tile-side { fill: var(--vas-f-tile-side); }
.vertical-accordion-stack .vas-fx-tile-hi { stop-color: var(--vas-f-tile-hi); }
.vertical-accordion-stack .vas-fx-tile-lo { stop-color: var(--vas-f-tile-lo); }
.vertical-accordion-stack .vas-fx-tile { stroke: rgba(255, 255, 255, 0.55); stroke-width: 0.5; }
.vertical-accordion-stack .vas-fx-mark { fill: var(--vas-f-ink); }
.vertical-accordion-stack .vas-fx-icon {
  fill: none;
  stroke: var(--vas-f-ink);
  stroke-width: 0.065;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.vertical-accordion-stack .vas-fx-bar { fill: var(--vas-f-ink); fill-opacity: 0.45; }
.vertical-accordion-stack .vas-fx-bar--value { fill-opacity: 0.26; }

/* Rising 0s and 1s. Each digit floats up out of the face and fades before it
   reaches the layer above, which is drawn later and so hides what is left. */
.vertical-accordion-stack .vas-bit {
  fill: var(--vas-f-bit);
  font-family: RMNeue, sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  opacity: 0;
  pointer-events: none;
  animation: vas-rise 3.6s linear infinite;
  animation-delay: var(--d, 0s);
  transition: fill 220ms var(--vas-ease-soft) var(--vas-delay, 0ms);
  --vas-rise: -64px;
}
/* An open layer has dropped away from the one above, so its digits rise
   further to reach it. */
.vertical-accordion-stack .vas-layer.is-active .vas-bit { --vas-rise: -160px; }
@keyframes vas-rise {
  0% { transform: translateY(0); opacity: 0; }
  18% { opacity: var(--vas-f-bit-o); }
  70% { opacity: var(--vas-f-bit-o); }
  100% { transform: translateY(var(--vas-rise)); opacity: 0; }
}
/* module.js pauses them while the module is off screen. */
.vertical-accordion-stack.vas-paused .vas-bit { animation-play-state: paused; }

.vertical-accordion-stack .vas-leader {
  stroke: var(--vas-f-leader);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  transition: stroke 220ms var(--vas-ease-soft) var(--vas-delay, 0ms), opacity 220ms var(--vas-ease-soft) var(--vas-delay, 0ms);
}

/* ------------------------------------------------------------------ labels */

.vertical-accordion-stack .vas-label {
  --vas-l-ink: #62456A;
  position: absolute;
  top: 0;
  left: calc(337 * var(--u));
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: var(--lw);
  padding: 4px 6px;
  font-family: RMNeue, sans-serif;
  text-align: left;
  transform: translateY(calc((var(--y) + 76 + var(--t) / 2) * var(--u))) translateY(-50%);
  transition: transform 420ms var(--vas-ease-move) var(--vas-delay, 0ms), opacity 220ms var(--vas-ease-soft) var(--vas-delay, 0ms);
}
.vertical-accordion-stack .vas-label.is-active { --vas-l-ink: var(--vas-c); }
/* While the stage is being resized the SVG rescales at once, so the labels
   must too, or they trail behind their layers (module.js sets vas-resizing). */
.vertical-accordion-stack .vas-comp.vas-resizing .vas-label { transition: none; }

/* max-height is only there so the compact mode can animate the lines away;
   the caps are well above anything the fields' help text asks for. */
.vertical-accordion-stack .vas-label__kicker,
.vertical-accordion-stack .vas-label__title,
.vertical-accordion-stack .vas-label__sub {
  display: block;
  overflow: hidden;
  max-height: 8em;
  transition: color 220ms var(--vas-ease-soft), max-height 220ms var(--vas-ease-soft), opacity 220ms var(--vas-ease-soft);
}

.vertical-accordion-stack .vas-label__kicker {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vas-l-ink);
}

.vertical-accordion-stack .vas-label__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--vas-l-ink);
}

/* Inline, so it follows the last word when a long title wraps. */
.vertical-accordion-stack .vas-label__icon {
  display: inline-block;
  margin-left: 6px;
  vertical-align: -3px;
}

.vertical-accordion-stack .vas-label__sub {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #62456A;
}

/* module.js measures the labels and picks the densest set that does not
   overlap: full (all three lines), compact (closed layers show the title
   only) or active (only the open layer is labelled). */
.vertical-accordion-stack [data-labels="compact"] .vas-label:not(.is-active) :is(.vas-label__kicker, .vas-label__sub) {
  max-height: 0;
  opacity: 0;
}
.vertical-accordion-stack [data-labels="active"] .vas-label:not(.is-active) {
  opacity: 0;
  pointer-events: none;
}

.vertical-accordion-stack [data-labels="active"] .vas-layer:not(.is-active) .vas-leader { opacity: 0; }

/* The first mode module.js picks is applied without animating the lines, so
   a closed label fades in already in its final shape. Animating both at once
   showed each kicker and tagline half faded for a moment. */
.vertical-accordion-stack .vas-comp.vas-instant :is(.vas-label__kicker, .vas-label__title, .vas-label__sub) { transition: none; }

/* Too narrow for labels: the stack alone, centred, no taller than 300px (and
   no more than about half the screen height) so the steps stay close on a
   phone. module.html picks the switch for each stack (vas-narrow-*): the stage
   width at which a labelled stack becomes as big as this one, so widening the
   screen never shrinks the stack. 390px suits four or more layers; shorter
   stacks are larger at the 300px cap and switch later. */
@container (max-width: 389px) {
  .vertical-accordion-stack .vas-comp {
    --u: min(1px, 100cqw / 302, 300px / var(--vbh), max(0.45px, (50vh - 40px) / var(--vbh)));
    width: calc(302 * var(--u));
  }
  .vertical-accordion-stack .vas-comp :is(.vas-labels, .vas-leader) { display: none; }
}
@container (min-width: 390px) and (max-width: 439px) {
  .vertical-accordion-stack .vas-comp:is(.vas-narrow-440, .vas-narrow-490, .vas-narrow-530) {
    --u: min(1px, 100cqw / 302, 300px / var(--vbh), max(0.45px, (50vh - 40px) / var(--vbh)));
    width: calc(302 * var(--u));
  }
  .vertical-accordion-stack .vas-comp:is(.vas-narrow-440, .vas-narrow-490, .vas-narrow-530) :is(.vas-labels, .vas-leader) { display: none; }
}
@container (min-width: 440px) and (max-width: 489px) {
  .vertical-accordion-stack .vas-comp:is(.vas-narrow-490, .vas-narrow-530) {
    --u: min(1px, 100cqw / 302, 300px / var(--vbh), max(0.45px, (50vh - 40px) / var(--vbh)));
    width: calc(302 * var(--u));
  }
  .vertical-accordion-stack .vas-comp:is(.vas-narrow-490, .vas-narrow-530) :is(.vas-labels, .vas-leader) { display: none; }
}
@container (min-width: 490px) and (max-width: 529px) {
  .vertical-accordion-stack .vas-comp.vas-narrow-530 {
    --u: min(1px, 100cqw / 302, 300px / var(--vbh), max(0.45px, (50vh - 40px) / var(--vbh)));
    width: calc(302 * var(--u));
  }
  .vertical-accordion-stack .vas-comp.vas-narrow-530 :is(.vas-labels, .vas-leader) { display: none; }
}

/* A mouse shortcut only: the stage is aria-hidden and has no focusable parts. */
.vertical-accordion-stack.vas-js :is(.vas-layer, .vas-label):not(.is-active) { cursor: pointer; }
.vertical-accordion-stack.vas-js .vas-layer:not(.is-active):hover { --vas-f-top: #F8F5EC; --vas-f-edge: #A9A69D; }
.vertical-accordion-stack.vas-js .vas-label:not(.is-active):hover { --vas-l-ink: #3B1645; }

/* ------------------------------------------------------------------ steps */

.vertical-accordion-stack .vas-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.vertical-accordion-stack .vas-step {
  padding-left: 20px;
  border-left: 3px solid var(--vas-rail);
  transition: border-color 220ms var(--vas-ease-soft);
}
.vertical-accordion-stack .vas-step.is-open { border-left-color: var(--vas-c); }

.vertical-accordion-stack .vas-step h3.vas-step__heading {
  margin: 0;
  font: inherit;
}

.vertical-accordion-stack .vas-step .vas-step__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 44px;
  padding: 12px 0;
  margin: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--vas-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.vertical-accordion-stack .vas-step .vas-step__button[aria-disabled="true"] { cursor: default; }
.vertical-accordion-stack .vas-step .vas-step__button:focus-visible {
  outline: 2px solid var(--vas-focus);
  outline-offset: 2px;
}

.vertical-accordion-stack .vas-step__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.vertical-accordion-stack .vas-step .vas-step__kicker {
  font-family: RMNeue, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--vas-muted);
}

.vertical-accordion-stack .vas-step .vas-step__title {
  font-family: RMNeue, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--vas-ink);
}

/* The colour is inherited from the button, so high contrast themes recolour it. */
.vertical-accordion-stack .vas-step__chevron {
  flex: none;
  transition: transform 220ms var(--vas-ease-soft);
}
.vertical-accordion-stack .vas-step.is-open .vas-step__chevron { transform: rotate(180deg); }

.vertical-accordion-stack .vas-step .vas-step__panel p.vas-step__desc {
  margin: 0;
  padding: 0 0 14px;
  font-family: RMNeue, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--vas-ink);
}

@media (min-width: 768px) {
  .vertical-accordion-stack .vas-step { padding-left: 24px; }
  .vertical-accordion-stack .vas-step .vas-step__title { font-size: 22px; }
}

/* ------------------------------------------------------------------ modes */

/* !important because a media query adds no specificity: without it any state
   rule written with a longer selector (such as the stacked-label rule, which
   is (0,4,0)) would out-rank this reset and still move for these visitors. */
@media (prefers-reduced-motion: reduce) {
  .vertical-accordion-stack :is(.vas-layer, .vas-label, .vas-face, .vas-core, .vas-mark, .vas-leader, .vas-step, .vas-step__chevron),
  .vertical-accordion-stack :is(.vas-label__kicker, .vas-label__title, .vas-label__sub),
  .vertical-accordion-stack .vas-art :is(path, circle, rect, stop) {
    transition: none !important;
  }
  /* The digits stay put on the face, as a still texture. */
  .vertical-accordion-stack .vas-bit {
    animation: none !important;
    transition: none !important;
    opacity: calc(var(--vas-f-bit-o) * 0.8);
  }
}

/* Windows high contrast: the rail is the only visual cue for the open step. */
@media (forced-colors: active) {
  .vertical-accordion-stack .vas-step { border-left-color: GrayText; }
  .vertical-accordion-stack .vas-step.is-open { border-left-color: Highlight; }
}

/* Browsers without container query units (Safari 15, Chrome 104 and older)
   would size the illustration from an invalid --u and collapse it. Show the
   stack alone at a fixed size there instead. */
@supports not (width: 1cqw) {
  .vertical-accordion-stack .vas-comp {
    --u: min(1px, 300px / var(--vbh), (100vw - 154px) / 302);
    width: calc(302 * var(--u));
  }
  .vertical-accordion-stack .vas-labels,
  .vertical-accordion-stack .vas-leader { display: none; }
}