/* Wilber visuals: shared design language.
 *
 * Scoped under .wv-root so it can be loaded site-wide through config.json
 * "head" (the same way assets/roadmap/roadmap.css is) without touching the
 * rest of wilber.wiki. Light only: the figures are not themed for dark mode
 * (decided 2026-10-26). Colours and type are tokens so they can be swapped.
 *
 * Structure of this file (the export script reads the marked blocks):
 *   @tokens … @tokens-end          colour tokens
 *   @svg-start … @svg-end          classes used inside the SVG sources
 *   the rest                       page chrome: figure frame, controls, quotes
 */

/* ------------------------------------------------------------ tokens */

.wv-root {
  /* @tokens */
  --wv-paper: #f8f6f1;
  --wv-surface: #fffdf9;
  --wv-ink: #1c1917;
  --wv-ink-soft: #57534e;
  --wv-muted: #6f6861;
  --wv-line: #ddd7cd;
  --wv-line-strong: #aaa198;
  --wv-level: #4338ca;
  --wv-level-fill: rgba(67, 56, 202, 0.10);
  --wv-state: #b45309;
  --wv-state-fill: rgba(180, 83, 9, 0.14);
  --wv-fallacy: #be123c;
  --wv-fallacy-fill: rgba(190, 18, 60, 0.11);
  --wv-ground: #0f766e;
  --wv-ground-fill: rgba(15, 118, 110, 0.13);
  --wv-neutral-fill: rgba(28, 25, 23, 0.055);
  --wv-accent: #b45309;
  --wv-accent-ring: rgba(217, 119, 6, 0.25);
  /* @tokens-end */

  --wv-serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --wv-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --wv-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* motion */
  --wv-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --wv-ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --wv-t-fade: 420ms;
  --wv-t-move: 900ms;
  --wv-t-draw: 700ms;
  --wv-stagger: 90ms;

  color: var(--wv-ink);
  font-family: var(--wv-sans);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------ svg vocabulary */
/* @svg-start */
.wv-root svg { color: var(--wv-ink); }
.wv-root svg text { font-family: var(--wv-sans); fill: currentColor; }

/* type roles */
.wv-root svg .t-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 2.2px; fill: var(--wv-muted); }
.wv-root svg .t-title   { font-family: var(--wv-serif); font-size: 46px; font-weight: 600; letter-spacing: -0.6px; }
.wv-root svg .t-sub     { font-family: var(--wv-serif); font-size: 19px; font-style: italic; fill: var(--wv-ink-soft); }
.wv-root svg .t-head    { font-size: 12px; font-weight: 600; letter-spacing: 2px; fill: var(--wv-muted); }
.wv-root svg .t-name    { font-family: var(--wv-serif); font-size: 28px; font-weight: 600; }
.wv-root svg .t-name-s  { font-family: var(--wv-serif); font-size: 20px; font-weight: 600; }
.wv-root svg .t-label   { font-size: 13px; }
.wv-root svg .t-label-b { font-size: 13px; font-weight: 600; }
.wv-root svg .t-small   { font-size: 11px; }
.wv-root svg .t-soft    { fill: var(--wv-ink-soft); }
.wv-root svg .t-mute    { fill: var(--wv-muted); }
.wv-root svg .t-quote   { font-family: var(--wv-serif); font-size: 16px; }
.wv-root svg .t-quote-s { font-family: var(--wv-serif); font-size: 14px; }
.wv-root svg .t-loc     { font-size: 11px; fill: var(--wv-muted); }
.wv-root svg .t-ours    { font-size: 11px; font-style: italic; fill: var(--wv-muted); }
.wv-root svg .t-foot    { font-size: 10.5px; fill: var(--wv-muted); }
.wv-root svg .t-mark    { font-size: 11px; font-weight: 600; letter-spacing: 1px; fill: var(--wv-muted); }

