/* The workflow film: four chapters that play one after another.
   Every scene is CSS-driven and keyed off .on, so a chapter replays
   from the top each time it is selected. Mobile-first. */

/* ---- pinned track: scrolling steps through the chapters ---- */
.film-sec{position:relative}
.film-track{height:480vh}
.film-pin{position:sticky;top:0;height:100svh;overflow:hidden}
.film-in{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:clamp(.75rem,2vw,1.25rem);
  height:100%;padding-block:calc(64px + 1rem) clamp(1.25rem,3vw,2.5rem)}
@media (min-width:820px){.film-in{padding-block:calc(72px + 1.5rem) clamp(1.5rem,3vw,2.5rem)}}
.film-in .sec-head{margin-bottom:0}
@media (max-height:820px){
  .film-in .sec-head p{display:none}
  .film-in{padding-block:calc(56px + .5rem) 1rem;gap:.7rem}
  .film-in .sec-head h2{font-size:clamp(1.5rem,1rem + 2vw,2.125rem)}
  .fr{padding:.5rem .7rem .45rem}
  .fr .n{display:none}
  .fscene{padding:clamp(.85rem,2.5vw,1.25rem)}
  .sc-n{padding:.55rem .7rem}
  .sc-n .ic{width:24px;height:24px}
  .sc-n small{font-size:var(--t-mono)}
  .sc-w{height:12px}
  .sc-split{height:14px}
  .sc-split::before,.sc-split i{height:7px}
  .sc-split::after{top:7px}
  .sc-split i{top:7px}
  .sc-audit{margin-top:.5rem}
  .fs-cap{padding-top:.6rem}
}
@media (max-height:640px){
  .film-in{padding-block:calc(52px + .35rem) .6rem;gap:.5rem}
  .film-in .sec-head .eyebrow{display:none}
  .film-in .sec-head h2{font-size:1.375rem}
  .fr{padding:.4rem .6rem .35rem}
  .fr .t{font-size:var(--fs-xs)}
  .fscene{padding:.7rem}
  .sc-n{padding:.45rem .6rem;gap:.45rem}
  .sc-n .ic{width:20px;height:20px}
  .sc-n .ic svg{width:11px;height:11px}
  .sc-n b{font-size:var(--t-sm)}
  .sc-n small{font-size:var(--t-mono)}
  .sc-w{height:9px}
  .sc-split{height:11px}
  .sc-split::before,.sc-split i{height:5px}
  .sc-split::after,.sc-split i{top:5px}
  .sc-audit{margin-top:.35rem;padding:.25rem .5rem;font-size:var(--t-mono)}
  .fs-cap{padding-top:.4rem;font-size:var(--t-sm);line-height:1.35}
}

