/* =====================================================================
   The Healthy Minds Tree (page-healthy-minds-tree.php).
   Loads after css/rethinking-endo.css, which supplies the page shell (paper
   texture, corner washes, sticky breadcrumb bar), as on Music and the Brain.
   The interactive sits in .tv-page, not .wrap, so rethinking-endo's
   plain-button rule for .wrap can't restyle its buttons.
   ===================================================================== */
body.page-template-page-healthy-minds-tree .page-wrapper,
body.page-template-page-healthy-minds-tree-php .page-wrapper{overflow-x:clip;overflow-y:visible}
.tv-page{max-width:920px;width:100%;min-width:0;margin:0 auto;padding:0 64px;position:relative}
@media (max-width:850px){.tv-page{padding:0 50px}}
@media (max-width:600px){.tv-page{padding:0 24px}}
.tv-main{display:block;padding:2.75rem 0 2.5rem}
@media (max-width:600px){.tv-main{padding:1.75rem 0 2rem}}

/* --- WordPress guards: style.css gives every element position:relative,
   zero margins, and its own sizes, bullets and quote marks for bare tags.
   Put back the browser defaults the prototype was built on; every rule
   below in the interactive's own block is more specific and still wins
   (the same guards music-brain.css uses). */
.tree-viz :where(*){position:static}
.tree-viz :where(p, ul, ol, li, figure, figcaption, h1, h2, h3, h4, aside){
  margin:revert;padding:revert;width:revert;
  font-size:revert;font-weight:revert;font-family:revert;line-height:revert;
  letter-spacing:revert;text-transform:revert;float:revert;
}
.tree-viz :where(ul, ol){list-style:revert}
.tree-viz :where(li)::before{content:none;background:none}
.tree-viz :where(a){color:revert;text-decoration:revert;transition:none}
.tree-viz :where(img){display:revert;width:revert;max-width:revert}
.tree-viz :where(span, a, strong, em, b, i, small){letter-spacing:revert;text-transform:revert}
.tree-viz :where(button){transition:revert}
/* style.css: *{text-rendering:geometricPrecision} changes text widths, which
   moves the tags drawn on the tree */
.tree-viz, .tree-viz :where(*){text-rendering:auto}
.tree-viz{position:static}
/* style.css: li:last-of-type{margin-bottom:0 !important} */
.tree-viz .tv-needs > li:last-of-type{margin-bottom:0 !important}
/* js/functions.js tags empty paragraphs and style.css zeroes their height;
   the screen-reader announcer starts empty */
.tree-viz p.tv-sr.empty-space-paragraph{height:1px !important}

/* =====================================================================
   The Healthy Minds Tree (v2) — the interactive. Layout, controls, type
   and highlights follow Music and the Brain: reading on the left, the
   picture on the right; as each stage's lines draw themselves along the
   tree, the painting fades back and that stage's part returns in full
   color, with an outline and a numbered tag with a leader. Every selector is scoped
   under .tree-viz and every token is declared on it, so the block can
   move into a WordPress template partial (see bespoke-page-runbook).
   Light only (the site has no dark mode).
   ===================================================================== */
.tree-viz{
  --tv-font-display:"Averia Serif Libre",Georgia,serif;
  --tv-font-body:"Work Sans",system-ui,sans-serif;

  --tv-ink:#16283c;
  --tv-paper:#faf8f5;
  --tv-panel:#ffffff;
  --tv-rule:#ddd8d0;
  --tv-rule-soft:#e9e5de;
  --tv-muted:#5f6b7a;
  --tv-prose:#33414f;
  --tv-focus:#2e5c8a;
  --tv-casing:#fffdf8;   /* the pale edge that keeps lines legible on the painting */

  /* one color per stage, taken from the painting and darkened so white
     numbers on the stage circles stay above 4.5:1 */
  --tv-s1:#9a4417;   /* roots: the orange root hairs */
  --tv-s2:#7a2240;   /* trunk: the maroon */
  --tv-s3:#2f7046;   /* branches and leaves: the canopy green */
  --tv-s4:#80600f;   /* the whole tree: the flowers' gold */
  --tv-s5:#2f6d84;   /* where we invest: the site's secondary blue */

  --tv-secondary:#2f6d84;
  --tv-secondary-hover:#255769;
  --tv-on-secondary:#ffffff;

  --tv-tip-bg:#16283c;
  --tv-tip-ink:#f4f1ea;

  --tv-cur:var(--tv-s1);   /* the current stage's color, set from the script */

  /* neutralize the WordPress theme's section defaults */
  display:block;float:none;width:auto;max-width:none;
  margin:0;padding:0;border:0;background:none;
  color:var(--tv-ink);
  font-family:var(--tv-font-body);
}
.tree-viz [hidden]{display:none !important}
.tree-viz .tv-kicker{
  margin:0 0 0.5rem;
  font-family:var(--tv-font-body);
  font-size:0.78rem;
  font-weight:600;
  line-height:1.6;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--tv-muted);
}
.tree-viz .tv-headline{
  margin:0 0 0.6rem;
  font-family:var(--tv-font-display);
  font-size:clamp(1.6rem,4vw,2.15rem);
  font-weight:400;
  line-height:1.2;
  letter-spacing:normal;
  text-transform:none;
  color:var(--tv-ink);
  text-wrap:balance;
}
/* "How it works", as on the Watercolor Painting Playground: the description
   folds up behind a caret, to keep the tree high on the screen */