/* semantic colour roles: text, stroke, fill */
.wv-root svg .c-level   { fill: var(--wv-level); }   .wv-root svg .s-level   { stroke: var(--wv-level); }   .wv-root svg .f-level   { fill: var(--wv-level-fill); }
.wv-root svg .c-state   { fill: var(--wv-state); }   .wv-root svg .s-state   { stroke: var(--wv-state); }   .wv-root svg .f-state   { fill: var(--wv-state-fill); }
.wv-root svg .c-fallacy { fill: var(--wv-fallacy); } .wv-root svg .s-fallacy { stroke: var(--wv-fallacy); } .wv-root svg .f-fallacy { fill: var(--wv-fallacy-fill); }
.wv-root svg .c-ground  { fill: var(--wv-ground); }  .wv-root svg .s-ground  { stroke: var(--wv-ground); }  .wv-root svg .f-ground  { fill: var(--wv-ground-fill); }
.wv-root svg .c-ink     { fill: currentColor; }      .wv-root svg .s-ink     { stroke: currentColor; }      .wv-root svg .f-neutral { fill: var(--wv-neutral-fill); }
.wv-root svg .f-paper   { fill: var(--wv-paper); }   .wv-root svg .f-surface { fill: var(--wv-surface); }
.wv-root svg .s-line    { stroke: var(--wv-line-strong); } .wv-root svg .s-faint { stroke: var(--wv-line); }
.wv-root svg .nf        { fill: none; }

/* stroke vocabulary */
.wv-root svg .w-hair   { stroke-width: 1; }
.wv-root svg .w-struct { stroke-width: 1.5; }
.wv-root svg .w-path   { stroke-width: 2.5; stroke-linecap: round; }
.wv-root svg .w-arc    { stroke-width: 3.5; stroke-linecap: round; }
.wv-root svg .k-solid  { stroke-dasharray: none; }
.wv-root svg .k-dash   { stroke-dasharray: 7 6; }
.wv-root svg .k-dot    { stroke-dasharray: 1.5 5; stroke-linecap: round; }
/* @svg-end */

/* ------------------------------------------------------------ figure frame */

.wv-figure { margin: 0; }
.wv-figure .wv-frame {
  background: var(--wv-surface);
  border: 1px solid var(--wv-line);
  border-radius: 12px;
  padding: clamp(6px, 1.5vw, 14px);
}
.wv-figure svg { display: block; width: 100%; height: auto; }
.wv-figure figcaption { font-size: 0.82rem; color: var(--wv-muted); margin-top: 0.5rem; line-height: 1.5; }

/* ------------------------------------------------------------ controls */

.wv-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 0 0 0.75rem;
}
.wv-controls button {
  font: 600 0.88rem/1 var(--wv-sans);
  padding: 0.58rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--wv-line-strong);
  background: var(--wv-surface);
  color: var(--wv-ink);
  cursor: pointer;
}
.wv-controls button[aria-pressed="true"],
.wv-controls button.is-primary { background: var(--wv-ink); color: var(--wv-paper); border-color: var(--wv-ink); }
.wv-controls button:disabled { opacity: 0.4; cursor: default; }
.wv-controls button:focus-visible { outline: 3px solid var(--wv-accent-ring); outline-offset: 2px; }
.wv-controls .wv-steps { display: inline-flex; gap: 0.3rem; align-items: center; }
.wv-controls .wv-steps button { width: 2.2rem; padding: 0.58rem 0; text-align: center; }
.wv-controls .wv-hint { font-size: 0.8rem; color: var(--wv-muted); }

/* ------------------------------------------------------------ text roles in HTML */

.wv-root .wv-quote {
  margin: 0.8rem 0; padding: 0 0 0 1rem;
  border-left: 3px solid var(--wv-line-strong);
  font-family: var(--wv-serif); font-size: 1.02rem; line-height: 1.5; color: var(--wv-ink);
}
.wv-root .wv-quote .wv-loc { display: block; font-family: var(--wv-sans); font-size: 0.78rem; color: var(--wv-muted); margin-top: 0.3rem; }
.wv-root .wv-ours { font-style: italic; color: var(--wv-muted); text-decoration: underline dotted var(--wv-line-strong); text-underline-offset: 3px; }
.wv-root .wv-ours::before { content: "◇ "; font-style: normal; }
.wv-root .wv-label { font-family: var(--wv-sans); }
.wv-root .wv-foot { font-size: 0.78rem; color: var(--wv-muted); line-height: 1.5; }
.wv-root .wv-foot a { color: inherit; }

