/* ============================================================================
   runbooks.css — /runbooks: the traverse (the /guides descent, rotated).
   Loads AFTER guides.css and carries only the horizontal deltas: the pinned
   band, stations arriving from the right and ghosting left, quieter threads
   (Sam: not that bold), the tick strip, and the strip fallback when the
   scrub is off. Registered in build.py CACHE_BUST_ASSETS — run python3
   build.py after edits.
   ========================================================================== */
#band{position:absolute;left:0;top:47svh;transform:translateY(-50%);}
#tsvg{display:block;width:auto;overflow:visible;will-change:transform;}
body:not(.anim) #hwrap{overflow-x:auto;padding:48px 0;}
body:not(.anim) #band{position:static;transform:none;}
body:not(.anim) #tsvg{height:400px;width:auto;}

/* stations arrive from the right; passed ones ghost under the captions */
body.anim .st{transform:translateX(46px);}
body.anim .st.on{transform:none;}
body.anim .st.past{opacity:.13;}
.cn{transition:opacity .6s ease;}
body.anim .cn.past{opacity:.13;}

/* the thread, quieter than the descent's */
.cn .cc{stroke-width:1.5;}
.cn .cu{stroke-width:4;opacity:.18;}
.cn.q .cc{stroke-width:1.2;}
.cn.g .cc{stroke-width:1.8;}
.cn.g .cu{stroke-width:5;opacity:.25;}
body.anim .cn path{opacity:0;}
body.anim .cn.on path{opacity:1;transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1),opacity .2s ease;}
body.anim .jr .trace{opacity:0;}
body.anim .jr.on .trace{opacity:.9;transition:stroke-dashoffset .7s ease,opacity .2s ease;}

#jticks{position:absolute;right:max(40px,calc((100vw - 1240px)/2 + 40px));bottom:9svh;display:flex;gap:8px;}
#jticks i{width:22px;height:2px;background:rgba(252,252,251,.22);transition:background .4s ease;}
#jticks i.on{background:var(--p);}
#jticks i.gr.on{background:#45D07E;}
body:not(.anim) #jticks{display:none;}

@media (max-width:960px){
  body:not(.anim) #tsvg{height:320px;}
}

/* flagship band — .gsec2's top-only padding was zeroing the band's bottom */
#flagship{margin-top:150px;padding:120px 0;}

/* anatomy — a centered column */
#anatomy .shell{text-align:center;}
#anatomy h2{margin-left:auto;margin-right:auto;}
#anatomy .anat{max-width:820px;margin-left:auto;margin-right:auto;text-align:left;}