.tree-viz .tv-howto-toggle{
  display:inline-flex;align-items:center;gap:0.5rem;
  margin:0 0 1rem;padding:0.2rem 0;
  border:0;background:none;
  font:600 0.875rem/1.2 var(--tv-font-body);
  color:var(--tv-secondary);
  cursor:pointer;
}
@media (hover:hover){.tree-viz .tv-howto-toggle:hover{color:var(--tv-secondary-hover)}}
.tree-viz .tv-howto-toggle:focus-visible{outline:2px solid var(--tv-focus);outline-offset:3px;border-radius:2px}
.tree-viz .tv-caret{
  width:0.5rem;height:0.5rem;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform 0.2s;
}
.tree-viz .tv-howto.is-open .tv-caret{transform:translateY(2px) rotate(-135deg)}
.tree-viz .tv-howto:not(.is-open) .tv-intro{display:none}
.tree-viz .tv-howto.is-open .tv-intro{margin-top:-0.3rem}
.tree-viz .tv-intro{
  margin:0 0 1.6rem;
  max-width:58ch;
  font-family:var(--tv-font-body);
  font-size:1rem;
  font-weight:400;
  line-height:1.68;
  letter-spacing:normal;
  text-transform:none;
  color:var(--tv-prose);
}
.tree-viz .tv-sr{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* --- layout: reading on the left, the tree on the right (as Music and
       the Brain), both starting at the top. The stage circles sit over the
       tree's left edge, inside its own column, so the tree stays put however
       long the text beside it is. ------------------------------------------ */
.tree-viz .tv-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);
  gap:1rem 2.2rem;
  align-items:start;
}
.tree-viz .tv-reader{grid-column:1;grid-row:1;min-width:0}
.tree-viz .tv-figure{grid-column:2;grid-row:1;margin:0;min-width:0}
.tree-viz .tv-bar{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;margin:0 0 0.9rem}

/* at the tree's right edge: Play / Pause / Play again, and the sound switch */
.tree-viz .tv-tools{display:flex;align-items:center;gap:0.85rem;flex:0 0 auto}   /* room for the timer ring */
.tree-viz .tv-tool{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;flex:0 0 auto;
  margin:0;padding:0;
  border:2px solid var(--tv-secondary);
  border-radius:50%;
  background:transparent;
  color:var(--tv-secondary);
  cursor:pointer;
  transition:background 0.2s ease,color 0.2s ease,transform 0.15s ease;
}
.tree-viz .tv-tool .tv-ico{width:18px;height:18px}
.tree-viz .tv-tool .tv-ico-play{transform:translateX(1px)}
.tree-viz .tv-play{background:var(--tv-secondary);color:var(--tv-on-secondary)}
/* the timer ring: a thin track round Play, and an arc that fills clockwise
   from the top, in the current stage's color, until the next stage */
.tree-viz .tv-playwrap{position:relative;display:inline-flex;flex:0 0 auto}
.tree-viz .tv-timer{
  position:absolute;left:-5px;top:-5px;
  width:calc(100% + 10px);height:calc(100% + 10px);
  transform:rotate(-90deg);
  pointer-events:none;
  opacity:0;transition:opacity 0.3s ease;
}
.tree-viz .tv-timer.is-on{opacity:1}
.tree-viz .tv-timer circle{fill:none;stroke-width:2.6}
.tree-viz .tv-timer-track{stroke:var(--tv-rule)}
.tree-viz .tv-timer-arc{stroke:var(--tv-timer-c,var(--tv-secondary));stroke-linecap:round}
@media (hover:hover){
  .tree-viz .tv-play:hover{background:var(--tv-secondary-hover);border-color:var(--tv-secondary-hover)}
  .tree-viz .tv-sound:hover{background:rgba(47,109,132,0.08)}
}
.tree-viz .tv-tool:active{transform:scale(0.95)}
.tree-viz .tv-tool:focus{outline:2px solid transparent;outline-offset:3px}
.tree-viz .tv-tool:focus-visible{box-shadow:0 0 0 2px var(--tv-paper),0 0 0 4px var(--tv-focus)}
@media (forced-colors:active){.tree-viz .tv-tool:focus-visible{outline:2px solid ButtonText}}
.tree-viz .tv-share .tv-ico{width:18px;height:18px}
/* four tools: a touch smaller and closer together, with Play's wider gap kept for its timer ring,
   so the longest stage name (stage 3's) still opens in full beside them */
.tree-viz .tv-tools{gap:0.55rem}
@media (min-width:381px){.tree-viz .tv-tool{width:2.375rem;height:2.375rem}}
.tree-viz .tv-playwrap{margin-right:0.3rem}
@media (max-width:380px){.tree-viz .tv-tools{gap:0.45rem}.tree-viz .tv-playwrap{margin-right:0.25rem}}
/* and where the bar is too narrow for that (a narrow desktop window), the
   tools drop under the circles, as in full screen, rather than cut it short */
@media (min-width:601px){
  .tree-viz .tv-bar{flex-wrap:wrap;row-gap:0.5rem}
  .tree-viz .tv-bar .tv-sdots{margin-right:calc(6.12rem + 13px - 0.75rem)}   /* less the bar's own gap */
  .tree-viz .tv-tools{margin-left:auto}
}
@media (hover:hover){.tree-viz .tv-share:hover{background:rgba(47,109,132,0.08)}}
/* each tool's name, in a small dark tip under it, on hover (after a moment)
   or keyboard focus; the last tool's tip keeps to the tree's right edge */
