/* =====================================================================
   Mission · 06 and 07 · the participant app; building the mandate (from the talk's 09b and 10)
   ms-mandate-app    the participant app on a phone, one screen per step
   ms-mandate-four   four institutions: institution → what had to be built → what was built
   Every class is prefixed .ms-mandate-. Tokens only (the app's own palette is mixed from them); no font declarations.
   ===================================================================== */

/* the phone sequence reads faster than a full-height step each */
@media (min-width:901px){
  :root:not(.ms-static):not(.ms-at) .ms-mandate-scrolly--app .ms-step{min-height:66vh}
  :root:not(.ms-static):not(.ms-at) .ms-mandate-scrolly--app .ms-step:first-child{min-height:56vh}
  :root:not(.ms-static):not(.ms-at) .ms-mandate-scrolly--app .ms-step:last-child{min-height:82vh}
  /* room between the chapter head and step 01, so at that stop the head has cleared the header instead of straddling it */
  :root:not(.ms-static):not(.ms-at) .ms-mandate-scrolly--app .ms-scrolly__steps{padding-top:calc(6vh + 90px)}
}
.ms-mandate-scrolly .ms-step .no{text-transform:uppercase}
.ms-mandate-scrolly .ms-step .ms-fine{max-width:34em}
.ms-mandate-scrolly .ms-step .ms-fine a{color:inherit}

/* ---------------------------------------------------------------------
   1 · The participant app
   --------------------------------------------------------------------- */
.ms-mandate-app{--app-ink:var(--ink);--app-mute:var(--ink-4);--app-eye:color-mix(in srgb,var(--ink-4) 85%,var(--ground));--app-2:var(--ink-3);
  --app-accent:color-mix(in oklab,var(--p-propose) 62%,var(--qc-shape));--app-blue:color-mix(in oklab,var(--p-defined) 55%,var(--qi-improve));
  --app-hair:color-mix(in srgb,var(--ink) 13%,var(--ground));--app-soft:color-mix(in srgb,var(--ink-4) 24%,var(--ground));
  --app-gain:var(--venn-ink-sa);--app-gain-2:color-mix(in oklab,var(--venn-ink-sa) 78%,var(--ground));
  --app-loss:var(--qi-imagine);--app-loss-2:color-mix(in oklab,var(--qi-imagine) 78%,var(--ground));
  display:flex;align-items:center;justify-content:center;gap:clamp(24px,3.2vw,52px);min-height:0}
.ms-mandate-app__phone{flex:none;height:min(700px,calc(100vh - var(--header-h) - 150px));aspect-ratio:390/788;
  filter:drop-shadow(0 28px 36px var(--ms-shadow)) drop-shadow(0 4px 10px color-mix(in srgb,var(--ms-shadow) 50%,transparent))}
.ms-mandate-app__svg{display:block;width:100%;height:100%;overflow:visible}
.ms-mandate-app__body{fill:var(--ink)}
.ms-mandate-app__rim{fill:none;stroke:color-mix(in srgb,var(--ink) 80%,var(--ground));stroke-width:1.5}
.ms-mandate-app__key{fill:color-mix(in srgb,var(--ink) 92%,var(--ground))}
.ms-mandate-app__screen-bg{fill:var(--field)}
.ms-mandate-app__island{fill:var(--ink)}
.ms-mandate-app__status{opacity:0;transition:opacity .4s ease}
.ms-mandate-app__status.is-on{opacity:1}
.ms-mandate-app__status text{font-family:var(--f-text);font-weight:600;font-size:12.5px;fill:var(--app-ink)}
.ms-mandate-app__status .ms-mandate-g{fill:var(--app-ink)}
.ms-mandate-app__status .ms-mandate-g-o{fill:none;stroke:var(--app-ink);stroke-width:1.1}

/* screens cross-fade and drift; the one in hand is .is-on */
.ms-mandate-scr{opacity:0;transform:translateX(16px);transition:opacity .5s var(--ms-ease),transform .7s var(--ms-ease)}
.ms-mandate-scr.is-past{transform:translateX(-16px)}
.ms-mandate-scr.is-on{opacity:1;transform:none}