/* ---- chapter rail ---- */
/* padding-top leaves room for the hover lift, which overflow-x would clip */
.film-rail{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding:4px 0 .35rem;margin-top:-4px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.film-rail::-webkit-scrollbar{display:none}
.fr{flex:1 0 auto;min-width:11rem;scroll-snap-align:start;text-align:left;background:var(--bg-surface);
  border:1px solid var(--border-1);border-radius:var(--r-lg);padding:.7rem .85rem .55rem;cursor:pointer;
  display:flex;flex-direction:column;gap:.15rem;position:relative;overflow:hidden;
  transition:border-color var(--t-base),box-shadow var(--t-base),transform var(--t-base)}
.fr .n{font-family:var(--font-mono);font-size:.625rem;letter-spacing:.14em;color:var(--fg-4)}
.fr .t{font-size:.875rem;font-weight:var(--fw-bold);color:var(--fg-3);line-height:1.2;
  transition:color var(--t-base)}
.fr .bar{display:block;height:2px;border-radius:2px;background:var(--border-2);margin-top:.5rem;overflow:hidden}
.fr .bar i{display:block;height:100%;width:0;background:var(--coral);border-radius:2px}
.fr[aria-selected="true"]{border-color:var(--fg-1);box-shadow:var(--sh-sm)}
.fr[aria-selected="true"] .t{color:var(--fg-1)}
.fr[aria-selected="true"] .n{color:var(--fg-1)}
.fr .bar i{width:calc(var(--p,0) * 100%);transition:width .12s linear}
.fr.done .bar i{width:100%}
.fr:hover{transform:translateY(-1px)}
@media (min-width:820px){.film-rail{gap:.75rem}.fr{min-width:0}}

/* ---- stage ---- */
.film-stage{position:relative;background:var(--bg-surface);border:1px solid var(--border-1);
  border-radius:var(--r-xl);box-shadow:var(--sh-sm);overflow:hidden;min-height:0}
.fscene{position:absolute;inset:0;padding:clamp(1rem,3vw,1.75rem);display:flex;flex-direction:column;
  gap:clamp(.85rem,2vw,1.35rem);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .45s var(--ease-out),transform .45s var(--ease-out),visibility 0s .45s}
.fscene.on{opacity:1;visibility:visible;transform:none;transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.fs-cap{margin-top:auto;padding-top:.85rem;border-top:1px solid var(--border-1);display:flex;
  align-items:baseline;gap:.6rem;flex-wrap:wrap}
.fs-cap b{font-size:var(--t-md);font-weight:var(--fw-bold);color:var(--fg-1)}
.fs-cap span{font-size:var(--t-md);color:var(--fg-3);line-height:1.4}

/* shared entrance for scene parts */
.sp{opacity:0}
.fscene.on .sp{animation:spIn .5s var(--ease-out) both;animation-delay:calc(var(--d,0) * 1ms)}
@keyframes spIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fscene.on .sp-pop{animation:spPop .45s var(--ease-snap) both;animation-delay:calc(var(--d,0) * 1ms)}
@keyframes spPop{from{opacity:0;transform:scale(.72)}to{opacity:1;transform:none}}

/* ============ 01 approval-first ============ */
/* min-height:0, or the default 'auto' floors this flex item at its content
   height and the caption below it gets pushed past .film-stage's clip edge.
   Same cause as .chain and .pst-b. */
/* gap:0 is deliberate: the .sc-w ticks and the .sc-split bracket ARE the
   separation, and they carry meaning a gap cannot. They must never be
   compressed, or the diagram loses the connections it exists to show. */
.sc-flow{display:flex;flex-direction:column;align-items:center;gap:0;position:relative;min-height:0}
.sc-n{width:min(320px,100%);display:flex;align-items:center;gap:.65rem;background:var(--bg-surface);
  border:1.5px solid var(--border-2);border-radius:var(--r-md);padding:.65rem .8rem;box-shadow:var(--sh-xs)}
.sc-n .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none}
.sc-n .ic .bi{width:16px;height:16px;fill:currentColor}
.sc-n .ic i{width:15px;height:15px}
.sc-n b{display:block;font-size:var(--t-md);font-weight:var(--fw-bold);color:var(--fg-1);line-height:1.2}
.sc-n small{display:block;font-size:var(--t-xs);color:var(--fg-3);margin-top:.05rem}
.sc-n.grad{border:1.5px solid transparent;
  background:linear-gradient(var(--bg-surface),var(--bg-surface)) padding-box,
             linear-gradient(90deg,var(--violet),var(--indigo)) border-box}
.sc-w{width:1.5px;height:12px;background:var(--border-3);flex:none}
/* the branch row has to line up with the nodes above it, not sit 20px narrower */
.sc-split{width:min(320px,100%);height:18px;position:relative;flex:none}
.sc-split::before{content:"";position:absolute;left:50%;top:0;width:1.5px;height:9px;background:var(--border-3);transform:translateX(-50%)}
.sc-split::after{content:"";position:absolute;left:24%;right:24%;top:9px;height:1.5px;background:var(--border-3)}
.sc-split i{position:absolute;top:9px;width:1.5px;height:9px;background:var(--border-3)}
.sc-split i.l{left:24%}.sc-split i.r{right:24%}
.sc-arms{display:flex;gap:.55rem;width:min(320px,100%)}
.sc-arm{flex:1;text-align:center;border:1.5px solid var(--border-2);border-radius:var(--r-md);
  background:var(--bg-surface);padding:.6rem .5rem;box-shadow:var(--sh-xs)}
.sc-arm b{display:block;font-size:var(--t-sm);font-weight:var(--fw-bold);color:var(--fg-1)}
.sc-arm small{font-size:var(--t-mono);color:var(--fg-3)}
.sc-arm.ok{border-color:var(--grass)}
.sc-arm.ok b{color:var(--grass-deep)}
.fscene.on .sc-arm.ok{animation:spIn .5s var(--ease-out) both,scGlow .8s var(--ease-out) 3.2s;
  animation-delay:calc(var(--d,0) * 1ms),3.2s}
@keyframes scGlow{0%{box-shadow:var(--sh-xs)}40%{box-shadow:0 0 0 5px var(--grass-soft)}100%{box-shadow:var(--sh-xs)}}
.sc-audit{margin-top:.7rem;display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-mono);
  font-size:var(--t-mono);letter-spacing:.05em;color:var(--fg-3);background:var(--bg-subtle);
  border-radius:var(--r-pill);padding:.3rem .7rem}
