/* focalshift-mc-frame :: assets/maven-drawer-c/load.css
   WO-MAVEN-DRAWER-C — the loading screen the drawer hands off to. Adapted from the approved
   Narrowing (inc/maven-compile-b.php), which is not modified and not loaded: what this lane
   needed was copied here under its own prefix. Page-scoped — every selector sits under .mvdl.

   KEPT FROM THE APPROVED SCREEN: one viewport and no scrolling at any width; container-query
   units so one geometry composes itself rather than a desktop layout narrow screens survive;
   transform and opacity only, so no beat can reflow; ghost-to-ink is two stacked copies
   cross-fading, never a colour transition; the measured ghost tones (#8f91b7 on white, 3.04:1 ·
   #646a92 on #12131c, 3.54:1); no spinner, no counter, no bar, no percentage, no skeleton;
   reduced motion takes the full instant path.
   CHANGED BY THIS LANE: four reading beats instead of three, because the drawer asks four
   questions; no in-page destination, because the fade lands on the live /maven-tour/; no review
   fence and no play button, because the drawer's own commit is what starts it.
*/

.mvdl{
  --mvdl-paper:#ffffff;
  --mvdl-band:#f2f3fb;
  --mvdl-panel:#ffffff;
  --mvdl-ink:#14172a;
  --mvdl-mute:#525978;
  --mvdl-key:#4a45d6;
  --mvdl-peri:#8b87ff;
  --mvdl-peri-ink:#12132b;
  /* measured 3.04:1 on the paper below — quiet, but genuinely readable */
  --mvdl-ghost:#8f91b7;
  --mvdl-nsc:1.6;
  font-family:var(--fsmcf-font,'Inter',system-ui,-apple-system,sans-serif);
  color:var(--mvdl-ink);
  -webkit-font-smoothing:antialiased;
}
html.fs-dark .mvdl,html[data-theme="dark"] .mvdl{
  --mvdl-paper:#12131c;
  --mvdl-band:#191b28;
  --mvdl-panel:#1d1e2b;
  --mvdl-ink:#eef0fa;
  --mvdl-mute:#a8afc8;
  --mvdl-key:#8b87ff;
  /* measured 3.54:1 on the paper above */
  --mvdl-ghost:#646a92;
}
.mvdl *{box-sizing:border-box}
.mvdl p{margin:0}
.mvdl[hidden]{display:none}

/* visually hidden, still announced */
.mvdl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* =======================================================================
   THE SCREEN. One viewport, no scrolling, at every width. It is fixed from the
   first frame — it arrives over the drawer, and the drawer is what it replaces.
   ======================================================================= */
html.mvdl-lock,html.mvdl-lock body{overflow:hidden!important}
.mvdl-screen{position:fixed;inset:0;z-index:9000;overflow:hidden;background:var(--mvdl-paper);
  display:flex;opacity:1;transition:opacity .7s ease}
.mvdl-screen-in{flex:1;display:flex;flex-direction:column;min-height:0;
  width:min(1120px,100%);margin:0 auto;padding:clamp(18px,3.4vh,44px) clamp(18px,4vw,48px)}

/* ---- the head: who is doing what, the sentence, and Maven's narration ---- */
.mvdl-head{flex:0 0 auto}
.mvdl-kicker{font-size:clamp(12.5px,1.2vw,15px);font-weight:700;letter-spacing:.02em;
  color:var(--mvdl-key);margin-bottom:clamp(8px,1.4vh,16px)}
.mvdl-quote,.mvdl-typed{font-family:var(--fsmcf-font-display,'Sora',system-ui,sans-serif);
  letter-spacing:-.028em;font-size:clamp(15px,2.1vw,28px);line-height:1.22;max-width:34ch;
  font-weight:600;color:var(--mvdl-ink)}
.mvdl-typed[hidden]{display:none}
.mvdl-run{transition:opacity .5s ease}
.mvdl-ph{position:relative;display:inline-block;white-space:nowrap;color:var(--mvdl-key)}
.mvdl-ph-g,.mvdl-ph-i{display:block}
.mvdl-ph-g{opacity:0;color:var(--mvdl-ghost)}
.mvdl-ph-i{position:absolute;inset:0;opacity:1;transition:opacity .5s ease}
.mvdl-ph-rule{position:absolute;left:0;right:0;bottom:-.08em;height:.12em;background:var(--mvdl-peri);
  opacity:.55;transform:scaleX(1);transform-origin:left center;
  transition:transform .5s ease,opacity .5s ease}