.tree-viz .tv-tool{position:relative}
.tree-viz .tv-bar{position:relative;z-index:6}   /* the tips over the tree's drawing */
.tree-viz .tv-tool[data-tip]::after{
  content:attr(data-tip);
  position:absolute;top:calc(100% + 9px);left:50%;z-index:30;
  padding:0.38rem 0.7rem;
  border-radius:6px;
  background:var(--tv-tip-bg);color:var(--tv-tip-ink);
  font-family:var(--tv-font-body);font-size:0.78rem;font-weight:600;line-height:1.2;letter-spacing:0;
  white-space:nowrap;
  opacity:0;transform:translate(-50%,-4px);
  pointer-events:none;
  transition:opacity 0.15s ease,transform 0.15s ease;
}
.tree-viz .tv-tools > .tv-tool:last-child::after{left:auto;right:-2px;transform:translateY(-4px)}
@media (hover:hover){
  .tree-viz .tv-tool[data-tip]:hover::after{opacity:1;transform:translate(-50%,0);transition-delay:0.3s}
  .tree-viz .tv-tools > .tv-tool:last-child:hover::after{transform:none}
}
.tree-viz .tv-tool[data-tip]:focus-visible::after,
.tree-viz .tv-tool.is-done::after{opacity:1;transform:translate(-50%,0);transition-delay:0s}
.tree-viz .tv-tools > .tv-tool:last-child:focus-visible::after,
.tree-viz .tv-tools > .tv-tool.is-done:last-child::after{transform:none}
/* the pointer resting in full screen hides the tips with it */
.tree-viz.is-presenting.is-idle .tv-tool::after{opacity:0}
@media (prefers-reduced-motion:reduce){.tree-viz .tv-tool[data-tip]::after{transition:none}}
@media (forced-colors:active){.tree-viz .tv-tool[data-tip]::after{border:1px solid CanvasText}}