.sc-audit i.d{width:5px;height:5px;border-radius:50%;background:var(--grass);flex:none}
.sc-cur{position:absolute;width:15px;height:15px;color:var(--fg-1);opacity:0;pointer-events:none;z-index:3;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.sc-cur svg{width:100%;height:100%;fill:currentColor;display:block}
.fscene.on .sc-cur{animation:scCur 1.9s var(--ease-out) 1.9s forwards}
@keyframes scCur{0%{opacity:0;transform:translate(120px,120px)}18%{opacity:1}
  70%{opacity:1;transform:translate(-72px,74px)}80%{transform:translate(-72px,74px) scale(.78)}
  90%{transform:translate(-72px,74px) scale(1)}100%{opacity:0;transform:translate(-72px,74px)}}


/* Film scenes are full-viewport product mocks, so they carry a real UI type
   scale that grows with the stage rather than fixed sub-11px chrome. */
.film-pin{--t-mono:.6875rem;--t-xs:.8125rem;--t-sm:.875rem;--t-md:1rem;--t-lg:1.125rem;--t-ic:20px;--t-cell:32px}
@media (min-width:760px){.film-pin{--t-mono:.75rem;--t-xs:.875rem;--t-sm:.9375rem;--t-md:1.0625rem;--t-lg:1.25rem;--t-ic:22px;--t-cell:36px}}
@media (min-width:1240px){.film-pin{--t-mono:.8125rem;--t-xs:.9375rem;--t-sm:1rem;--t-md:1.125rem;--t-lg:1.375rem;--t-ic:26px;--t-cell:42px}}
@media (max-height:760px){.film-pin{--t-mono:.6875rem;--t-xs:.8125rem;--t-sm:.875rem;--t-md:.9375rem;--t-lg:1.0625rem;--t-ic:20px;--t-cell:28px}}
@media (max-height:640px){.film-pin{--t-mono:.625rem;--t-xs:.75rem;--t-sm:.8125rem;--t-md:.875rem;--t-lg:.9375rem;--t-ic:18px;--t-cell:24px}}

/* ============ 02 journey studio ============ */
.sc-canvas{position:relative;flex:1;min-height:0;border:1px solid var(--border-1);border-radius:var(--r-lg);
  background:var(--bg-subtle);background-image:radial-gradient(var(--border-2) 1px,transparent 1px);
  background-size:14px 14px;overflow:hidden}
.sc-canvas .wires{position:absolute;inset:0;width:100%;height:100%}
.sc-canvas .wires path{fill:none;stroke:var(--border-3);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:var(--len,200);stroke-dashoffset:var(--len,200)}
.fscene.on .sc-canvas .wires path{animation:scDraw .6s var(--ease-out) both;animation-delay:calc(var(--d,0) * 1ms)}
@keyframes scDraw{to{stroke-dashoffset:0}}
/* every node is vertically centred on its own row, so the wires meet the card
   edge exactly instead of landing above or below it */
.jn{position:absolute;z-index:1;width:27%;min-width:104px;background:var(--bg-surface);border:1.5px solid var(--border-2);
  border-radius:var(--r-lg);padding:.55rem .7rem;box-shadow:var(--sh-sm);opacity:0;
  transform:translateY(-50%)}
.fscene.on .jn{animation:jnPop .45s var(--ease-snap) both;animation-delay:calc(var(--d,0) * 1ms)}
@keyframes jnPop{from{opacity:0;transform:translateY(calc(-50% + 10px)) scale(.94)}
  to{opacity:1;transform:translateY(-50%) scale(1)}}
.jn .hd{display:flex;align-items:center;gap:.35rem;margin-bottom:.15rem}
.jn .hd i,.jn .hd .bi{width:15px;height:15px;flex:none}
.jn .hd .bi{fill:currentColor}
.jn .hd span{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg-4)}
.jn b{display:block;font-size:var(--t-md);font-weight:var(--fw-bold);color:var(--fg-1);line-height:1.25}
.jn.pick{border-color:var(--grass)}
.jn.live{border-color:var(--violet)}
.sc-live{position:absolute;top:.55rem;right:.55rem;display:inline-flex;align-items:center;gap:.35rem;
  background:var(--bg-surface);border:1.5px solid var(--border-2);border-radius:var(--r-pill);
  padding:.25rem .6rem;font-size:var(--t-xs);font-weight:var(--fw-bold);color:var(--fg-3);box-shadow:var(--sh-xs)}