.mvdl-note{position:relative;height:clamp(34px,5vh,46px);margin-top:clamp(10px,1.8vh,20px);flex:0 0 auto}
.mvdl-note-line{position:absolute;left:0;top:0;right:0;font-size:clamp(13px,1.35vw,16px);
  line-height:1.4;color:var(--mvdl-mute);opacity:0;transition:opacity .35s ease}
.mvdl-note-line b{color:var(--mvdl-key);font-weight:700}

/* ---- the field: everything Maven can build with, then what is left of it ---- */
.mvdl-field{position:relative;flex:1 1 auto;min-height:0;margin-top:clamp(10px,2vh,22px);
  container-type:size}
.mvdl-label{position:absolute;left:0;font-family:var(--fsmcf-font-display,'Sora',system-ui,sans-serif);
  font-weight:700;font-size:clamp(11.5px,1.1vw,14px);color:var(--mvdl-mute);opacity:1;
  transition:opacity .5s ease}
.mvdl-label--aside{top:67cqh}
.mvdl-label--cull{top:86cqh}

.mvdl-tok{position:absolute;left:0;top:0;width:100%;transform:translate(var(--gx),var(--gy));
  transition:transform .8s cubic-bezier(.22,.72,.24,1),opacity .5s ease}
.mvdl-lead{display:flex;flex-wrap:wrap;align-items:center;gap:8px;opacity:1;margin-bottom:3px;
  transition:opacity .45s ease}
.mvdl-ord{display:inline-block;background:var(--mvdl-peri);color:var(--mvdl-peri-ink);border-radius:5px;
  padding:3px 8px;font-weight:800;font-size:clamp(9.5px,.85vw,11.5px);letter-spacing:.03em;
  text-transform:uppercase}
.mvdl-src{font-size:clamp(11px,1.1vw,14px);line-height:1.35;color:var(--mvdl-mute)}
.mvdl-src q{quotes:'\201C' '\201D';font-weight:700;color:var(--mvdl-key)}
.mvdl-name{position:relative;display:block;width:max-content;max-width:100%;
  font-family:var(--fsmcf-font-display,'Sora',system-ui,sans-serif);font-weight:800;
  letter-spacing:-.03em;font-size:clamp(14px,1.5vw,21px);line-height:1.14;
  transform:scale(1);transform-origin:left center;
  transition:transform .8s cubic-bezier(.22,.72,.24,1)}
.mvdl-nm{display:block;transition:opacity .5s ease}
.mvdl-nm--ghost{opacity:0;color:var(--mvdl-ghost)}
.mvdl-nm--ink{position:absolute;inset:0;opacity:1;color:var(--mvdl-ink)}
.mvdl-tok[data-role="aside"] .mvdl-name{font-size:clamp(12.5px,1.25vw,17px)}

/* =======================================================================
   THE SEQUENCE. Classes are CUMULATIVE and monotonic. Everything below is a
   transform or an opacity; nothing here can reflow, and nothing here can scroll.
   ======================================================================= */
.mvdl.is-js .mvdl-label{opacity:0}
.mvdl.is-js .mvdl-tok{opacity:0;transform:translateY(var(--fy))}
.mvdl.is-js .mvdl-tok .mvdl-name{transform:translateX(var(--fx)) scale(var(--mvdl-nsc))}
.mvdl.is-js .mvdl-tok .mvdl-nm--ghost{opacity:1}
.mvdl.is-js .mvdl-tok .mvdl-nm--ink{opacity:0}
.mvdl.is-js .mvdl-tok .mvdl-lead{opacity:0}
.mvdl.is-js .mvdl-quote,.mvdl.is-js .mvdl-typed,.mvdl.is-js .mvdl-kicker{opacity:0;transition:opacity .48s ease}
/* the field coordinates: three-by-six by default */
.mvdl-tok{--fx:calc(var(--c3) * 33.3cqw);--fy:calc(var(--r3) * 15cqh)}