/* --- the painting and the drawing over it ------------------------------- */
.tree-viz .tv-canvas{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.tree-viz .tv-base,
.tree-viz .tv-svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.tree-viz .tv-svg{overflow:visible}

/* while the lines draw, the painting fades back and the stage's part of
   the tree returns in full color over it */
.tree-viz .tv-base{transition:opacity 0.9s ease,filter 0.9s ease}
.tree-viz .tv-canvas.is-faded .tv-base{opacity:0.36;filter:saturate(0.7)}
/* stage 4, the whole tree: the painting back, lightly faded under its lines */
.tree-viz .tv-canvas.is-soft .tv-base{opacity:0.66;filter:saturate(0.9)}
.tree-viz .tv-art{opacity:0;transition:opacity 0.9s ease;pointer-events:none}
.tree-viz .tv-canvas.is-faded .tv-art.is-hover{opacity:0.6}
.tree-viz .tv-art.is-on,
.tree-viz .tv-canvas.is-faded .tv-art.is-on{opacity:1}
.tree-viz .tv-outline{
  fill:none;
  stroke:var(--tv-own);
  stroke-linejoin:round;
  stroke-opacity:0;
  transition:stroke-opacity 0.6s ease;
  pointer-events:none;
}
.tree-viz .tv-outline.is-on{stroke-opacity:0.85}
.tree-viz .tv-outline.is-hover{stroke-opacity:0.6}

/* the lines: from the root tips in to the trunk, up it, and out along the
   branches to the flowers, tapering as they go; each draws itself as its
   stage plays. A thin pale casing keeps them clear on the full-color parts. */
.tree-viz .tv-edges{transition:opacity 0.5s ease}
.tree-viz .tv-edges.is-past{opacity:0.55}
.tree-viz .tv-edges.is-quiet{opacity:0.3}
.tree-viz .tv-edge,
.tree-viz .tv-edge-casing{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.tree-viz .tv-edge{stroke:var(--tv-own)}
.tree-viz .tv-edge-casing{stroke:var(--tv-casing);stroke-opacity:1}
.tree-viz .tv-ring{fill:none;stroke:var(--tv-s4);stroke-linecap:round;pointer-events:none}
.tree-viz .tv-ring-casing{fill:none;stroke:var(--tv-casing);stroke-opacity:0.85;pointer-events:none}
/* hovering a flower previews the rings */
.tree-viz .tv-rings.is-hover path{stroke-dashoffset:0 !important;visibility:visible !important;opacity:0.6}

/* a need's route, from its root tip to its flower */
.tree-viz .tv-need-line{fill:none;stroke:var(--tv-need,var(--tv-ink));stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.tree-viz .tv-need-casing{fill:none;stroke:var(--tv-casing);stroke-opacity:0.95;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.tree-viz .tv-need-ring{fill:none;stroke:var(--tv-need,var(--tv-ink));pointer-events:none}
.tree-viz .tv-need-tip{fill:var(--tv-need,var(--tv-ink));stroke:#ffffff;pointer-events:none}
.tree-viz .tv-need-bloom{pointer-events:none}
/* stage 5: an article link brings its own route forward */
.tree-viz .tv-needlines.has-focus .tv-need-group:not(.is-focus) > *{opacity:0.3}
.tree-viz .tv-need-group.is-focus .tv-tag-bg{stroke:var(--tv-ink);stroke-width:2.2}

/* stage 1: twelve of the core needs named at their roots */
.tree-viz .tv-sample{opacity:0;transition:opacity 0.6s ease;pointer-events:none}
.tree-viz.is-samples .tv-sample{opacity:1;pointer-events:auto;cursor:pointer;transition-delay:var(--tv-sample-delay,0s)}
.tree-viz .tv-sample-pad{fill:transparent}
.tree-viz .tv-sample-bg{fill:var(--tv-panel);stroke:var(--tv-s1);stroke-width:1.3}
.tree-viz .tv-sample-text{font-family:var(--tv-font-body);font-weight:600;fill:var(--tv-ink)}
/* the leader and its casing: widths are set by the script, in screen pixels */
.tree-viz .tv-sample-lead{fill:none;stroke:var(--tv-s1);stroke-linecap:round;pointer-events:none}
.tree-viz .tv-sample-casing{fill:none;stroke:var(--tv-casing);stroke-opacity:0.95;stroke-linecap:round;pointer-events:none}
.tree-viz .tv-sample-dot{fill:var(--tv-s1);stroke:#ffffff;stroke-width:1}
.tree-viz .tv-sample.is-on .tv-sample-bg{stroke:var(--tv-ink);stroke-width:2.2}
.tree-viz .tv-sample.is-on .tv-sample-lead{stroke:var(--tv-ink)}
.tree-viz .tv-sample.is-on .tv-sample-dot{fill:var(--tv-ink)}
/* while a need is traced, the other names step back so its line shows through */
.tree-viz .tv-sample > *{transition:opacity 0.25s ease}
.tree-viz .tv-sample-tags.has-on .tv-sample:not(.is-on) > *{opacity:0.3}
/* a need traced while the roots were still drawing got its own name tag;
   once the names show it has one already */
.tree-viz.is-samples .tv-need-group.is-sample .tv-tag{opacity:0}

/* the stage tag (Music and the Brain's): number, name, and a leader */
.tree-viz .tv-tag{pointer-events:none;transition:opacity 0.3s ease}
.tree-viz .tv-tag-bg{fill:var(--tv-panel);stroke:var(--tv-tag-c,var(--tv-cur));stroke-width:1.4}
.tree-viz .tv-tag-dot{fill:var(--tv-tag-c,var(--tv-cur))}
.tree-viz .tv-tag-num{font-family:var(--tv-font-body);font-size:12px;font-weight:600;fill:#ffffff;text-anchor:middle}
.tree-viz .tv-tag-text{font-family:var(--tv-font-body);font-size:13px;font-weight:600;fill:var(--tv-ink)}
.tree-viz .tv-tag-lead{fill:none;stroke:var(--tv-tag-c,var(--tv-cur));stroke-width:1.4;stroke-linecap:round}

/* the parts of the tree take the pointer: hover names them, a click
   jumps to their stage */
.tree-viz .tv-hit{fill:transparent;stroke:transparent;stroke-width:6;pointer-events:all;cursor:pointer}

/* --- hotspots: keyboard and screen-reader access to the parts ---------- */
.tree-viz .tv-spots{position:absolute;inset:0;pointer-events:none}
.tree-viz .tv-spot{
  position:absolute;
  width:24px;height:24px;
  margin:-12px 0 0 -12px;
  padding:0;border:0;border-radius:50%;
  background:transparent;
  pointer-events:none;
}
.tree-viz .tv-spot:focus{outline:none}
.tree-viz .tv-spot:focus-visible{box-shadow:0 0 0 2px #ffffff,0 0 0 4px var(--tv-ink)}

/* --- tooltip: the endometriosis timeline's tick tooltip ----------------- */
.tree-viz .tv-tip{
  position:absolute;
  left:0;top:0;
  z-index:3;
  pointer-events:none;
  transform:translate(-50%,calc(-100% - 12px));
  background:var(--tv-tip-bg);
  color:var(--tv-tip-ink);
  font-family:var(--tv-font-body);
  font-size:0.8rem;
  line-height:1.4;
  padding:0.5rem 0.7rem;
  border-radius:3px;
  max-width:15rem;
  width:max-content;
  box-shadow:0 6px 18px rgba(0,0,0,0.22);
}
.tree-viz .tv-tip::after{
  content:"";
  position:absolute;
  left:var(--tv-tip-arrow,50%);
  top:100%;
  transform:translateX(-50%);
  border:5px solid transparent;
  border-top-color:var(--tv-tip-bg);
}
.tree-viz .tv-tip.is-below{transform:translate(-50%,14px)}
.tree-viz .tv-tip.is-below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--tv-tip-bg)}
.tree-viz .tv-tip-name{display:block;font-weight:600}
.tree-viz .tv-tip-stage{display:block;opacity:0.72;font-size:0.74rem;margin-top:0.1rem}

/* --- the stage circles: hover or focus slides the title out of the dot
       as a pill; the last two open leftward ----------------------------- */
.tree-viz .tv-sdots{
  position:relative;
  display:flex;align-items:center;gap:0.62rem;
  width:max-content;
  height:2.75rem;
  margin:0;padding:0;
}
.tree-viz .tv-sdots::before{
  content:"";
  position:absolute;left:0.9rem;right:0.9rem;top:50%;
  height:2px;margin-top:-1px;
  background:var(--tv-rule);
}
.tree-viz .tv-sdot-slot{
  position:relative;width:1.8rem;height:1.8rem;flex:0 0 auto;
  z-index:0;
  transition:z-index 0s linear 0.28s;
}
.tree-viz .tv-sdot-slot:focus-within{z-index:2;transition-delay:0s}
.tree-viz .tv-sdot-slot.is-open{z-index:3;transition-delay:0s}
.tree-viz .tv-sdot{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;
  width:1.8rem;height:1.8rem;
  margin:0;padding:0;
  border:0;border-radius:50%;
  background:var(--tv-dc);
  color:#ffffff;
  font-family:var(--tv-font-body);
  font-size:0.8rem;
  font-weight:600;
  line-height:1;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  box-shadow:0 0 0 2px var(--tv-paper);
  transition:box-shadow 0.2s ease;
}
.tree-viz .tv-sdot-label{
  position:absolute;top:0;left:0.9rem;z-index:-1;
  display:flex;align-items:center;
  height:1.8rem;
  padding:0 0.85rem 0 1.25rem;
  border-radius:0 100px 100px 0;
  background:var(--tv-dc);
  color:#ffffff;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:2px -5px 0 var(--tv-paper),2px 5px 0 var(--tv-paper),5px 0 0 var(--tv-paper);
  opacity:0;
  clip-path:inset(-5px 100% -5px 0);
  transition:clip-path 0.28s ease,opacity 0.18s ease;
}
.tree-viz .tv-sdot-slot.is-end .tv-sdot-label{
  left:auto;right:0.9rem;
  padding:0 1.25rem 0 0.85rem;
  border-radius:100px 0 0 100px;
  box-shadow:-2px -5px 0 var(--tv-paper),-2px 5px 0 var(--tv-paper),-5px 0 0 var(--tv-paper);
  clip-path:inset(-5px 0 -5px 100%);
}
.tree-viz .tv-sdot-slot.is-open .tv-sdot-label,
.tree-viz .tv-sdot:focus-visible .tv-sdot-label{opacity:1;clip-path:inset(-5px -5px -5px 0)}
.tree-viz .tv-sdot-slot.is-end.is-open .tv-sdot-label,
.tree-viz .tv-sdot-slot.is-end .tv-sdot:focus-visible .tv-sdot-label{clip-path:inset(-5px 0 -5px -5px)}
.tree-viz .tv-sdot-slot.is-hushed .tv-sdot .tv-sdot-label{opacity:0;clip-path:inset(-5px 100% -5px 0)}
.tree-viz .tv-sdot-slot.is-end.is-hushed .tv-sdot .tv-sdot-label{clip-path:inset(-5px 0 -5px 100%)}
.tree-viz .tv-sdot[aria-current="step"]{box-shadow:0 0 0 2px var(--tv-paper),0 0 0 4px var(--tv-dc)}
.tree-viz .tv-sdot:focus{outline:2px solid transparent;outline-offset:2px}
.tree-viz .tv-sdot:focus-visible{box-shadow:0 0 0 2px var(--tv-paper),0 0 0 4px var(--tv-focus)}
@media (forced-colors:active){
  .tree-viz .tv-sdot{border:1px solid ButtonText}
  .tree-viz .tv-sdot[aria-current="step"]{outline:2px solid Highlight;outline-offset:2px}
  .tree-viz .tv-sdot:focus-visible{outline:2px solid ButtonText;outline-offset:4px}
  .tree-viz .tv-spot:focus-visible{outline:2px solid ButtonText;outline-offset:2px}
}

/* --- the stage header: arrows either side of "Stage 1 of 5" ------------- */
.tree-viz .tv-reader{
  position:relative;
  padding:0.1rem 0 0.2rem calc(1.1rem + 3px);
}
/* the line beside the text, in the stage's color: as long as this stage's
   text (--tv-line-h, set by the script; the whole box without it). It eases
   to its new length and color when the stage changes, and never reaches
   past the text box (on a stacked page the box shrinks at once, and so does
   the line, with the note below). A border, so it prints and takes the
   system color in forced colors. */
.tree-viz .tv-reader::before{
  content:"";
  position:absolute;left:0;top:0;
  width:0;height:var(--tv-line-h,100%);max-height:100%;
  border-left:3px solid var(--tv-cur);
  pointer-events:none;
  transition:height 0.45s ease-out,border-color 0.45s ease;
}
/* a cramped full screen's text box scrolls: the line runs with the text
   past what shows, and changes length at once so it never holds the scroll */
.tree-viz.is-cramped .tv-reader::before{max-height:none;transition:border-color 0.45s ease}
/* a change that isn't a stage change (a resize, the fonts arriving, full
   screen starting or ending) applies at once: the script adds this */
.tree-viz .tv-reader.is-line-snap::before{transition:none}
/* the hidden help text in the box adds no scroll of its own */
.tree-viz .tv-reader .tv-sr{margin:0}
@media (prefers-reduced-motion:reduce){.tree-viz .tv-reader::before{transition:none}}
.tree-viz .tv-stepnav{display:flex;align-items:center;gap:0.7rem;margin:0 0 0.8rem}
.tree-viz .tv-arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.5rem;height:2.5rem;flex:0 0 auto;
  margin:0;padding:0;
  border:2px solid var(--tv-secondary);
  border-radius:50%;
  background:transparent;
  color:var(--tv-secondary);
  cursor:pointer;
}
@media (hover:hover){.tree-viz .tv-arrow:hover{background:rgba(47,109,132,0.08)}}
.tree-viz .tv-arrow svg{width:17px;height:17px}
.tree-viz .tv-arrow[aria-disabled="true"]{opacity:0.35;cursor:default}
.tree-viz .tv-arrow[aria-disabled="true"]:hover{background:transparent}
.tree-viz .tv-arrow:focus-visible,
.tree-viz .tv-need:focus-visible,
.tree-viz .tv-link:focus-visible{outline:2px solid var(--tv-focus);outline-offset:3px}

/* --- caption panel ------------------------------------------------------ */
.tree-viz .tv-panel{padding:0}
.tree-viz .tv-panel.is-entering{animation:tv-fade 420ms ease-out}
@keyframes tv-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tree-viz .tv-step,
.tree-viz .tv-where{
  margin:0;
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--tv-muted);
  font-variant-numeric:tabular-nums;
}
.tree-viz .tv-title{
  margin:0 0 0.65rem;
  font-family:var(--tv-font-display);
  font-size:clamp(1.35rem,2.5vw,1.6rem);
  font-weight:400;
  line-height:1.18;
  color:var(--tv-ink);
  text-wrap:balance;
}
.tree-viz .tv-caption{
  margin:0 0 1.15rem;
  font-size:0.95rem;
  line-height:1.62;
  color:var(--tv-prose);
}
.tree-viz .tv-where{margin-bottom:0.5rem}
.tree-viz .tv-step{min-width:7.2em;text-align:center}

/* the core needs (stage 1), like "Where it happens": hover, focus or tap
   one and its line runs from a root tip up to a flower */
.tree-viz .tv-needs{list-style:none;margin:0;padding:0;columns:2;column-gap:0.9rem}
.tree-viz .tv-needs li{break-inside:avoid;margin:0}
.tree-viz .tv-need{
  position:relative;
  display:block;width:100%;
  margin:0;padding:0.24rem 0 0.24rem 1rem;
  border:0;background:none;border-radius:3px;
  font-family:var(--tv-font-body);
  font-size:0.84rem;
  line-height:1.4;
  text-align:left;
  color:var(--tv-prose);
  cursor:pointer;
}
.tree-viz .tv-need::before{
  content:"";
  position:absolute;left:0;top:0.72em;
  width:7px;height:7px;border-radius:50%;
  background:var(--tv-s1);
}
.tree-viz .tv-need:disabled{cursor:default;color:var(--tv-prose);opacity:1}
.tree-viz .tv-need.is-on{color:var(--tv-ink);text-decoration:underline;text-decoration-color:rgba(22,40,60,0.55);text-underline-offset:2px}
.tree-viz .tv-need.is-on::before{background:var(--tv-ink)}
@media (hover:hover){.tree-viz .tv-need:not(:disabled):hover{color:var(--tv-ink);text-decoration:underline;text-decoration-color:rgba(22,40,60,0.55);text-underline-offset:2px}}

/* --- the note under the interactive (Music and the Brain's) ------------- */
.tree-viz .tv-note{
  margin:2.4rem 0 0;
  padding:0.9rem 0 0;
  border-top:1px solid var(--tv-rule);
  max-width:72ch;
  font-size:0.78rem;
  line-height:1.55;
  color:var(--tv-muted);
}
.tree-viz .tv-note-text{margin:0 0 0.45rem}
.tree-viz .tv-note-label{font-weight:600;color:var(--tv-prose)}

/* stage 5: one link, to the Healthy Minds articles on Insights, as a pill */
.tree-viz .tv-more{margin:0.2rem 0 0}
.tree-viz .tv-more-link{
  display:inline-flex;align-items:center;
  padding:0.5rem 1.1rem;
  border:2px solid var(--tv-secondary);
  border-radius:100px;
  font-family:var(--tv-font-body);
  font-size:0.84rem;
  font-weight:600;
  line-height:1.2;
  color:var(--tv-secondary);
  text-decoration:none;
  transition:background 0.2s ease,color 0.2s ease;
}
@media (hover:hover){.tree-viz .tv-more-link:hover{background:var(--tv-secondary);color:var(--tv-on-secondary)}}
.tree-viz .tv-more-link:focus-visible{outline:2px solid var(--tv-focus);outline-offset:3px}

.tree-viz .tv-link{color:var(--tv-secondary);text-decoration:underline;text-decoration-color:rgba(47,109,132,0.4);text-underline-offset:2px}
.tree-viz .tv-link:hover{text-decoration-color:currentColor}

@media (max-width:860px){
  /* narrow: the circles and the picture, then the text (the same order as
     the keyboard's) */
  .tree-viz .tv-grid{grid-template-columns:minmax(0,1fr);gap:1rem}
  .tree-viz .tv-figure{grid-column:1;grid-row:1}
  .tree-viz .tv-reader{grid-column:1;grid-row:2}
}
@media (max-width:600px){
  .tree-viz .tv-canvas{margin:0 -12px;width:calc(100% + 24px)}
  /* a closed title pill stays out of the layout (it would widen the page) */
  .tree-viz .tv-sdot-label{display:none}
  .tree-viz .tv-sdot-slot.is-open .tv-sdot-label,
  .tree-viz .tv-sdot:focus-visible .tv-sdot-label{display:flex}
}
@media (max-width:380px){
  .tree-viz .tv-sdots{gap:0.42rem}
  .tree-viz .tv-tools{gap:0.7rem}
  .tree-viz .tv-tool{width:2.25rem;height:2.25rem}
}
/* --- full screen, for presenting -----------------------------------------
   The title and the stage text on the left and the tree on the right, the
   whole centered on the screen with plenty of room round it, over the page's
   paper and its watercolor washes, as on the page (same size and strength); on
   a tall screen, the tree under the title and the text under the tree. How
   big the tree, the type and the washes are is set by the --tv-present-*
   and --tv-wash-* values below. In the browser's full screen
   where it allows, otherwise over the whole window. Type is larger, for a
   room (--tv-fit, set by the script from --tv-present-type), and steps down
   further until the longest stage's text fits. Not offered on phones. --------------------------------------------- */
/* the button sits right of the sound switch, the same round tool */
.tree-viz .tv-full .tv-ico{width:17px;height:17px}
/* a stage name cut short when there's no room for it (see fitPill) */
.tree-viz .tv-sdot-label{box-sizing:border-box}
.tree-viz .tv-sdot-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover){.tree-viz .tv-full:hover{background:rgba(47,109,132,0.08)}}
/* not offered on phones, upright or sideways; never hidden while presenting */
@media (max-width:600px),(max-height:500px){.tree-viz:not(.is-presenting) .tv-full{display:none}}
html.tv-is-presenting,html.tv-is-presenting body{overflow:hidden}
.tree-viz.is-presenting{
  --tv-pad-y:clamp(1.25rem,4.5vh,3.5rem);
  --tv-pad-x:clamp(1.5rem,5vw,6rem);
  --tv-present-scale:0.72;   /* the tree: this much of what the screen's height allows */
  --tv-present-type:0.8;     /* the type, before it steps down to fit */
  --tv-wash-size:220px;      /* as body::after in rethinking-endo.css; the images are only 253px wide */
  --tv-wash-opacity:0.3;
  position:fixed;inset:0;z-index:2147483000;
  display:grid;
  grid-template-columns:minmax(0,34rem) auto;
  /* the title and the text in rows 2 and 3, centered between two flexible
     rows; the tree spans all four */
  grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr);
  justify-content:center;
  column-gap:clamp(2rem,5vw,6rem);
  width:100%;height:100%;max-width:none;
  margin:0;
  padding:var(--tv-pad-y) var(--tv-pad-x);
  box-sizing:border-box;
  overflow:hidden;
  /* the page's paper, as the page draws it: the theme's paper texture
     (style.css .page-content::before, 0.25) over rethinking-endo.css's
     finer one (body::before, 0.1). The finer one is folded into the
     background here (the paper color at 90% over it); the theme's is the
     ::before layer below */
  background:
    linear-gradient(rgba(250,248,245,0.9),rgba(250,248,245,0.9)),
    url("assets/paper-texture.png") repeat,
    var(--tv-paper);
}
.tree-viz.is-presenting:focus{outline:none}
/* the page's paper and watercolor washes (css/rethinking-endo.css: body::before
   and ::after), which full screen would otherwise cover */
.tree-viz.is-presenting::before,
.tree-viz.is-presenting::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none}
.tree-viz.is-presenting::before{background:url("../images/paper-texture.png") repeat;opacity:0.25}
.tree-viz.is-presenting::after{
  background:
    url("assets/watercolor-blue-left.webp") left top / var(--tv-wash-size) auto no-repeat,
    url("assets/watercolor-pink-right.webp") right bottom / var(--tv-wash-size) auto no-repeat;
  opacity:var(--tv-wash-opacity);
}
.tree-viz.is-presenting .tv-kicker,
.tree-viz.is-presenting .tv-howto,
.tree-viz.is-presenting .tv-note{display:none}
.tree-viz.is-presenting .tv-headline{
  grid-column:1;grid-row:2;align-self:end;
  margin:0 0 clamp(1rem,3.2vh,2.25rem);
  font-size:calc(clamp(1.6rem,4.2vh,2.75rem) * var(--tv-fit,1));
}
.tree-viz.is-presenting .tv-grid{display:contents}
.tree-viz.is-presenting .tv-reader{grid-column:1;grid-row:3;align-self:start}
.tree-viz.is-presenting .tv-figure{
  grid-column:2;grid-row:1 / span 4;align-self:center;
  /* a share of what the height allows (the bar over the tree is about 3.75rem tall) */
  width:calc(var(--tv-present-scale) * min(calc(100vh - 2 * var(--tv-pad-y) - 3.75rem), 58vw));
  width:calc(var(--tv-present-scale) * min(calc(100dvh - 2 * var(--tv-pad-y) - 3.75rem), 58vw));
}
/* on a smaller screen the tools wrap under the circles rather than sit
   where a circle's name opens (the longest, stage 3's, reaches about
   17.6rem from the bar's left; the circles take 11.48rem; plus Play's
   timer ring and a gap), and never run off the screen */
.tree-viz.is-presenting .tv-bar{flex-wrap:wrap;row-gap:0.5rem}
.tree-viz.is-presenting .tv-sdots{margin-right:calc(6.12rem + 13px)}
.tree-viz.is-presenting .tv-tools{margin-left:auto}
.tree-viz.is-presenting .tv-stepnav{margin-bottom:clamp(0.9rem,2.4vh,1.6rem)}
.tree-viz.is-presenting .tv-step{font-size:calc(clamp(0.75rem,1.55vh,1rem) * var(--tv-fit,1))}
.tree-viz.is-presenting .tv-title{font-size:calc(clamp(1.5rem,3.7vh,2.6rem) * var(--tv-fit,1));margin-bottom:clamp(0.6rem,1.8vh,1.2rem)}
.tree-viz.is-presenting .tv-caption{font-size:calc(clamp(1rem,2.35vh,1.5rem) * var(--tv-fit,1));line-height:1.55;max-width:36em}
.tree-viz.is-presenting .tv-where{font-size:calc(clamp(0.72rem,1.45vh,0.95rem) * var(--tv-fit,1))}
.tree-viz.is-presenting .tv-need,
.tree-viz.is-presenting .tv-more-link{font-size:calc(clamp(0.9rem,1.95vh,1.2rem) * var(--tv-fit,1))}
/* a tall screen: the tree under the title, the text under the tree, type
   sized to the width, and the needs in three columns */
@media (max-aspect-ratio:1/1){
  .tree-viz.is-presenting{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);justify-items:center}
  .tree-viz.is-presenting .tv-headline{grid-column:1;grid-row:1;justify-self:start;font-size:calc(clamp(1.6rem,4.2vw,2.75rem) * var(--tv-fit,1))}
  .tree-viz.is-presenting .tv-figure{
    grid-column:1;grid-row:2;
    width:calc(var(--tv-present-scale) / 0.9 * min(calc(100vw - 2 * var(--tv-pad-x)), calc(46vh - 3.75rem)));
    width:calc(var(--tv-present-scale) / 0.9 * min(calc(100vw - 2 * var(--tv-pad-x)), calc(46dvh - 3.75rem)));
  }
  .tree-viz.is-presenting .tv-reader{grid-column:1;grid-row:3;justify-self:stretch;margin-top:clamp(1rem,2.5vh,2rem)}
  .tree-viz.is-presenting .tv-step{font-size:calc(clamp(0.75rem,1.6vw,1rem) * var(--tv-fit,1))}
  .tree-viz.is-presenting .tv-title{font-size:calc(clamp(1.4rem,3.6vw,2.4rem) * var(--tv-fit,1))}
  .tree-viz.is-presenting .tv-caption{font-size:calc(clamp(1rem,2.3vw,1.4rem) * var(--tv-fit,1));max-width:none}
  .tree-viz.is-presenting .tv-where{font-size:calc(clamp(0.72rem,1.5vw,0.95rem) * var(--tv-fit,1))}
  .tree-viz.is-presenting .tv-need,
  .tree-viz.is-presenting .tv-more-link{font-size:calc(clamp(0.9rem,1.9vw,1.15rem) * var(--tv-fit,1))}
  .tree-viz.is-presenting .tv-needs{columns:3}
}
/* if even the smallest type doesn't fit, the text scrolls */
.tree-viz.is-presenting.is-cramped{grid-template-rows:0 auto minmax(0,1fr) 0}
.tree-viz.is-presenting.is-cramped .tv-reader{max-height:100%;overflow:auto}
@media (max-aspect-ratio:1/1){.tree-viz.is-presenting.is-cramped{grid-template-rows:auto auto minmax(0,1fr)}}
/* the pointer hides when it rests */
.tree-viz.is-presenting.is-idle,
.tree-viz.is-presenting.is-idle *{cursor:none}
/* the reminder of the keys, for a few seconds as full screen begins, at the
   bottom right, under the tree (clear of the text) */