/* the app's own palette, sampled from its welcome screen */
.ms-mandate-ui-eye{font-family:var(--f-label);font-weight:500;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;fill:var(--app-eye)}
.ms-mandate-ui-q{font-family:var(--f-text);font-weight:600;font-size:17px;letter-spacing:-.01em;fill:var(--app-ink)}
.ms-mandate-ui-h{font-family:var(--f-text);font-weight:700;font-size:25px;letter-spacing:-.02em;fill:var(--app-ink)}
.ms-mandate-ui-in{font-family:var(--f-text);font-weight:500;font-size:16px;fill:var(--app-ink)}
.ms-mandate-ui-words{font-family:var(--f-text);font-weight:500;font-size:19px;letter-spacing:-.01em;fill:var(--app-ink)}
.ms-mandate-ui-txt{font-family:var(--f-text);font-size:12.5px;fill:var(--app-mute)}
.ms-mandate-ui-btn{font-family:var(--f-text);font-weight:600;font-size:15px;fill:var(--ground)}
.ms-mandate-ui-btn--o{fill:var(--app-ink)}
.ms-mandate-ui-chip{font-family:var(--f-text);font-weight:500;font-size:12.5px;fill:var(--app-2)}
.ms-mandate-ui-chip.is-on{fill:var(--ground)}
.ms-mandate-ui-live{font-family:var(--f-text);font-weight:600;font-size:11.5px;letter-spacing:.02em;fill:var(--app-accent)}
.ms-mandate-ui-qmark{font-family:var(--f-q);font-size:54px;fill:var(--app-accent)}
.ms-mandate-ui-card{fill:var(--ground);stroke:var(--app-hair);stroke-width:1}
.ms-mandate-ui-rust{fill:var(--app-accent)}
.ms-mandate-ui-blue{fill:var(--app-blue)}
.ms-mandate-ui-line{fill:var(--ground);stroke:var(--app-hair);stroke-width:1}
.ms-mandate-ui-home{fill:color-mix(in srgb,var(--ink-4) 42%,var(--ground))}
.ms-mandate-ui-ghost{fill:none;stroke:var(--app-soft);stroke-width:1.2;stroke-dasharray:5 5}
.ms-mandate-ui-table{fill:var(--field-2);stroke:var(--app-hair);stroke-width:1}
.ms-mandate-ui-tick{fill:none;stroke:var(--app-gain);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ms-mandate-ui-glyph{fill:none;stroke:var(--app-mute);stroke-width:1.4}
.ms-mandate-ui-white{fill:var(--ground)}
.ms-mandate-ui-back{fill:var(--field-2)}
.ms-mandate-ui-x{fill:none;stroke:var(--app-2);stroke-width:2.4;stroke-linecap:round}
.ms-mandate-ui-dot{fill:var(--app-soft)}.ms-mandate-ui-dot.is-on{fill:var(--app-ink)}
.ms-mandate-ui-h2{font-family:var(--f-text);font-weight:700;font-size:16px;letter-spacing:-.01em;fill:var(--app-ink)}
.ms-mandate-ui-it{font-family:var(--f-text);font-weight:600;font-size:13.5px}
.ms-mandate-ui-it--gain,.ms-mandate-ui-eye--gain{fill:var(--app-gain)}
.ms-mandate-ui-it--loss,.ms-mandate-ui-eye--loss{fill:var(--app-loss)}
.ms-mandate-ui-gain{fill:var(--app-gain-2)}.ms-mandate-ui-loss{fill:var(--app-loss-2)}
.ms-mandate-ui-small{font-family:var(--f-text);font-size:12px;fill:var(--app-2)}

/* 02 · the caret blinks while the words type in */
.ms-mandate-caret{fill:var(--app-blue);animation:ms-mandate-blink 1.05s steps(1) infinite}
@keyframes ms-mandate-blink{50%{opacity:0}}
/* 03 · the light that runs across while the picture is made */
.ms-mandate-sweep{opacity:0;transition:opacity .25s ease}
/* 04 · six seats light up, one after another; markers land on the picture */
.ms-mandate-seat circle{fill:var(--ground);stroke:var(--app-hair);stroke-width:1.2;transition:fill .45s ease,stroke .45s ease}
.ms-mandate-seat text{font-family:var(--f-text);font-weight:600;font-size:13px;fill:var(--app-soft);transition:fill .45s ease}
.ms-mandate-scr.is-on .ms-mandate-seat circle{fill:var(--venn-stake);stroke:var(--venn-stake-ring)}
.ms-mandate-scr.is-on .ms-mandate-seat text{fill:var(--venn-ink-s)}
.ms-mandate-mark{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.ms-mandate-mark circle{fill:var(--venn-stake-ring);stroke:var(--ground);stroke-width:2.5}
.ms-mandate-scr.is-on .ms-mandate-mark{transform:none}
.ms-mandate-live-ring{fill:none;stroke:var(--app-accent);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:ms-mandate-ping 1.8s var(--ms-ease) infinite}
@keyframes ms-mandate-ping{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(2.6);opacity:0}}
/* 05 · the top picture is voted and swiped away */
.ms-mandate-card1{transform-box:fill-box;transform-origin:50% 100%;transition:transform .8s var(--ms-ease) .75s,opacity .5s ease 1s}
.ms-mandate-scr.is-on .ms-mandate-card1{transform:translate(250px,-6px) rotate(14deg);opacity:0}
.ms-mandate-vote{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4);transition:opacity .3s ease .35s,transform .45s cubic-bezier(.3,1.5,.5,1) .35s}
.ms-mandate-scr.is-on .ms-mandate-vote{opacity:1;transform:none}
.ms-mandate-heart-btn{transform-box:fill-box;transform-origin:center;transition:transform .35s cubic-bezier(.3,1.6,.5,1) .3s}
.ms-mandate-scr.is-on .ms-mandate-heart-btn{transform:scale(1.08)}
/* 06 · kept: the words settle under the picture */
.ms-mandate-words{opacity:0;transform:translateY(22px);transition:opacity .55s var(--ms-ease) .35s,transform .7s var(--ms-ease) .35s}
.ms-mandate-scr.is-on .ms-mandate-words{opacity:1;transform:none}
.ms-mandate-kept{opacity:0;transform-box:fill-box;transform-origin:left center;transform:scale(.6);transition:opacity .35s ease .2s,transform .5s cubic-bezier(.3,1.5,.5,1) .2s}
.ms-mandate-scr.is-on .ms-mandate-kept{opacity:1;transform:none}
/* 07 · your places slide in */
.ms-mandate-place{opacity:0;transform:translateY(26px);transition:opacity .5s var(--ms-ease),transform .7s var(--ms-ease)}
.ms-mandate-scr.is-on .ms-mandate-place{opacity:1;transform:none}
/* 08 · the impact evaluation arrives item by item, before the vote */
.ms-mandate-imp{opacity:0;transform:translateY(14px);transition:opacity .5s var(--ms-ease),transform .6s var(--ms-ease)}
.ms-mandate-scr.is-on .ms-mandate-imp{opacity:1;transform:none}
/* leaving a screen: hold its finished state until it has faded out, then reset unseen */
.ms-mandate-scr:not(.is-on) .ms-mandate-seat circle,.ms-mandate-scr:not(.is-on) .ms-mandate-seat text,.ms-mandate-scr:not(.is-on) .ms-mandate-mark,
.ms-mandate-scr:not(.is-on) .ms-mandate-card1,.ms-mandate-scr:not(.is-on) .ms-mandate-vote,.ms-mandate-scr:not(.is-on) .ms-mandate-heart-btn,
.ms-mandate-scr:not(.is-on) .ms-mandate-words,.ms-mandate-scr:not(.is-on) .ms-mandate-kept,.ms-mandate-scr:not(.is-on) .ms-mandate-place,.ms-mandate-scr:not(.is-on) .ms-mandate-imp{transition:all 0s linear .6s}