/* ------------------------------------------------------------ motion base */

.wv-root [data-wv-steps] .wv-fade { transition: opacity var(--wv-t-fade) var(--wv-ease); }
.wv-root [data-wv-steps] .wv-move { transition: transform var(--wv-t-move) var(--wv-ease), opacity var(--wv-t-fade) var(--wv-ease); }
.wv-root [data-wv-steps] .wv-draw { transition: stroke-dashoffset var(--wv-t-draw) var(--wv-ease-out), opacity var(--wv-t-fade) var(--wv-ease); }
.wv-root [data-wv-steps] .wv-draw[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .wv-root * { transition: none !important; animation: none !important; }
}
.wv-root.wv-no-motion *, .wv-root .wv-no-motion * { transition: none !important; animation: none !important; }

/* ------------------------------------------------------------ step visibility
 * A piece root carries data-wv-steps="N" and data-step="k". Any element with
 * data-at="j" is shown when j <= k. How it appears depends on its class:
 *   .wv-fade  opacity            .wv-draw  stroke draws in (needs pathLength="1")
 *   .wv-move  from --wv-from     .wv-ghost one-shot keyframe flight, invisible when settled
 * Markup defaults to data-step="N" (the settled frame), so no JS = static image.
 */
.wv-root [data-wv-steps] .wv-move { transform: none; }
.wv-root [data-wv-steps] .wv-ghost { opacity: 0; }
.wv-root .wv-armed .wv-ghost[data-at] { animation: wv-ghost var(--wv-t-move) var(--wv-ease) forwards; }
@keyframes wv-ghost {
  0%   { opacity: 0.75; transform: var(--wv-from, none); }
  70%  { opacity: 0.55; }
  100% { opacity: 0;    transform: var(--wv-to, none); }
}
.wv-root [data-step="0"] [data-at="1"],
.wv-root [data-step="0"] [data-at="2"],
.wv-root [data-step="0"] [data-at="3"],
.wv-root [data-step="0"] [data-at="4"],
.wv-root [data-step="0"] [data-at="5"],
.wv-root [data-step="0"] [data-at="6"],
.wv-root [data-step="0"] [data-at="7"],
.wv-root [data-step="0"] [data-at="8"],
.wv-root [data-step="0"] [data-at="9"] { opacity: 0; }
.wv-root [data-step="0"] .wv-draw[data-at="1"],
.wv-root [data-step="0"] .wv-draw[data-at="2"],
.wv-root [data-step="0"] .wv-draw[data-at="3"],
.wv-root [data-step="0"] .wv-draw[data-at="4"],
.wv-root [data-step="0"] .wv-draw[data-at="5"],
.wv-root [data-step="0"] .wv-draw[data-at="6"],
.wv-root [data-step="0"] .wv-draw[data-at="7"],
.wv-root [data-step="0"] .wv-draw[data-at="8"],
.wv-root [data-step="0"] .wv-draw[data-at="9"] { stroke-dashoffset: 1; }
.wv-root [data-step="0"] .wv-move[data-at="1"],
.wv-root [data-step="0"] .wv-move[data-at="2"],
.wv-root [data-step="0"] .wv-move[data-at="3"],
.wv-root [data-step="0"] .wv-move[data-at="4"],
.wv-root [data-step="0"] .wv-move[data-at="5"],
.wv-root [data-step="0"] .wv-move[data-at="6"],
.wv-root [data-step="0"] .wv-move[data-at="7"],
.wv-root [data-step="0"] .wv-move[data-at="8"],
.wv-root [data-step="0"] .wv-move[data-at="9"] { transform: var(--wv-from, none); }
.wv-root [data-step="0"] .wv-ghost[data-at="1"],
.wv-root [data-step="0"] .wv-ghost[data-at="2"],
.wv-root [data-step="0"] .wv-ghost[data-at="3"],
.wv-root [data-step="0"] .wv-ghost[data-at="4"],
.wv-root [data-step="0"] .wv-ghost[data-at="5"],
.wv-root [data-step="0"] .wv-ghost[data-at="6"],
.wv-root [data-step="0"] .wv-ghost[data-at="7"],
.wv-root [data-step="0"] .wv-ghost[data-at="8"],
.wv-root [data-step="0"] .wv-ghost[data-at="9"] { animation: none; }
.wv-root [data-step="1"] [data-at="2"],
.wv-root [data-step="1"] [data-at="3"],
.wv-root [data-step="1"] [data-at="4"],
.wv-root [data-step="1"] [data-at="5"],
.wv-root [data-step="1"] [data-at="6"],
.wv-root [data-step="1"] [data-at="7"],
.wv-root [data-step="1"] [data-at="8"],
.wv-root [data-step="1"] [data-at="9"] { opacity: 0; }
.wv-root [data-step="1"] .wv-draw[data-at="2"],
.wv-root [data-step="1"] .wv-draw[data-at="3"],
.wv-root [data-step="1"] .wv-draw[data-at="4"],
.wv-root [data-step="1"] .wv-draw[data-at="5"],
.wv-root [data-step="1"] .wv-draw[data-at="6"],
.wv-root [data-step="1"] .wv-draw[data-at="7"],
.wv-root [data-step="1"] .wv-draw[data-at="8"],
.wv-root [data-step="1"] .wv-draw[data-at="9"] { stroke-dashoffset: 1; }
.wv-root [data-step="1"] .wv-move[data-at="2"],
.wv-root [data-step="1"] .wv-move[data-at="3"],
.wv-root [data-step="1"] .wv-move[data-at="4"],
.wv-root [data-step="1"] .wv-move[data-at="5"],
.wv-root [data-step="1"] .wv-move[data-at="6"],
.wv-root [data-step="1"] .wv-move[data-at="7"],
.wv-root [data-step="1"] .wv-move[data-at="8"],
.wv-root [data-step="1"] .wv-move[data-at="9"] { transform: var(--wv-from, none); }
.wv-root [data-step="1"] .wv-ghost[data-at="2"],
.wv-root [data-step="1"] .wv-ghost[data-at="3"],
.wv-root [data-step="1"] .wv-ghost[data-at="4"],
.wv-root [data-step="1"] .wv-ghost[data-at="5"],
.wv-root [data-step="1"] .wv-ghost[data-at="6"],
.wv-root [data-step="1"] .wv-ghost[data-at="7"],
.wv-root [data-step="1"] .wv-ghost[data-at="8"],
.wv-root [data-step="1"] .wv-ghost[data-at="9"] { animation: none; }
.wv-root [data-step="2"] [data-at="3"],
.wv-root [data-step="2"] [data-at="4"],
.wv-root [data-step="2"] [data-at="5"],
.wv-root [data-step="2"] [data-at="6"],
.wv-root [data-step="2"] [data-at="7"],
.wv-root [data-step="2"] [data-at="8"],
.wv-root [data-step="2"] [data-at="9"] { opacity: 0; }
.wv-root [data-step="2"] .wv-draw[data-at="3"],
.wv-root [data-step="2"] .wv-draw[data-at="4"],
.wv-root [data-step="2"] .wv-draw[data-at="5"],
.wv-root [data-step="2"] .wv-draw[data-at="6"],
.wv-root [data-step="2"] .wv-draw[data-at="7"],
.wv-root [data-step="2"] .wv-draw[data-at="8"],
.wv-root [data-step="2"] .wv-draw[data-at="9"] { stroke-dashoffset: 1; }
.wv-root [data-step="2"] .wv-move[data-at="3"],
.wv-root [data-step="2"] .wv-move[data-at="4"],
.wv-root [data-step="2"] .wv-move[data-at="5"],
.wv-root [data-step="2"] .wv-move[data-at="6"],
.wv-root [data-step="2"] .wv-move[data-at="7"],
.wv-root [data-step="2"] .wv-move[data-at="8"],
.wv-root [data-step="2"] .wv-move[data-at="9"] { transform: var(--wv-from, none); }
.wv-root [data-step="2"] .wv-ghost[data-at="3"],
.wv-root [data-step="2"] .wv-ghost[data-at="4"],
.wv-root [data-step="2"] .wv-ghost[data-at="5"],
.wv-root [data-step="2"] .wv-ghost[data-at="6"],
.wv-root [data-step="2"] .wv-ghost[data-at="7"],
.wv-root [data-step="2"] .wv-ghost[data-at="8"],
.wv-root [data-step="2"] .wv-ghost[data-at="9"] { animation: none; }
.wv-root [data-step="3"] [data-at="4"],
.wv-root [data-step="3"] [data-at="5"],
.wv-root [data-step="3"] [data-at="6"],
.wv-root [data-step="3"] [data-at="7"],
.wv-root [data-step="3"] [data-at="8"],
.wv-root [data-step="3"] [data-at="9"] { opacity: 0; }
.wv-root [data-step="3"] .wv-draw[data-at="4"],
.wv-root [data-step="3"] .wv-draw[data-at="5"],
.wv-root [data-step="3"] .wv-draw[data-at="6"],
.wv-root [data-step="3"] .wv-draw[data-at="7"],
.wv-root [data-step="3"] .wv-draw[data-at="8"],
.wv-root [data-step="3"] .wv-draw[data-at="9"] { stroke-dashoffset: 1; }
.wv-root [data-step="3"] .wv-move[data-at="4"],
.wv-root [data-step="3"] .wv-move[data-at="5"],
.wv-root [data-step="3"] .wv-move[data-at="6"],
.wv-root [data-step="3"] .wv-move[data-at="7"],
.wv-root [data-step="3"] .wv-move[data-at="8"],
.wv-root [data-step="3"] .wv-move[data-at="9"] { transform: var(--wv-from, none); }
.wv-root [data-step="3"] .wv-ghost[data-at="4"],
.wv-root [data-step="3"] .wv-ghost[data-at="5"],
.wv-root [data-step="3"] .wv-ghost[data-at="6"],
.wv-root [data-step="3"] .wv-ghost[data-at="7"],
.wv-root [data-step="3"] .wv-ghost[data-at="8"],
.wv-root [data-step="3"] .wv-ghost[data-at="9"] { animation: none; }
.wv-root [data-step="4"] [data-at="5"],
.wv-root [data-step="4"] [data-at="6"],
.wv-root [data-step="4"] [data-at="7"],
.wv-root [data-step="4"] [data-at="8"],
.wv-root [data-step="4"] [data-at="9"] { opacity: 0; }
.wv-root [data-step="4"] .wv-draw[data-at="5"],
.wv-root [data-step="4"] .wv-draw[data-at="6"],
.wv-root [data-step="4"] .wv-draw[data-at="7"],
.wv-root [data-step="4"] .wv-draw[data-at="8"],
.wv-root [data-step="4"] .wv-draw[data-at="9"] { stroke-dashoffset: 1; }
.wv-root [data-step="4"] .wv-move[data-at="5"],
.wv-root [data-step="4"] .wv-move[data-at="6"],
.wv-root [data-step="4"] .wv-move[data-at="7"],
.wv-root [data-step="4"] .wv-move[data-at="8"],
.wv-root [data-step="4"] .wv-move[data-at="9"] { transform: var(--wv-from, none); }
.wv-root [data-step="4"] .wv-ghost[data-at="5"],
.wv-root [data-step="4"] .wv-ghost[data-at="6"],
.wv-root [data-step="4"] .wv-ghost[data-at="7"],
.wv-root [data-step="4"] .wv-ghost[data-at="8"],
.wv-root [data-step="4"] .wv-ghost[data-at="9"] { animation: none; }
.wv-root [data-step="5"] [data-at="6"],
.wv-root [data-step="5"] [data-at="7"],
.wv-root [data-step="5"] [data-at="8"],
.wv-root [data-step="5"] [data-at="9"] { opacity: 0; }
.wv-root [data-step="5"] .wv-draw[data-at="6"],
.wv-root [data-step="5"] .wv-draw[data-at="7"],
.wv-root [data-step="5"] .wv-draw[data-at="8"],
.wv-root [data-step="5"] .wv-draw[data-at="9"] { stroke-dashoffset: 1; }
.wv-root [data-step="5"] .wv-move[data-at="6"],
.wv-root [data-step="5"] .wv-move[data-at="7"],
.wv-root [data-step="5"] .wv-move[data-at="8"],
.wv-root [data-step="5"] .wv-move[data-at="9"] { transform: var(--wv-from, none); }
.wv-root [data-step="5"] .wv-ghost[data-at="6"],
.wv-root [data-step="5"] .wv-ghost[data-at="7"],
.wv-root [data-step="5"] .wv-ghost[data-at="8"],
.wv-root [data-step="5"] .wv-ghost[data-at="9"] { animation: none; }
.wv-root [data-step="6"] [data-at="7"],
.wv-root [data-step="6"] [data-at="8"],
.wv-root [data-step="6"] [data-at="9"] { opacity: 0; }
.wv-root [data-step="6"] .wv-draw[data-at="7"],
.wv-root [data-step="6"] .wv-draw[data-at="8"],
.wv-root [data-step="6"] .wv-draw[data-at="9"] { stroke-dashoffset: 1; }
.wv-root [data-step="6"] .wv-move[data-at="7"],
.wv-root [data-step="6"] .wv-move[data-at="8"],
.wv-root [data-step="6"] .wv-move[data-at="9"] { transform: var(--wv-from, none); }
.wv-root [data-step="6"] .wv-ghost[data-at="7"],
.wv-root [data-step="6"] .wv-ghost[data-at="8"],
.wv-root [data-step="6"] .wv-ghost[data-at="9"] { animation: none; }
.wv-root [data-step="7"] [data-at="8"],
.wv-root [data-step="7"] [data-at="9"] { opacity: 0; }
.wv-root [data-step="7"] .wv-draw[data-at="8"],
.wv-root [data-step="7"] .wv-draw[data-at="9"] { stroke-dashoffset: 1; }
.wv-root [data-step="7"] .wv-move[data-at="8"],
.wv-root [data-step="7"] .wv-move[data-at="9"] { transform: var(--wv-from, none); }
.wv-root [data-step="7"] .wv-ghost[data-at="8"],
.wv-root [data-step="7"] .wv-ghost[data-at="9"] { animation: none; }
.wv-root [data-step="8"] [data-at="9"] { opacity: 0; }
.wv-root [data-step="8"] .wv-draw[data-at="9"] { stroke-dashoffset: 1; }
.wv-root [data-step="8"] .wv-move[data-at="9"] { transform: var(--wv-from, none); }
.wv-root [data-step="8"] .wv-ghost[data-at="9"] { animation: none; }

/* site additions (scripts/sync-visuals.py) */
[data-wv-steps]:not(.wv-ready) [data-wv-caption] [data-cap]:not(:last-child) { display: none; }
.wv-root > [data-wv-steps] { margin: 1.5rem 0; }
/* share block: the image first, the animation on request */
.wv-share { margin: 1.5rem 0; }
.wv-share .wv-still { display: block; width: 100%; height: auto; margin: 0; border-radius: 6px; }
.wv-share:not(.wv-watching) > [data-wv-steps] { display: none; }
.wv-share.wv-watching > .wv-still { display: none; }
.wv-share > [data-wv-steps] { margin: 0; }
.wv-share .wv-actions { margin: 0.6rem 0 0; }