/* b1 — THE DROP. The drawer and the page the visitor was on fall away. */
.mvdl.is-b1 .mvdl-quote,.mvdl.is-b1 .mvdl-typed,.mvdl.is-b1 .mvdl-kicker{opacity:1}

/* b2 — THE TABLE. Everything, at once, so the visitor sees the size of the question
        before they watch it get answered. */
.mvdl.is-b2 .mvdl-tok{opacity:1}
.mvdl.is-b2 .mvdl-note-line[data-beat="b2"]{opacity:1}

/* b3..b6 — THE READING. One clause per beat: the phrase inks, the tool it asks for inks, and a
        wave whose stated ground that clause has just removed is set down. The table is visibly
        thinner each time. That is the whole progress signal. */
.mvdl.is-js .mvdl-ph .mvdl-ph-i{opacity:0}
.mvdl.is-js .mvdl-ph .mvdl-ph-g{opacity:1}
.mvdl.is-js .mvdl-ph .mvdl-ph-rule{transform:scaleX(0);opacity:0}
.mvdl.is-b3 .mvdl-ph[data-ph="sell"] .mvdl-ph-i,
.mvdl.is-b4 .mvdl-ph[data-ph="reach"] .mvdl-ph-i,
.mvdl.is-b5 .mvdl-ph[data-ph="grow"] .mvdl-ph-i,
.mvdl.is-b6 .mvdl-ph[data-ph="auto"] .mvdl-ph-i{opacity:1}
.mvdl.is-b3 .mvdl-ph[data-ph="sell"] .mvdl-ph-g,
.mvdl.is-b4 .mvdl-ph[data-ph="reach"] .mvdl-ph-g,
.mvdl.is-b5 .mvdl-ph[data-ph="grow"] .mvdl-ph-g,
.mvdl.is-b6 .mvdl-ph[data-ph="auto"] .mvdl-ph-g{opacity:0}
.mvdl.is-b3 .mvdl-ph[data-ph="sell"] .mvdl-ph-rule,
.mvdl.is-b4 .mvdl-ph[data-ph="reach"] .mvdl-ph-rule,
.mvdl.is-b5 .mvdl-ph[data-ph="grow"] .mvdl-ph-rule,
.mvdl.is-b6 .mvdl-ph[data-ph="auto"] .mvdl-ph-rule{transform:scaleX(1);opacity:.55}
.mvdl.is-b3 .mvdl-run{opacity:.36}

.mvdl.is-b3 .mvdl-tok[data-beat="b3"][data-role="keep"] .mvdl-nm--ink,
.mvdl.is-b4 .mvdl-tok[data-beat="b4"][data-role="keep"] .mvdl-nm--ink,
.mvdl.is-b5 .mvdl-tok[data-beat="b5"][data-role="keep"] .mvdl-nm--ink,
.mvdl.is-b6 .mvdl-tok[data-beat="b6"][data-role="keep"] .mvdl-nm--ink,
.mvdl.is-b7 .mvdl-tok[data-beat="b7"][data-role="add"]  .mvdl-nm--ink{opacity:1}
.mvdl.is-b3 .mvdl-tok[data-beat="b3"][data-role="keep"] .mvdl-nm--ghost,
.mvdl.is-b4 .mvdl-tok[data-beat="b4"][data-role="keep"] .mvdl-nm--ghost,
.mvdl.is-b5 .mvdl-tok[data-beat="b5"][data-role="keep"] .mvdl-nm--ghost,
.mvdl.is-b6 .mvdl-tok[data-beat="b6"][data-role="keep"] .mvdl-nm--ghost,
.mvdl.is-b7 .mvdl-tok[data-beat="b7"][data-role="add"]  .mvdl-nm--ghost{opacity:0}
/* set down: it falls a little and goes. It is not deleted from the document. */
.mvdl.is-b3 .mvdl-tok[data-beat="b3"][data-role="cull"],
.mvdl.is-b4 .mvdl-tok[data-beat="b4"][data-role="cull"],
.mvdl.is-b5 .mvdl-tok[data-beat="b5"][data-role="cull"],
.mvdl.is-b6 .mvdl-tok[data-beat="b6"][data-role="cull"]{
  opacity:0;transform:translateY(calc(var(--fy) + 3cqh))}

