/* =====================================================================
   Mission · 02 · ladder — "From the ladder to the table" (styles for g-ladder.js; from the talk's 03)
   The stage SVG carries data-s="0…4"; every state is declared here.
   Graphite is the traditional way (the ladder, the "before" side).
   Amber is the one emphasis (tokenism, then legitimacy).
   At the table every actor wears the Venn's colours.
   ===================================================================== */
.ms-ladder-svg{
  --band:color-mix(in srgb,var(--gold) 15%,var(--ground));
  --top:color-mix(in srgb,var(--gold) 5%,var(--ground));
  overflow:visible;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.ms-ladder-svg text{pointer-events:none}
.ms-ladder-now,.ms-ladder-now *{transition:none!important;animation:none!important}

/* the band: tokenism (s1) → the legitimacy row (s2); then the rails' own fill is the table's top (s3, s4) */
.ms-ladder-band{fill:var(--band);opacity:0;transition:opacity .6s var(--ms-ease)}
.ms-ladder-svg[data-s="1"] .ms-ladder-band,.ms-ladder-svg[data-s="2"] .ms-ladder-band{opacity:1}
.ms-ladder-top{fill:var(--top);opacity:0;transition:opacity .5s var(--ms-ease)}
.ms-ladder-svg[data-s="3"] .ms-ladder-top,.ms-ladder-svg[data-s="4"] .ms-ladder-top{opacity:1;transition:opacity .8s var(--ms-ease) .45s}

/* the rails: drawn bottom-up the first time, then bent into the table's rim */
.ms-ladder-rail{fill:none;stroke:var(--ms-old);stroke-width:3;stroke-linecap:round;stroke-dashoffset:var(--len);
  transition:stroke-dashoffset 1.2s var(--ms-ease-io),stroke .8s var(--ms-ease),stroke-width .8s var(--ms-ease)}
.ms-ladder-svg.is-drawn .ms-ladder-rail{stroke-dashoffset:0}
.ms-ladder-svg[data-s="2"] .ms-ladder-rail{stroke-width:2.5}
.ms-ladder-svg[data-s="3"] .ms-ladder-rail,.ms-ladder-svg[data-s="4"] .ms-ladder-rail{stroke:var(--ink-4);stroke-width:2}

/* the rungs: one by one from the bottom; then lit, dotted, planks */
.ms-ladder-rung{opacity:0;transition:opacity .45s var(--ms-ease)}
.ms-ladder-svg.is-drawn .ms-ladder-rung{opacity:1;transition-delay:calc(var(--k) * 90ms + 300ms)}
.ms-ladder-rung-l{stroke:var(--ms-old);stroke-width:3;stroke-linecap:round;transition:stroke .6s var(--ms-ease),stroke-width .6s var(--ms-ease),opacity .6s var(--ms-ease)}
.ms-ladder-svg[data-s="1"] .ms-ladder-rung[data-g="1"] .ms-ladder-rung-l{stroke:var(--gold);stroke-width:4}
.ms-ladder-svg[data-s="1"] .ms-ladder-rung[data-g="2"] .ms-ladder-rung-l{stroke-dasharray:0 10;stroke-width:4;opacity:.75}
.ms-ladder-svg[data-s="2"] .ms-ladder-rung-l{stroke-width:2.5}
.ms-ladder-svg[data-s="2"] .ms-ladder-rung[data-g="1"] .ms-ladder-rung-l{stroke:var(--gold);stroke-width:3.2}
.ms-ladder-svg[data-s="2"] .ms-ladder-rung[data-g="2"] .ms-ladder-rung-l{stroke-dasharray:0 6.5;stroke-width:3;opacity:.75}
.ms-ladder-svg[data-s="3"] .ms-ladder-rung-l,.ms-ladder-svg[data-s="4"] .ms-ladder-rung-l{stroke:var(--rule-soft);stroke-width:1.5}
.ms-ladder-rung.is-hot .ms-ladder-rung-l{stroke:var(--ink-4);stroke-width:4.5}
.ms-ladder-svg[data-s="1"] .ms-ladder-rung.is-hot[data-g="1"] .ms-ladder-rung-l{stroke:var(--amber);stroke-width:5}
.ms-ladder-svg[data-s="1"] .ms-ladder-rung.is-hot[data-g="2"] .ms-ladder-rung-l{stroke:var(--ink-4);opacity:1}

/* the rungs' names sit on the rung; their knockout breaks the line */
.ms-ladder-rung-lab{opacity:0;transition:opacity .4s var(--ms-ease)}
.ms-ladder-svg.is-drawn[data-s="0"] .ms-ladder-rung-lab,.ms-ladder-svg.is-drawn[data-s="1"] .ms-ladder-rung-lab{opacity:1;transition-delay:calc(var(--k) * 90ms + 300ms)}
.ms-ladder-ko{fill:var(--ground);transition:fill .6s var(--ms-ease)}
.ms-ladder-rung-t{font-family:var(--f-text);font-weight:500;letter-spacing:-.005em;fill:var(--ms-old-ink);transition:fill .5s var(--ms-ease)}
.ms-ladder-svg[data-s="1"] .ms-ladder-rung-lab[data-g="1"] .ms-ladder-ko{fill:var(--band)}
.ms-ladder-svg[data-s="1"] .ms-ladder-rung-lab[data-g="1"] .ms-ladder-rung-t{fill:var(--ink);font-weight:600}
.ms-ladder-svg[data-s="1"] .ms-ladder-rung-lab[data-g="2"] .ms-ladder-rung-t{fill:var(--ms-dim);font-weight:400}
.ms-ladder-rung-lab.is-hot .ms-ladder-rung-t,.ms-ladder-svg[data-s="1"] .ms-ladder-rung-lab.is-hot .ms-ladder-rung-t{fill:var(--ink)}

/* Arnstein's three groups */
.ms-ladder-grp{opacity:0;transition:opacity .45s var(--ms-ease)}
.ms-ladder-svg.is-drawn[data-s="0"] .ms-ladder-grp,.ms-ladder-svg.is-drawn[data-s="1"] .ms-ladder-grp{opacity:1;transition-delay:.5s}
.ms-ladder-grp-t{font-family:var(--f-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;fill:var(--ms-label);transition:fill .5s var(--ms-ease)}
.ms-ladder-brk{fill:none;stroke:var(--ms-old);stroke-width:1.5;transition:stroke .5s var(--ms-ease)}
.ms-ladder-svg[data-s="1"] .ms-ladder-grp[data-g="1"] .ms-ladder-grp-t{fill:var(--amber)}
.ms-ladder-svg[data-s="1"] .ms-ladder-grp[data-g="1"] .ms-ladder-brk{stroke:var(--amber);stroke-width:2}
.ms-ladder-svg[data-s="1"] .ms-ladder-grp[data-g="2"] .ms-ladder-grp-t{fill:var(--ms-dim)}
.ms-ladder-svg[data-s="1"] .ms-ladder-grp[data-g="2"] .ms-ladder-brk{stroke-dasharray:1.5 5}
.ms-ladder-svg[data-hot-g="0"] .ms-ladder-grp[data-g="0"] .ms-ladder-grp-t,
.ms-ladder-svg[data-hot-g="1"] .ms-ladder-grp[data-g="1"] .ms-ladder-grp-t,
.ms-ladder-svg[data-hot-g="2"] .ms-ladder-grp[data-g="2"] .ms-ladder-grp-t{fill:var(--ink)}
.ms-ladder-cap{font-family:var(--f-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;fill:var(--ink-4);opacity:0;transition:opacity .45s var(--ms-ease)}
.ms-ladder-svg.is-drawn[data-s="0"] .ms-ladder-cap,.ms-ladder-svg.is-drawn[data-s="1"] .ms-ladder-cap{opacity:1;transition-delay:.9s}

/* the quotes */
.ms-ladder-q{opacity:0;transform:translateY(10px);transition:opacity .5s var(--ms-ease),transform .7s var(--ms-ease)}
.ms-ladder-svg[data-s="1"] .ms-ladder-q1{opacity:1;transform:none;transition-delay:.45s}
.ms-ladder-svg[data-s="4"] .ms-ladder-q4{opacity:1;transform:none;transition-delay:.9s}
.ms-ladder-q-t{font-family:var(--f-q);font-style:italic;font-weight:400;letter-spacing:-.005em;fill:var(--ink)}
.ms-ladder-q-c{font-family:var(--f-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;fill:var(--ms-label)}
.ms-ladder-q-bar{stroke:var(--amber);stroke-width:2.5}

/* what moves: before (graphite) → after (colour); legitimacy is the one to remember */
.ms-ladder-row{opacity:0;transition:opacity .4s var(--ms-ease)}
.ms-ladder-svg[data-s="2"] .ms-ladder-row{opacity:1}
.ms-ladder-row[data-r="dec"]{--c:var(--ms-stake-ink)}
/* dark: amber is also the stakeholders' hue, so the emphasis takes the Venn centre's light (as on the keynote slide); light: amber */
.ms-ladder-row[data-r="leg"]{--c:var(--venn-core)}
:root .ms-ladder-row[data-r="leg"]{--c:var(--amber)}
.ms-ladder-row[data-r="exp"]{--c:var(--ink)}
.ms-ladder-stop-dec{--lc:var(--ms-stake)}
.ms-ladder-stop-leg{--lc:var(--venn-core)}
:root .ms-ladder-stop-leg{--lc:var(--gold)}
.ms-ladder-stop-exp{--lc:var(--ink-3)}
.ms-ladder-row-lab{font-family:var(--f-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;fill:var(--ms-label);opacity:0;transition:opacity .5s var(--ms-ease)}
.ms-ladder-row.is-em .ms-ladder-row-lab{fill:var(--amber)}
.ms-ladder-row-from{font-family:var(--f-text);font-weight:400;fill:var(--ms-old-ink);opacity:0;transition:opacity .5s var(--ms-ease)}
.ms-ladder-row-to{font-family:var(--f-text);font-weight:500;letter-spacing:-.01em;fill:var(--ms-old-ink);opacity:0;transform:translateX(-10px);
  transition:opacity .5s var(--ms-ease),transform .7s var(--ms-ease),fill .8s var(--ms-ease)}
.ms-ladder-row.is-em .ms-ladder-row-from,.ms-ladder-row.is-em .ms-ladder-row-to{font-family:var(--f-q);font-style:italic;font-weight:400;letter-spacing:-.005em}
.ms-ladder-row-shaft{fill:none;stroke-width:3;stroke-linecap:round;stroke-dashoffset:var(--al);transition:stroke-dashoffset .6s var(--ms-ease)}
.ms-ladder-row-head{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .3s var(--ms-ease)}
.ms-ladder-row.is-em .ms-ladder-row-shaft,.ms-ladder-row.is-em .ms-ladder-row-head{stroke-width:3.5}
.ms-ladder-row-dots circle{opacity:0;transform:scale(.3);transform-box:fill-box;transform-origin:center;transition:opacity .4s var(--ms-ease),transform .5s var(--ms-ease)}
.ms-ladder-row-dots [data-a="stake"]{fill:var(--ms-stake)}
.ms-ladder-row-dots [data-a="inst"]{fill:var(--ms-inst)}
.ms-ladder-row-dots [data-a="plan"]{fill:var(--ink-3)}
.ms-ladder-svg[data-s="2"] .ms-ladder-row-lab,.ms-ladder-svg[data-s="2"] .ms-ladder-row-from{opacity:1;transition-delay:calc(var(--r) * 260ms + 560ms)}
.ms-ladder-svg[data-s="2"] .ms-ladder-row-shaft{stroke-dashoffset:0;transition-delay:calc(var(--r) * 260ms + 830ms)}
.ms-ladder-svg[data-s="2"] .ms-ladder-row-head{opacity:1;transition-delay:calc(var(--r) * 260ms + 1210ms)}
.ms-ladder-svg[data-s="2"] .ms-ladder-row-to{opacity:1;transform:none;fill:var(--c);
  transition-delay:calc(var(--r) * 260ms + 1160ms),calc(var(--r) * 260ms + 1160ms),calc(var(--r) * 260ms + 1610ms)}
.ms-ladder-svg[data-s="2"] .ms-ladder-row-dots circle{opacity:1;transform:none;transition-delay:calc(var(--j) * 110ms + 2200ms)}
.ms-ladder-svg[data-s="2"].has-hot .ms-ladder-row:not(.is-hot){opacity:.32}

/* the table: seats arrive from outside; the fourth chair pulses in */
.ms-ladder-seat{opacity:0;transform:translate(var(--dx),var(--dy));transition:opacity .5s var(--ms-ease),transform .9s var(--ms-ease)}
.ms-ladder-svg[data-s="3"] .ms-ladder-seat:not([data-a="ai"]),.ms-ladder-svg[data-s="4"] .ms-ladder-seat:not([data-a="ai"]){opacity:1;transform:none;transition-delay:calc(var(--i) * 160ms + 700ms)}
/* seat fills: dark uses the Venn's deep washes as they are; light mixes its pastel washes toward white */
.ms-ladder-seat[data-a="stake"]{--sc:var(--ms-stake);--sf:var(--venn-stake);--si:var(--ms-stake-ink)}
.ms-ladder-seat[data-a="inst"]{--sc:var(--ms-inst);--sf:var(--venn-inst);--si:var(--ms-inst-ink)}
.ms-ladder-seat[data-a="plan"]{--sc:var(--ink-4);--sf:var(--field);--si:var(--ink)}
.ms-ladder-seat[data-a="ai"]{--sc:var(--ms-ai);--sf:color-mix(in srgb,var(--venn-ai) 70%,var(--ground));--si:var(--ms-ai-ink)}
:root .ms-ladder-seat[data-a="stake"]{--sf:color-mix(in srgb,var(--venn-stake) 30%,var(--ground))}
:root .ms-ladder-seat[data-a="inst"]{--sf:color-mix(in srgb,var(--venn-inst) 55%,var(--ground))}
:root .ms-ladder-seat[data-a="ai"]{--sf:color-mix(in srgb,var(--venn-ai) 20%,var(--ground))}
.ms-ladder-chair{transform-box:view-box;transform-origin:var(--ox) var(--oy)}
.ms-ladder-back{fill:none;stroke:var(--sc);stroke-width:9;stroke-linecap:round}
.ms-ladder-seat-c{fill:var(--sf);stroke:var(--sc);stroke-width:2;transition:stroke-width .25s var(--ms-ease)}
.ms-ladder-mark{color:var(--si)}
.ms-ladder-seat-n{font-family:var(--f-name);font-weight:var(--w-name);letter-spacing:-.005em;fill:var(--si);transition:opacity .3s var(--ms-ease)}
.ms-ladder-seat-s{font-family:var(--f-q);font-style:italic;font-weight:400;fill:var(--si);transition:opacity .3s var(--ms-ease)}
.ms-ladder-seat[data-a="ai"] .ms-ladder-back{stroke-width:6;stroke-dasharray:0 13}
.ms-ladder-seat[data-a="ai"] .ms-ladder-seat-c{stroke-width:3.5;stroke-dasharray:0 9.4;stroke-linecap:round}
.ms-ladder-seat[data-a="ai"] .ms-ladder-seat-n{font-weight:600}
.ms-ladder-svg[data-s="4"] .ms-ladder-seat[data-a="ai"]{opacity:1;transform:none;transition:opacity .3s var(--ms-ease) .3s}
.ms-ladder-svg[data-s="4"] .ms-ladder-seat[data-a="ai"] .ms-ladder-chair{animation:ms-ladder-in 1.2s var(--ms-ease) .3s both}
.ms-ladder-svg[data-s="4"] .ms-ladder-seat[data-a="ai"] .ms-ladder-seat-n,.ms-ladder-svg[data-s="4"] .ms-ladder-seat[data-a="ai"] .ms-ladder-seat-s{animation:ms-ladder-up .7s var(--ms-ease) .9s both}
@keyframes ms-ladder-in{0%{opacity:0;transform:scale(.5)}55%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}
@keyframes ms-ladder-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* the machine's glow: dark lights it with the sky ring hue, light with the pastel wash */
.ms-ladder-glow-0{stop-color:var(--ms-ai);stop-opacity:.3}
.ms-ladder-glow-1{stop-color:var(--ms-ai);stop-opacity:.1}
.ms-ladder-glow-2{stop-color:var(--ms-ai);stop-opacity:0}
:root .ms-ladder-glow-0{stop-color:var(--venn-ai);stop-opacity:.55}
:root .ms-ladder-glow-1{stop-color:var(--venn-ai);stop-opacity:.18}
:root .ms-ladder-glow-2{stop-color:var(--venn-ai)}
.ms-ladder-glow{opacity:0;transition:opacity .9s var(--ms-ease)}
.ms-ladder-svg[data-s="4"] .ms-ladder-glow{opacity:1;transition-delay:.4s;animation:ms-ladder-breathe 3.6s ease-in-out 2s infinite}
@keyframes ms-ladder-breathe{0%,100%{opacity:1}50%{opacity:.45}}
.ms-ladder-seat.is-hot .ms-ladder-seat-c{stroke-width:3.5}
.ms-ladder-seat[data-a="ai"].is-hot .ms-ladder-seat-c{stroke-width:4.5}
.ms-ladder-svg.has-hot .ms-ladder-seat:not(.is-hot) .ms-ladder-chair,
.ms-ladder-svg.has-hot .ms-ladder-seat:not(.is-hot) .ms-ladder-seat-n,
.ms-ladder-svg.has-hot .ms-ladder-seat:not(.is-hot) .ms-ladder-seat-s{opacity:.4}
.ms-ladder-chair{transition:opacity .3s var(--ms-ease)}

/* hit areas: only what is on stage can be pointed at */
.ms-ladder-hit{fill:transparent;stroke:none;pointer-events:none}
.ms-ladder-hit:focus,.ms-ladder-hit:focus-visible{outline:none}
.ms-ladder-svg.is-drawn[data-s="0"] .ms-ladder-hits .ms-ladder-hit,.ms-ladder-svg.is-drawn[data-s="1"] .ms-ladder-hits .ms-ladder-hit,
.ms-ladder-svg[data-s="2"] .ms-ladder-row .ms-ladder-hit,
.ms-ladder-svg[data-s="3"] .ms-ladder-seat:not([data-a="ai"]) .ms-ladder-hit,.ms-ladder-svg[data-s="4"] .ms-ladder-seat .ms-ladder-hit{pointer-events:all;cursor:default}

/* phones: the same drawing, lighter lines for the smaller stage */
.ms-ladder-svg.is-narrow .ms-ladder-rail{stroke-width:2.4}
.ms-ladder-svg.is-narrow .ms-ladder-rung-l{stroke-width:2.4}
.ms-ladder-svg.is-narrow[data-s="1"] .ms-ladder-rung[data-g="1"] .ms-ladder-rung-l{stroke-width:3.2}
.ms-ladder-svg.is-narrow[data-s="1"] .ms-ladder-rung[data-g="2"] .ms-ladder-rung-l{stroke-dasharray:0 8;stroke-width:3.2}
.ms-ladder-svg.is-narrow[data-s="2"] .ms-ladder-rail,.ms-ladder-svg.is-narrow[data-s="2"] .ms-ladder-rung-l{stroke-width:1.8}
.ms-ladder-svg.is-narrow[data-s="2"] .ms-ladder-rung[data-g="1"] .ms-ladder-rung-l{stroke-width:2.4}
.ms-ladder-svg.is-narrow[data-s="2"] .ms-ladder-rung[data-g="2"] .ms-ladder-rung-l{stroke-dasharray:0 5;stroke-width:2.2}
.ms-ladder-svg.is-narrow[data-s="3"] .ms-ladder-rail,.ms-ladder-svg.is-narrow[data-s="4"] .ms-ladder-rail{stroke-width:1.6}
.ms-ladder-svg.is-narrow[data-s="3"] .ms-ladder-rung-l,.ms-ladder-svg.is-narrow[data-s="4"] .ms-ladder-rung-l{stroke-width:1.1}
.ms-ladder-svg.is-narrow .ms-ladder-row-shaft,.ms-ladder-svg.is-narrow .ms-ladder-row-head{stroke-width:2.2}
.ms-ladder-svg.is-narrow .ms-ladder-back{stroke-width:5.5}
.ms-ladder-svg.is-narrow .ms-ladder-seat-c{stroke-width:1.5}
.ms-ladder-svg.is-narrow .ms-ladder-seat[data-a="ai"] .ms-ladder-back{stroke-width:4;stroke-dasharray:0 8}
.ms-ladder-svg.is-narrow .ms-ladder-seat[data-a="ai"] .ms-ladder-seat-c{stroke-width:2.6;stroke-dasharray:0 6.2}
.ms-ladder-svg.is-narrow .ms-ladder-q-bar{stroke-width:2}

/* the hover card: the moves' verbatim sources */
.ms-tip .ms-ladder-tip-q{display:block;font-family:var(--f-q);font-style:italic;font-size:15.5px;line-height:1.35;color:var(--ink)}
.ms-tip .ms-ladder-tip-q + .ms-ladder-tip-q{margin-top:6px}

/* the steps */
.ms-ladder-next{padding-top:14px;border-top:1px solid var(--rule-soft)}
.ms-ladder-next b{font-weight:500}
.ms-ladder-src{padding-top:clamp(28px,4vw,48px)}

/* static mode and reduced motion: no motion; each step carries a still of its own state */
.ms-static .ms-ladder-svg *,.ms-static .ms-ladder-svg{transition:none!important;animation:none!important}
.ms-static #collaboration .ms-scrolly__stage{display:none}
.ms-ladder-snapfig{display:none}
.ms-static .ms-ladder-snapfig{display:block;max-width:640px;margin-top:22px;padding:8px 0 18px;border-bottom:1px solid var(--rule-soft)}
.ms-static .ms-ladder-snapfig .ms-ladder-svg{width:100%;height:auto;max-width:none}
.ms-static #collaboration .ms-step{padding:28px 0}
@media print{
  .ms-ladder-svg *{transition:none!important;animation:none!important}
  #collaboration .ms-scrolly__stage{display:none}
  .ms-ladder-snapfig{display:block;max-width:520px;margin-top:14px;break-inside:avoid}
  .ms-ladder-snapfig .ms-ladder-svg{width:100%;height:auto}
  #collaboration .ms-step,.ms-ladder-src{break-inside:avoid}
}