.tree-viz .tv-present-hint{display:none}
.tree-viz.is-presenting .tv-present-hint{
  display:block;
  position:absolute;right:var(--tv-pad-x);bottom:clamp(0.75rem,2.6vh,1.75rem);z-index:5;
  margin:0;padding:0.55rem 1rem;
  border-radius:100px;
  background:var(--tv-tip-bg);color:var(--tv-tip-ink);
  font-family:var(--tv-font-body);font-size:0.875rem;font-weight:600;line-height:1.3;
  white-space:nowrap;
  opacity:0;transform:translateY(8px);
  pointer-events:none;
  transition:opacity 0.35s ease,transform 0.35s ease;
}
.tree-viz.is-presenting .tv-present-hint.is-on{opacity:1;transform:none}
.tree-viz .tv-present-hint kbd{
  display:inline-block;min-width:1.7em;margin:0 0.1em;padding:0.05em 0.4em;
  border:1px solid rgba(244,241,234,0.55);border-radius:4px;
  font:inherit;text-align:center;
}
.tree-viz .tv-present-sep{margin:0 0.35em;opacity:0.6}
@media (prefers-reduced-motion:reduce){
  .tree-viz.is-presenting .tv-present-hint{transition:none}
}

@media (prefers-reduced-motion:reduce){
  .tree-viz .tv-sdot-label,.tree-viz .tv-sdot,.tree-viz .tv-sdot-slot{transition:none}
  .tree-viz .tv-panel.is-entering{animation:none}
  .tree-viz .tv-caret{transition:none}
  .tree-viz .tv-timer{transition:none}
  .tree-viz .tv-base,.tree-viz .tv-art,.tree-viz .tv-outline,.tree-viz .tv-edges,.tree-viz .tv-tag,.tree-viz .tv-sample,.tree-viz .tv-sample > *{transition:none}
}