/* Mission · 05 · the engagement framework, simplest (g-framework.js): the live Mission's .fw, built step by step.
   Two tapered rails (open → defined, respond → propose), four capsules, four plates in the quadrant tints. */
.ms-fw{--rail:10px;position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto auto;gap:14px;width:100%;max-width:820px;margin-inline:auto}
.ms-fw::before{content:"";grid-column:2;grid-row:1 / 4;justify-self:center;width:var(--rail);
  background:linear-gradient(to bottom,transparent,color-mix(in oklab,var(--p-open) 72%,var(--amber)) 7%,var(--field-2) 50%,var(--p-defined) 93%,transparent);
  clip-path:polygon(0 0,100% 0,58% 50%,100% 100%,0 100%,42% 50%);transform-origin:50% 0;transition:transform 1s var(--ms-ease)}
.ms-fw::after{content:"";grid-column:1 / 4;grid-row:2;align-self:center;height:var(--rail);
  background:linear-gradient(to right,transparent,var(--p-respond) 7%,var(--field-2) 50%,var(--p-propose) 93%,transparent);
  clip-path:polygon(0 0,50% 42%,100% 0,100% 100%,50% 58%,0 100%);transform-origin:0 50%;transition:transform 1s var(--ms-ease) .25s}
.ms-fw > *{position:relative;z-index:1}
.ms-fw__c{display:flex;align-items:center;justify-content:center;margin:0;transition:opacity .6s var(--ms-ease) .5s}
.ms-fw__c--t{grid-column:2;grid-row:1}
.ms-fw__c--b{grid-column:2;grid-row:3}
.ms-fw__c--l{grid-column:1;grid-row:2}
.ms-fw__c--r{grid-column:3;grid-row:2}
.ms-fw__c .cap{box-shadow:0 0 0 5px var(--ground)}
.ms-fw__c--l .cap,.ms-fw__c--r .cap{writing-mode:vertical-rl;padding:12px 6px 12px 5px}
.ms-fw__c--l .cap{transform:rotate(180deg)}
.ms-fw__c--t .cap--open{box-shadow:0 0 0 5px var(--ground),inset 0 0 0 1px color-mix(in oklab,var(--p-open) 70%,var(--amber))}
.ms-fw__q{grid-column:2;grid-row:2;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:18px}
.ms-fw__t{display:flex;flex-direction:column;min-height:clamp(170px,18vh,240px);background:var(--ground);outline:none;cursor:default;
  transition:opacity .6s var(--ms-ease),transform .7s var(--ms-ease),box-shadow .3s}
.ms-fw__t--b{justify-content:flex-end}
.ms-fw__t .name{color:var(--qi,var(--ink));font-size:clamp(21px,1.7vw,26px)}
.ms-fw__t .q{margin-top:6px;max-width:15em;font-size:clamp(17px,1.3vw,19.5px)}
.ms-fw__dec{margin-top:12px;font-size:calc(var(--fs-text) - 2.5px);line-height:1.45;color:var(--ink-3);max-width:22em}
.ms-fw__dec .lab{display:block;margin-bottom:2px;font-size:10.5px}
.ms-fw__t.is-hot,.ms-fw__t:focus-visible{box-shadow:inset 0 0 0 1.5px var(--qi,var(--ink))}

/* the steps: rails first, then one task at a time; the newest one carries a fine ring */
.ms-fw[data-s="0"]::before{transform:scaleY(.0001)}
.ms-fw[data-s="0"]::after{transform:scaleX(.0001)}
.ms-js .ms-fw[data-s="0"] .ms-fw__c{opacity:0}
.ms-fw__t:not(.is-on){opacity:.5;transform:scale(.97)}
.ms-fw__t:not(.is-on)::before{opacity:0}
.ms-fw__t:not(.is-on){box-shadow:inset 0 0 0 1px var(--rule)}
.ms-fw__t:not(.is-on) > *{visibility:hidden}
.ms-fw__t.is-now{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--qi,var(--ink)) 60%,transparent)}
.ms-fw[data-s="0"] .ms-fw__t:not(.is-on){opacity:.85}

@media (max-width:640px){
  .ms-fw{gap:8px;--rail:7px}
  .ms-fw__q{gap:8px}
  .ms-fw__t{min-height:0;padding:12px 11px 13px}
  .ms-fw__t .name{font-size:16.5px;line-height:1.15}
  .ms-fw__t .q{font-size:14.5px;line-height:1.3}
  .ms-fw__dec{display:none}
  .ms-fw__c .cap{font-size:9.5px;letter-spacing:.1em}
  .ms-fw__c--t .cap,.ms-fw__c--b .cap{padding:6px 10px 5px}
  .ms-fw__c--l .cap,.ms-fw__c--r .cap{padding:10px 5px 10px 4px}
}
.ms-static .ms-fw *,.ms-static .ms-fw::before,.ms-static .ms-fw::after{transition:none!important}