/* the steps beside the phone */
.ms-mandate-app__rail{list-style:none;display:grid;gap:2px;width:min(290px,42%);position:relative;padding-left:12px}
.ms-mandate-app__rail::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--field-2)}
.ms-mandate-app__rail::after{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--ms-stake);transform-origin:top;transform:scaleY(var(--p,0));transition:transform .6s var(--ms-ease)}
.ms-mandate-app__item{display:grid;grid-template-columns:30px minmax(0,1fr);align-items:baseline;gap:8px;width:100%;padding:9px 12px 10px;border:0;border-radius:12px;background:transparent;text-align:left;cursor:pointer;color:var(--ms-dim);transition:background-color .3s ease,color .3s ease}
.ms-mandate-app__item:hover{background:var(--field)}
.ms-mandate-app__n{font:700 11.5px/1 var(--f-label);letter-spacing:.1em;font-variant-numeric:tabular-nums}
.ms-mandate-app__t{font:600 18px/1.22 var(--f-name);letter-spacing:0}
.ms-mandate-app__item.is-done{color:var(--ink-3)}
.ms-mandate-app__item.is-now{color:var(--ink);background:color-mix(in srgb,var(--venn-stake) 85%,transparent)}
:root .ms-mandate-app__item.is-now{background:color-mix(in srgb,var(--venn-stake) 22%,transparent)}
.ms-mandate-app__item.is-now .ms-mandate-app__n{color:var(--ms-stake-ink)}
.ms-mandate-app__cap{margin-top:18px;text-align:center}
.ms-mandate-app.is-final .ms-mandate-app__item{color:var(--ink-2)}