.sc-live i{width:6px;height:6px;border-radius:50%;background:var(--border-3);display:block}
.fscene.on .sc-live{animation:scLive .01s linear 3.4s forwards}
@keyframes scLive{to{border-color:var(--grass);color:var(--grass-deep)}}
.fscene.on .sc-live i{animation:scLiveDot .01s linear 3.4s forwards}
@keyframes scLiveDot{to{background:var(--grass)}}
.sc-token{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--coral);
  box-shadow:0 0 0 4px var(--coral-soft);opacity:0;z-index:0;transform:translate(-50%,-50%)}
.fscene.on .sc-token{animation:scTok 2.6s var(--ease-inout) 3.8s infinite}
@keyframes scTok{0%{opacity:0;left:30%;top:50%}10%{opacity:1}
  40%{left:38%;top:50%}75%{opacity:1;left:71%;top:25%}92%{opacity:0;left:71%;top:25%}100%{opacity:0}}

/* ============ 03 the contact record ============ */
.sc-rec{flex:0 1 auto;margin-block:auto;min-height:0;display:grid;gap:.7rem;grid-template-rows:auto minmax(0,1fr)}
@media (min-width:700px){.sc-rec{grid-template-rows:none;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);gap:1rem}}
/* A real notification pile: it lands collapsed, then fans open so every
   channel stays readable while the stack depth still reads at a glance. */
.sc-sigs{--step:calc(var(--t-ic) + 20px);position:relative;height:calc(5 * var(--step) + var(--t-ic) + 18px);align-content:flex-start}
.sig{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;gap:.45rem;
  background:var(--bg-surface);border:1px solid var(--border-2);
  border-radius:var(--r-pill);padding:.45rem .9rem .45rem .45rem;font-size:var(--t-sm);font-weight:var(--fw-semibold);
  color:var(--fg-2);opacity:0;white-space:nowrap;box-shadow:var(--sh-sm);
  transform-origin:top center;z-index:calc(9 - var(--i))}