.mvdl.is-b3 .mvdl-note-line[data-beat="b2"]{opacity:0}
.mvdl.is-b3 .mvdl-note-line[data-beat="b3"]{opacity:1}
.mvdl.is-b4 .mvdl-note-line[data-beat="b3"]{opacity:0}
.mvdl.is-b4 .mvdl-note-line[data-beat="b4"]{opacity:1}
.mvdl.is-b5 .mvdl-note-line[data-beat="b4"]{opacity:0}
.mvdl.is-b5 .mvdl-note-line[data-beat="b5"]{opacity:1}
.mvdl.is-b6 .mvdl-note-line[data-beat="b5"]{opacity:0}
.mvdl.is-b6 .mvdl-note-line[data-beat="b6"]{opacity:1}

/* b7 — THE INFERENCE. Two tools the sentence never named come forward, saying so. */
.mvdl.is-b7 .mvdl-note-line[data-beat="b6"]{opacity:0}
.mvdl.is-b7 .mvdl-note-line[data-beat="b7"]{opacity:1}

/* b8 — KEPT BACK, WITH REASONS. */
.mvdl.is-b8 .mvdl-tok[data-role="aside"]{transform:translateY(var(--gy));opacity:.75}
.mvdl.is-b8 .mvdl-tok[data-role="aside"] .mvdl-name{transform:none}
.mvdl.is-b8 .mvdl-tok[data-role="aside"] .mvdl-nm--ink{opacity:1}
.mvdl.is-b8 .mvdl-tok[data-role="aside"] .mvdl-nm--ghost{opacity:0}
.mvdl.is-b8 .mvdl-tok[data-role="aside"] .mvdl-lead{opacity:1}
.mvdl.is-b8 .mvdl-label--aside{opacity:1}
.mvdl.is-b8 .mvdl-note-line[data-beat="b7"]{opacity:0}
.mvdl.is-b8 .mvdl-note-line[data-beat="b8"]{opacity:1}

/* b9 — THE ORDER. The survivors leave the scattered field and take their rows. */
.mvdl.is-b9 .mvdl-tok[data-role="keep"],
.mvdl.is-b9 .mvdl-tok[data-role="add"]{transform:translateY(var(--gy))}
.mvdl.is-b9 .mvdl-tok[data-role="keep"] .mvdl-name,
.mvdl.is-b9 .mvdl-tok[data-role="add"] .mvdl-name{transform:none}
.mvdl.is-b9 .mvdl-tok[data-role="keep"] .mvdl-lead,
.mvdl.is-b9 .mvdl-tok[data-role="add"] .mvdl-lead{opacity:1}
.mvdl.is-b9 .mvdl-note-line[data-beat="b8"]{opacity:0}
.mvdl.is-b9 .mvdl-note-line[data-beat="b9"]{opacity:1}
.mvdl.is-b9 .mvdl-run{opacity:1}

/* b10 — THE HOLD. One second, finished, saying so. The only even interval in the piece. */
.mvdl.is-b10 .mvdl-note-line[data-beat="b9"]{opacity:0}
.mvdl.is-b10 .mvdl-note-line[data-beat="b10"]{opacity:1}

/* b11 — THE HAND-OFF. The whole screen goes, and the tour is what is behind it. */
.mvdl.is-b11 .mvdl-screen{opacity:0;pointer-events:none}

/* =======================================================================
   NARROW SCREENS. Not a fallback — the same sequence, re-composed. Three columns
   of six become two of nine, and the ghost words step down in scale so the field
   still fits one viewport.
   ======================================================================= */
@media (max-width:820px){
  .mvdl{--mvdl-nsc:1.18}
  .mvdl-tok{--fx:calc(var(--c2) * 50cqw);--fy:calc(var(--r2) * 10cqh)}
}
@media (max-width:520px){
  .mvdl{--mvdl-nsc:1.1}
  .mvdl-quote,.mvdl-typed{max-width:none}
}

/* =======================================================================
   REDUCED MOTION — the full instant path. Same information, no motion at all.
   ======================================================================= */
@media (prefers-reduced-motion: reduce){
  .mvdl *,.mvdl *::before,.mvdl *::after{transition:none!important;animation:none!important}
}
.mvdl.is-snap,.mvdl.is-snap *,.mvdl.is-snap *::before,.mvdl.is-snap *::after{transition:none!important}