/* ---------------------------------------------------------------------
   2 · Four institutions: step 0 empty slots, step 1 all four build, one after another
   (per-column delays come from JS as --d1…--d5, so Safari needs no calc() on times)
   --------------------------------------------------------------------- */
.ms-mandate-four{display:grid;grid-template-columns:clamp(78px,8.5%,104px) repeat(4,minmax(0,1fr));grid-template-rows:auto 30px auto 30px auto;column-gap:clamp(10px,1.1vw,16px);width:100%}
.ms-mandate-four__labs{grid-column:1;grid-row:1/-1;display:grid;grid-template-rows:subgrid}
.ms-mandate-four__rl{align-self:start;padding-top:14px;font:700 10.5px/1.35 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ms-label)}
.ms-mandate-four__col{grid-row:1/-1;display:grid;grid-template-rows:subgrid;min-width:0}
.ms-mandate-four__col[data-k="0"]{grid-column:2}.ms-mandate-four__col[data-k="1"]{grid-column:3}.ms-mandate-four__col[data-k="2"]{grid-column:4}.ms-mandate-four__col[data-k="3"]{grid-column:5}

.ms-mandate-four__head{position:relative;padding:13px 14px 14px;border-radius:14px;cursor:default;outline:none;
  background:linear-gradient(180deg,var(--venn-inst),color-mix(in srgb,var(--venn-inst) 55%,var(--ms-card)));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ms-inst) 45%,transparent);transition:box-shadow .35s ease}
:root .ms-mandate-four__head{background:linear-gradient(180deg,color-mix(in srgb,var(--venn-inst) 78%,transparent),color-mix(in srgb,var(--venn-inst) 34%,transparent));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--venn-inst-ring) 42%,transparent)}
:root .ms-mandate-four.is-built .ms-mandate-four__head{box-shadow:inset 0 0 0 1.5px var(--ms-inst)}
.ms-mandate-four__c{font:700 11px/1.3 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ms-inst-ink)}
.ms-mandate-four__n{margin-top:6px;font:600 clamp(18px,1.45vw,21px)/1.12 var(--f-name);letter-spacing:0;color:var(--ink);text-wrap:balance}
.ms-mandate-four__m{margin-top:7px;font-size:12.5px;line-height:1.35;color:var(--ink-4)}
.ms-mandate-four.is-built .ms-mandate-four__head{box-shadow:inset 0 0 0 1.5px var(--ms-inst);transition-delay:var(--d1,0s)}
.ms-mandate-four__head:focus-visible,.ms-mandate-four__gap:focus-visible,.ms-mandate-four__built:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.ms-mandate-four__link{position:relative}
.ms-mandate-four__link::before{content:"";position:absolute;left:50%;top:4px;bottom:9px;width:1.5px;margin-left:-.75px;background:var(--ms-inst);transform-origin:top;transform:scaleY(0);transition:transform .45s var(--ms-ease)}
.ms-mandate-four__link::after{content:"";position:absolute;left:50%;bottom:3px;margin-left:-4px;border:4px solid transparent;border-top:6px solid var(--ms-inst);border-bottom:0;opacity:0;transition:opacity .25s ease}
.ms-mandate-four.is-built .ms-mandate-four__link::before{transform:none;transition-delay:var(--d1,0s)}
.ms-mandate-four.is-built .ms-mandate-four__link::after{opacity:1;transition-delay:var(--d2,0s)}
.ms-mandate-four.is-built .ms-mandate-four__link:nth-child(4)::before{transition-delay:var(--d3,0s)}
.ms-mandate-four.is-built .ms-mandate-four__link:nth-child(4)::after{transition-delay:var(--d4,0s)}

.ms-mandate-four__gap{padding:11px 13px 12px;border-radius:12px;border:1.5px dashed color-mix(in srgb,var(--ink) 18%,transparent);cursor:default;outline:none;transition:border-color .4s ease}
.ms-mandate-four__gap p:last-child{font-size:15px;line-height:1.38;color:var(--ink-2);opacity:0;transform:translateY(6px);transition:opacity .45s var(--ms-ease),transform .55s var(--ms-ease)}
.ms-mandate-four.is-built .ms-mandate-four__gap{border-color:color-mix(in srgb,var(--ink) 34%,transparent)}
.ms-mandate-four.is-built .ms-mandate-four__gap p:last-child{opacity:1;transform:none;transition-delay:var(--d2,0s)}
.ms-mandate-four__tag{display:none;font:700 10px/1.3 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--ms-label);margin-bottom:4px}