.sig .ic{width:var(--t-ic);height:var(--t-ic);border-radius:50%;display:grid;place-items:center;flex:none;background:var(--cs)}
.sig .ic .bi{width:calc(var(--t-ic) * .58);height:calc(var(--t-ic) * .58);fill:var(--c)}
.sig .ic i{width:calc(var(--t-ic) * .52);height:calc(var(--t-ic) * .52);color:var(--c)}
.fscene.on .sig{animation:sigDrop .5s var(--ease-snap) both,sigFan .6s var(--ease-out) 1.15s both}
.fscene.on .sig{animation-delay:calc(var(--i) * 90ms),1150ms}
@keyframes sigDrop{
  from{opacity:0;transform:translateY(-12px) scaleX(.9)}
  to{opacity:calc(1 - var(--i) * .13);transform:translateY(calc(var(--i) * 4px)) scaleX(calc(1 - var(--i) * .035))}
}
@keyframes sigFan{
  from{opacity:calc(1 - var(--i) * .13);transform:translateY(calc(var(--i) * 4px)) scaleX(calc(1 - var(--i) * .035))}
  to{opacity:1;transform:translateY(calc(var(--i) * var(--step))) scaleX(1)}
}
.sig .lbl{overflow:hidden;text-overflow:ellipsis}
.rec{border:1px solid var(--border-2);border-radius:var(--r-xl);background:var(--bg-surface);
  padding:clamp(.85rem,1.6vw,1.4rem);display:flex;flex-direction:column;gap:.7rem;min-height:0;overflow:hidden;
  box-shadow:var(--sh-sm)}