.ms-mandate-four__built{padding:11px 13px 12px;border-radius:12px;background:var(--ms-card,var(--ground));box-shadow:inset 0 0 0 1.5px var(--ms-inst);cursor:default;outline:none;
  opacity:0;transform:translateY(10px);transition:opacity .5s var(--ms-ease),transform .6s var(--ms-ease)}
.ms-mandate-four__b{font-size:15px;line-height:1.38;color:var(--ink)}
.ms-mandate-four.is-built .ms-mandate-four__built{opacity:1;transform:none;transition-delay:var(--d4,0s)}

.ms-mandate-four__pics{margin:8px 0 0;min-width:0;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ms-ease),transform .6s var(--ms-ease)}
.ms-mandate-four.is-built .ms-mandate-four__pics{opacity:1;transform:none;transition-delay:var(--d5,0s)}
.ms-mandate-four__box{display:block;height:clamp(170px,27vh,270px);border-radius:10px;overflow:hidden;background:var(--field)}
.ms-mandate-four__box img{display:block;width:100%;height:100%;object-fit:cover}
.ms-mandate-four__box--post{padding:6px;background:var(--ms-card,var(--field));box-shadow:inset 0 0 0 1px var(--rule-soft)}
.ms-mandate-four__box--post img{object-fit:contain;border-radius:4px}
.ms-mandate-four__box:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ms-mandate-four__cap-i{margin-top:7px;font:700 9.5px/1.4 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--ms-label)}
.ms-mandate-four__cap{margin-top:16px}
.ms-mandate-four:not(.is-built) *{transition-delay:0s!important}

/* the hover card's dates */
.ms-tip .ms-mandate-tipb{display:block;font-size:13.5px;line-height:1.35;color:var(--ink)}
.ms-tip .ms-mandate-tipd{display:grid;gap:5px;margin-top:6px}
.ms-tip .ms-mandate-tipd span{display:block;font-size:13.5px;line-height:1.35;color:var(--ink-2)}
.ms-tip .ms-mandate-tipd i{display:block;font:700 10.5px/1.3 var(--f-label);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}

/* ---------------------------------------------------------------------
   The rule and the sources line
   --------------------------------------------------------------------- */
.ms-mandate-credits{max-width:58em;padding-bottom:8px}

/* ---------------------------------------------------------------------
   Phone width: the stage is 52vh on top, the steps scroll under it
   --------------------------------------------------------------------- */
@media (max-width:900px){
  .ms-mandate-app{gap:14px;height:100%}
  .ms-mandate-app__phone{height:calc(100% - 8px);max-height:calc(52vh - 24px)}
  .ms-mandate-app__rail{width:auto;flex:0 1 150px;padding-left:9px}
  .ms-mandate-app__item{grid-template-columns:22px minmax(0,1fr);gap:5px;padding:6px 6px 7px;border-radius:9px}
  .ms-mandate-app__n{font-size:10.5px}
  .ms-mandate-app__t{font:500 12.5px/1.25 var(--f-text);letter-spacing:0}
  .ms-mandate-app__cap{display:none}

  /* four institutions: a 2 × 2 of name and what was built (what had to be built is in the tap card) */
  .ms-mandate-four{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;gap:10px 8px}
  .ms-mandate-four__labs,.ms-mandate-four__link,.ms-mandate-four__gap,.ms-mandate-four__cap{display:none}
  .ms-mandate-four__col{grid-column:auto!important;grid-row:auto;display:grid;grid-template-rows:none;align-content:start;gap:6px}
  .ms-mandate-four__head{padding:8px 10px 9px;border-radius:10px}
  .ms-mandate-four__c{font-size:10px}
  .ms-mandate-four__n{font-size:15px;margin-top:3px}
  .ms-mandate-four__m{display:none}
  .ms-mandate-four__built{padding:8px 10px 9px;border-radius:10px}
  .ms-mandate-four__b{font-size:13px;line-height:1.32}
}

/* ---------------------------------------------------------------------
   Static (?static=1, reduced motion) and print: finished states
   --------------------------------------------------------------------- */
.ms-static .ms-mandate-app__phone{height:min(640px,78vh)}
@media (max-width:900px){
  .ms-static .ms-mandate-app{flex-direction:column;height:auto}
  .ms-static .ms-mandate-app__phone{height:min(520px,70vh);max-height:none}
  .ms-static .ms-mandate-app__rail{flex:none;width:100%}
}