.rec-h{display:flex;align-items:center;gap:.55rem}
.rec-h .av{width:calc(var(--t-ic) * 2);height:calc(var(--t-ic) * 2);border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;
  font-size:var(--t-sm);font-weight:var(--fw-bold);background:linear-gradient(135deg,#8B5CF6,#3A36C9)}
.rec-h b{display:block;font-size:var(--t-lg);font-weight:var(--fw-bold);color:var(--fg-1);line-height:1.2}
.rec-h small{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.05em;color:var(--fg-3)}
.rec-tags{display:flex;flex-wrap:wrap;gap:.3rem}
.rec-tags span{font-size:var(--t-xs);font-weight:var(--fw-bold);border-radius:var(--r-pill);padding:.25rem .7rem;opacity:0}
.fscene.on .rec-tags span{animation:spPop .4s var(--ease-snap) both;animation-delay:calc(var(--d,0) * 1ms)}
.rec-meta{display:flex;gap:.9rem;font-size:var(--t-mono);font-family:var(--font-mono);letter-spacing:.05em;color:var(--fg-3)}
.rec-meta b{color:var(--fg-1);font-weight:var(--fw-bold)}
.rec-tl{display:flex;flex-direction:column;gap:.65rem;min-height:0;overflow:hidden;
  border-top:1px solid var(--border-1);padding-top:.6rem}
.tl{display:flex;align-items:center;gap:.6rem;font-size:var(--t-sm);color:var(--fg-2);opacity:0;line-height:1.3}
.tl .ic{width:var(--t-ic);height:var(--t-ic);border-radius:6px;display:grid;place-items:center;flex:none;background:var(--cs)}
.tl .ic .bi{width:calc(var(--t-ic) * .56);height:calc(var(--t-ic) * .56);fill:var(--c)}
.tl .ic i{width:calc(var(--t-ic) * .5);height:calc(var(--t-ic) * .5);color:var(--c)}
.tl .tm{margin-left:auto;font-family:var(--font-mono);font-size:var(--t-mono);color:var(--fg-4);flex:none}
.fscene.on .tl{animation:spIn .45s var(--ease-out) both;animation-delay:calc(var(--d,0) * 1ms)}

/* ============ 04 roles and the audit chain ============ */
.sc-gov{flex:0 1 auto;margin-block:auto;min-height:0;display:flex;flex-direction:column;gap:.9rem}
.mx{display:grid;grid-template-columns:minmax(4.5rem,.6fr) repeat(4,minmax(0,1fr));gap:.4rem;font-size:var(--t-xs)}
.mx .hd{font-family:var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-4);
  padding-bottom:.15rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mx .rw{font-weight:var(--fw-bold);color:var(--fg-1);display:flex;align-items:center;font-size:var(--t-sm)}
.mx .c{height:var(--t-cell);border-radius:var(--r-md);background:var(--bg-subtle);display:grid;place-items:center;opacity:0}
.mx .c svg{width:calc(var(--t-cell) * .42);height:calc(var(--t-cell) * .42);stroke-width:3;fill:none;display:block}
.mx .c.y{background:var(--grass-soft)}.mx .c.y svg{stroke:var(--grass-deep)}
.mx .c.s{background:var(--sun-soft)}.mx .c.s svg{stroke:var(--sun-deep)}
.mx .c.n{background:var(--bg-subtle)}.mx .c.n svg{stroke:var(--border-3)}
.fscene.on .mx .c{animation:spPop .35s var(--ease-snap) both;animation-delay:calc(var(--d,0) * 1ms)}
.chain{flex:1;min-height:0;display:flex;flex-direction:column;gap:.25rem;border-top:1px solid var(--border-1);
  padding-top:.5rem;overflow:hidden}
.chain .ttl{font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg-4)}
.lk{display:flex;align-items:center;gap:.45rem;font-family:var(--font-mono);font-size:var(--t-mono);
  color:var(--fg-3);background:var(--bg-subtle);border-radius:var(--r-sm);padding:.28rem .5rem;opacity:0}
.lk .h{color:var(--fg-1);font-weight:var(--fw-bold)}
.lk .ev{color:var(--fg-2);font-family:var(--font-sans);font-size:var(--t-xs);font-weight:var(--fw-semibold)}
/* .lk sits on a raised surface, where --fg-4 is 4.36:1 in dark */
.lk .ln{margin-left:auto;color:var(--fg-4-raised);white-space:nowrap}
.fscene.on .lk{animation:spIn .4s var(--ease-out) both;animation-delay:calc(var(--d,0) * 1ms)}
.sc-gov .vfy{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;margin-top:.15rem;
  background:var(--grass-soft);color:var(--grass-deep);border-radius:var(--r-pill);padding:.25rem .6rem;
  font-size:var(--t-mono);font-weight:var(--fw-bold);opacity:0}
.sc-gov .vfy svg{width:11px;height:11px;stroke:currentColor;stroke-width:3;fill:none}
.fscene.on .sc-gov .vfy{animation:spPop .4s var(--ease-snap) both;animation-delay:calc(var(--d,0) * 1ms)}

/* Resolved state: whatever the animations did or did not get to, a settled
   chapter shows all of its content. */
.fscene.settled .sp,.fscene.settled .sp-pop,.fscene.settled .jn,.fscene.settled .sig,
.fscene.settled .tl,.fscene.settled .lk,.fscene.settled .mx .c,
.fscene.settled .rec-tags span,.fscene.settled .sc-gov .vfy,.fscene.settled .sc-arm{
  animation:none !important;opacity:1 !important}
.fscene.settled .jn{transform:translateY(-50%) !important}
.fscene.settled .sp,.fscene.settled .tl,.fscene.settled .lk,
.fscene.settled .rec-tags span,.fscene.settled .sc-gov .vfy,.fscene.settled .mx .c{transform:none !important}
/* The signal chips are absolutely positioned at top:0 and held apart purely by
   transform, so clearing it collapsed all six back into one pile the moment the
   chapter settled. Settled has to preserve the fan, the way .jn does. */
.fscene.settled .sig{transform:translateY(calc(var(--i) * var(--step))) !important}
.fscene.settled .sc-canvas .wires path{animation:none !important;stroke-dashoffset:0 !important}
/* delayed state changes have to resolve too, or a snapped chapter shows the
   composition without the outcome it exists to demonstrate */
.fscene.settled .sc-live{border-color:var(--grass);color:var(--grass-deep);animation:none !important}
.fscene.settled .sc-live i{background:var(--grass);animation:none !important}
.fscene.settled .sc-cur{display:none}

/* ---- dark ---- */
:root[data-theme="dark"] .sc-canvas{background-color:rgba(255,255,255,.02)}
:root[data-theme="dark"] .mx .c.n{background:rgba(255,255,255,.05)}

@media (prefers-reduced-motion:reduce){
  .film-track{height:auto}
  .film-pin{position:static;height:auto;min-height:0}
  .film-in{height:auto;padding-block:0}
  .film-stage{height:clamp(430px,60vw,520px)}
  .fscene{transition:none}
  .fscene.on .sp,.fscene.on .sp-pop,.fscene.on .jn,.fscene.on .sig,.fscene.on .tl,
  .fscene.on .lk,.fscene.on .mx .c,.fscene.on .rec-tags span,.fscene.on .sc-gov .vfy{animation:none;opacity:1}
  .fscene.on .sc-canvas .wires path{animation:none;stroke-dashoffset:0}
  .sc-token,.sc-cur{display:none}
  .fr[aria-selected="true"] .bar i{width:100%}
  .fscene.on .sc-live,.fscene.on .sc-live i{animation:none}
}

@media (max-height:700px){.sc-sigs{--step:23px;height:calc(5 * 23px + 28px)}}
@media (prefers-reduced-motion:reduce){
  .fscene.on .sig{animation:none;opacity:1;transform:translateY(calc(var(--i) * var(--step)))}
}

/* .vfy sits beside .chain now, so it must not be a flex-grown child */
.sc-gov>.vfy{flex:none}

/* ============================================================================
   SCENE 0 SHORT-VIEWPORT FIT.
   The height-keyed tiers sit at the TOP of this file, so the base .sc-n /
   .sc-w / .sc-split rules further down were overriding them and the
   compression never actually applied. Re-declared here, after the base rules,
   where the cascade lets them win. The connectors are trimmed but never
   removed: they carry the sequence the diagram exists to show.
   ========================================================================== */
@media (max-height:760px){
  .sc-n{padding:.4rem .55rem}
  .sc-n .ic{width:26px;height:26px}
  .sc-w{height:10px}
  .sc-split{height:12px}
  .sc-arms{gap:.5rem}
  .sc-arm{padding:.45rem .45rem}
}
@media (max-height:640px){
  .sc-n{padding:.3rem .45rem;gap:.5rem}
  .sc-n .ic{width:22px;height:22px}
  .sc-n .ic .bi{width:13px;height:13px}
  .sc-n b{font-size:var(--t-sm);line-height:1.2}
  .sc-w{height:8px}
  .sc-split{height:12px}
  .sc-split::before,.sc-split i{height:6px}
  .sc-split::after,.sc-split i{top:6px}
  .sc-arm{padding:.35rem .4rem}
  .sc-arm b{font-size:var(--t-xs)}
  .sc-audit{margin-top:.25rem}
}

/* ---- fit after the readability raise ---- */
@media (min-width:900px){
  /* .chain had 177px of rows in a 78px box: the matrix above it takes the slack.
     Let the chain keep its rows and cap the matrix instead. */
  /* Nothing here scrolls and nothing is clipped: both blocks take their
     natural height and the chapter sizes to its content. */
  .sc-gov{flex:0 0 auto;min-height:0;justify-content:center;margin-block:auto}
  .chain{flex:0 0 auto;min-height:0;overflow:visible}
  .sc-gov .mx{flex:0 0 auto;min-height:0;overflow:visible}
  .lk{padding-block:.24rem}
  .sc-flow{gap:0}
  .sc-arms{gap:.45rem}
  /* .sc-flow needed 392px in 344px: 48px comes off the node and branch padding,
     never off the type. */
  .sc-n{padding:.45rem .75rem}
  .sc-n .ic{width:28px;height:28px}
  .sc-arm{padding:.42rem .5rem}
  .sc-w{height:10px}
  .sc-audit{margin-top:.2rem;padding-block:.2rem}
  .sc-split{height:12px}
  .sc-arms{gap:.5rem}
}