/* Chapter 11, management cadence: the cadence loom (mcx) and the waterfall gauge (mcf). Imported only by
   /library/measure-before-you-model/management-cadence/. HTML is the composed end state; transitions and lives exist
   only under :root[data-m-go], so reduced motion and Calm show finished states. Transform, opacity, clip-path and
   filter only; the instrument is pinned by native sticky, never by a counter-translation. */

/* ---------------- a prose run with its pinned instrument ---------------- */
.mcx-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,440px);column-gap:clamp(36px,4.4vw,72px);align-items:start}
.mcx-col__main{min-width:0}
.mcx-col__aside{position:sticky;top:24px;align-self:start;min-width:0}
.mcx-col .w5s__r{grid-template-columns:minmax(0,1fr);row-gap:8px}
.mcx-col .w5s__t{max-width:none}
.mcx-col .w5s__t p{max-width:64ch}
.mcx-col .w5s__line{left:-25px}
.mcx-col .w5k{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.mcx-col .w5k__dot{left:-32px;top:6px}
.mcx-col .w5k__fig,.mcx-col .w5k--bare{display:none}
.mcx-col .w5-reg,.mcx-col .w5-path{margin:32px 0}
.mcx-col .w5-reg .w3x__rows{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---------------- the instrument card ---------------- */
.mcx{display:grid;gap:12px;padding:18px 20px 16px;background:var(--w5-night,#072d2b);color:#e6efea;outline:1px solid #ffffff21;box-shadow:0 34px 70px -46px #072d2bd9}
.mcx--night{background:var(--w5-deep,#0a3d3a)}
.mcx p{max-width:none;margin:0}
.mcx__head{display:grid;gap:4px}
.mcx__k{font:700 12px var(--gft-font-mono);letter-spacing:.07em;text-transform:uppercase;color:#e8b866}
.mcx__t{font:800 clamp(1.12rem,1.4vw,1.3rem)/1.2 var(--gft-font-display);letter-spacing:-.02em;color:#fff}
.mcx__beat{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:4px}
.mcx__beat svg{width:100%;height:22px;overflow:visible}
.mcx__beat span{font:600 12px var(--gft-font-mono);color:#b9d3c5;white-space:nowrap}
.mcx__thread{fill:none;stroke:#6bb68f;stroke-opacity:.55;stroke-width:2}
.mcx__knot{fill:#6bb68f}
.mcx--night .mcx__thread{stroke:#e0a54d}
.mcx--night .mcx__knot{fill:#e0a54d}
.mcx__shuttle{fill:#fff;stroke:#c98a2b;stroke-width:3}
.mcx__views{display:flex;gap:6px;flex-wrap:wrap}
.mcx__views button{min-height:44px;padding:4px 12px;border:1px solid #ffffff59;background:transparent;color:#e6efea;font:700 12.5px var(--gft-font-mono)}
.mcx__views button[aria-pressed=true]{background:#e6efea;border-color:#e6efea;color:#072d2b}
.mcx__vis svg{display:block;width:100%;height:auto;max-height:min(256px,31svh);overflow:visible}
.mcx__vis text{font:600 14px var(--gft-font-mono);fill:#e6efea}
.mcx__vis .mcx__sub,.mcx__vis .mcx__cap{font-size:12.5px;font-weight:500;fill:#b9d3c5}
.mcx__vis [data-mcx-hit]{cursor:pointer}
.mcx__ctl{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;gap:8px;align-items:start}
.mcx__step{min-width:44px;min-height:44px;border:1px solid #ffffff59;background:transparent;color:#e6efea;font-size:18px}
.mcx__btns{display:grid}
.mcx__set{grid-area:1/1;display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;align-items:flex-start}
.mcx__set[hidden]{display:flex;visibility:hidden}
.mcx__set button{min-height:44px;min-width:44px;padding:4px 10px;border:1px solid #ffffff4d;background:transparent;color:#e6efea;font:700 12.5px var(--gft-font-mono)}
.mcx__set button[aria-pressed=true]{background:#c98a2b;border-color:#c98a2b;color:#072d2b}
.mcx__read{display:grid;padding-top:12px;border-top:1px solid #ffffff26}
.mcx__r{grid-area:1/1;display:grid;gap:4px;align-content:start;opacity:0;visibility:hidden}
.mcx__r.is-on{opacity:1;visibility:visible}
.mcx__rm{font:600 12.5px var(--gft-font-mono);color:#e8b866}
.mcx__rl{font-size:17px;font-weight:800;line-height:1.3;color:#fff}
.mcx__rd{font-size:15px;line-height:1.5;color:#e6efea}
.mcx__basis{font-size:12.5px;line-height:1.45;color:#b9d3c5}
.mcx__chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.mcx__chip{display:inline-flex;align-items:center;gap:5px;min-height:28px;min-width:28px;padding:2px 7px;border:1px solid #ffffff4d;font:600 12px var(--gft-font-mono);color:#e6efea;text-decoration:none}
.mcx__chip b{color:#9fd3b5}
:root[data-m-go] .mcx__r{transition:opacity .15s ease,visibility 0s .15s}
:root[data-m-go] .mcx__r.is-on{transition:opacity .28s ease .18s,visibility 0s .18s}

/* the clock */
.mcx__ring{fill:none;stroke:#ffffff17;stroke-width:20}
.mcx__tick{stroke:#ffffff59;stroke-width:2}
.mcx__seg{fill:none;stroke:#6bb68f;stroke-width:20;opacity:.28}
.mcx__tail{fill:none;stroke:#6bb68f;stroke-width:20;stroke-dasharray:3 4;opacity:.22}
.mcx__arc.is-on .mcx__seg{opacity:.85}
.mcx__arc.is-on .mcx__tail{opacity:.6}
.mcx__arc.is-focus .mcx__seg{stroke:#e0a54d;opacity:1}
.mcx__arc.is-focus .mcx__tail{stroke:#e0a54d;opacity:.8}
.mcx__arc text{font-weight:800}
.mcx__hand path{stroke:#fff;stroke-width:3;stroke-linecap:round}
.mcx__hand circle{fill:#e0a54d}
.mcx__hub{fill:#fff}
.mcx__mid{opacity:0}
.mcx__mid.is-on{opacity:1}
.mcx__vis .mcx__big{font:850 36px var(--gft-font-display);fill:#fff;letter-spacing:-.03em}
.mcx__vis .mcx__unit{font-size:13px;fill:#b9d3c5}

/* the signal tower */
.mcx__pole{stroke:#ffffff33;stroke-width:6;stroke-linecap:round}
.mcx__bulb{opacity:.24;stroke:#ffffff59;stroke-width:2}
.mcx__halo{opacity:0}
.mcx__lamp--green :is(.mcx__bulb,.mcx__halo){fill:#6bb68f}
.mcx__lamp--amber :is(.mcx__bulb,.mcx__halo){fill:#e0a54d}
.mcx__lamp--red :is(.mcx__bulb,.mcx__halo){fill:#ef7d6b}
.mcx__lamp.is-on .mcx__bulb{opacity:1;stroke:#fff}
.mcx__lamp.is-on .mcx__halo{opacity:.25}
.mcx__lamp text{font:800 16px var(--gft-font-display);fill:#fff}
.mcx__lamp .mcx__sub{font-family:var(--gft-font-mono)}
.mcx__hours rect{fill:#ffffff12;stroke:#ffffff40}
.mcx__hours text{font-size:12px}
.mcx__hours.is-on rect{fill:#6bb68f59;stroke:#6bb68f}

/* the S&OP month */
.mcx__day rect{fill:#ffffff12;stroke:#ffffff33}
.mcx__day--p1 rect{fill:#9fb2ec}.mcx__day--p2 rect{fill:#6bb68f}.mcx__day--p3 rect{fill:#e0a54d}.mcx__day--p4 rect{fill:#f2f0e8}
.mcx__day:not(.mcx__day--free) rect{fill-opacity:.22}
.mcx__day.is-on rect{fill-opacity:1}
.mcx__day.is-on text{fill:#072d2b;font-weight:800}
.mcx__day--free text{fill:#b9d3c5}
.mcx__ph path{stroke:#ffffff40;stroke-width:3}
.mcx__ph.is-on path{stroke:#e6efea}
.mcx__ph.is-focus path{stroke:#e0a54d;stroke-width:6}
.mcx__ph.is-focus text{fill:#e8b866;font-weight:800}
.mcx__bridge{opacity:.5}
.mcx__bridge.is-on{opacity:1}
.mcx__bseg.is-total{fill:#9fb2ec}
.mcx__bseg.is-loss{fill:#e0a54d}
.mcx__vis .mcx__bv{font-weight:800}

/* the decision-rights ladder */
.mcx__rail{stroke:#ffffff4d;stroke-width:4;stroke-linecap:round;fill:none}
.mcx__rung path{stroke:#ffffff47;stroke-width:6;stroke-linecap:round}
.mcx__rung text{font:800 16px var(--gft-font-display)}
.mcx__rung .mcx__sub{font-family:var(--gft-font-mono)}
.mcx__rung.is-on path{stroke:#e0a54d;stroke-width:9}
.mcx__rung.is-on text{fill:#fff}
.mcx__chal path{fill:none;stroke:#9fd3b5;stroke-width:3;stroke-dasharray:6 6;opacity:.55}
.mcx__chal .mcx__arrow{stroke-dasharray:none}
.mcx__chal text{fill:#9fd3b5;font-size:13px}
.mcx__chal.is-on path{opacity:1;stroke-width:4}
.mcx__climber circle{fill:#e0a54d;stroke:#fff;stroke-width:3}

/* the action record */
.mcx__thread--big{stroke-width:3;stroke-opacity:.7}
.mcx__gate{stroke:#e0a54d;stroke-width:2;stroke-dasharray:4 5}
.mcx__fknot circle{fill:#0e4d4a;stroke:#6bb68f;stroke-opacity:.6;stroke-width:2}
.mcx__fknot.is-on circle{fill:#6bb68f;stroke:#fff;stroke-opacity:1}
.mcx__fknot.is-on text{fill:#072d2b}
.mcx__fknot.is-focus circle{stroke:#e0a54d;stroke-width:5}
.mcx__fknot text{font-weight:800;font-size:13px}
.mcx__stage path{stroke:#ffffff40;stroke-width:4}
.mcx__stage.is-on path{stroke:#e0a54d}
.mcx__stage text{font-size:13px}
.mcx__stage.is-on text{fill:#e8b866;font-weight:800}

/* the scorecard */
.mcx__pent{opacity:0;transform-origin:200px 132px;transform:rotate(-36deg) scale(.86)}
.mcx__pent.is-on{opacity:1;transform:none}
.mcx__frame{fill:#ffffff08;stroke:#ffffff40;stroke-width:2}
.mcx__frame--in{fill:none;stroke-dasharray:3 5}
.mcx__axis path{stroke:#ffffff40;stroke-width:2}
.mcx__axis circle{fill:#0e4d4a;stroke:#6bb68f;stroke-width:2}
.mcx__axis text{font-weight:800}
.mcx__axis.is-on path{stroke:#e0a54d;stroke-width:5}
.mcx__axis.is-on circle{fill:#e0a54d;stroke:#fff}

/* state changes, under the motion guard only */
:root[data-m-go] :is(.mcx__seg,.mcx__tail,.mcx__bulb,.mcx__halo,.mcx__bridge,.mcx__day rect,.mcx__fknot circle,.mcx__axis path){transition:opacity .4s ease,fill-opacity .4s ease}
:root[data-m-go] .mcx__mid{transition:opacity .15s ease}
:root[data-m-go] .mcx__mid.is-on{transition:opacity .3s ease .18s}
:root[data-m-go] :is(.mcx__hand,.mcx__climber){transition:transform .65s cubic-bezier(.42,.02,.18,1)}
:root[data-m-go] .mcx__pent{transition:opacity .45s ease,transform .7s cubic-bezier(.16,1,.3,1)}
/* lives: the shuttle runs the cadence thread while the instrument is on screen */
:root[data-m-go] .mcx[data-m-on] .mcx__shuttle{animation-name:mcx-shuttle;animation-duration:7s;animation-timing-function:cubic-bezier(.42,0,.58,1);animation-iteration-count:infinite;animation-direction:alternate}
@keyframes mcx-shuttle{from{transform:translateX(0)}to{transform:translateX(372px)}}
:root[data-m-go] .mcx[data-m-on] .mcx__lamp.is-on .mcx__halo{transform-box:fill-box;transform-origin:50% 50%;animation-name:mcx-halo;animation-duration:1.8s;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}
@keyframes mcx-halo{from{transform:scale(.82)}to{transform:scale(1.12)}}
:root[data-m-go] .mcx[data-m-on] .mcx__chal.is-on path:not(.mcx__arrow){animation-name:mcx-march;animation-duration:1.4s;animation-timing-function:linear;animation-iteration-count:infinite;animation-direction:normal}
@keyframes mcx-march{to{stroke-dashoffset:24}}

/* ---------------- the waterfall film: full size until its section ends, with a cumulative-loss gauge ---------------- */
:root[data-m-go] .w5-sec .w5f--wf .w5f__visin{animation-name:none}
.w5-sec .w5f--wf .w5f__stage{grid-template-columns:minmax(0,60fr) minmax(0,40fr)}
.mcf-right{display:contents}
.mcf-right--wf{display:grid;grid-column:2;grid-row:2;align-content:center;gap:22px;min-height:0}
.w5f .mcf-right--wf .w5f__caps{grid-column:auto;grid-row:auto}
.mcf-gauge{display:grid;gap:8px;padding:16px 18px;background:#0a3d3a;outline:1px solid #ffffff26}
.mcf-gauge p{max-width:none;margin:0}
.mcf-gauge__k{font:700 12.5px var(--gft-font-mono);letter-spacing:.06em;text-transform:uppercase;color:#e8b866}
.mcf-gauge__cells{display:grid}
.mcf-gauge__c{grid-area:1/1;opacity:0;visibility:hidden}
.mcf-gauge__c.is-on{opacity:1;visibility:visible}
.mcf-gauge__v{font:850 clamp(2.2rem,3.1vw,3rem)/1 var(--gft-font-display);letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.mcf-gauge__v span{display:block;margin-top:6px;font:600 13px var(--gft-font-mono);letter-spacing:0;color:#b9d3c5}
.mcf-gauge__s{margin-top:6px!important;font-size:15px;color:#e6efea}
.mcf-gauge__bar{width:100%;height:auto;overflow:visible}
.mcf-gauge__track{fill:#ffffff14}
.mcf-gauge__left{fill:#9fb2ec;transform-origin:10px 0}
.mcf-gauge__seg{fill:#e0a54d;opacity:0}
.mcf-gauge__seg.is-cut{opacity:.5}
.mcf-gauge__seg.is-now{opacity:1}
.mcf-gauge__bar text{font:600 12px var(--gft-font-mono);fill:#b9d3c5}
.mcf-gauge__hint{font-size:13px;color:#b9d3c5}
.w5f--wf .w5f__ch{font-size:clamp(1.45rem,2vw,1.85rem)}
.w5f--wf .w5f__ro{font-size:15px;color:#d3e6dc}
.w5f--wf .w5f__kl{font-size:17px;color:#f2f7f4}
.w5f--wf .w5f__tick text{font-size:19px}
.w5f--wf .w5f__lab{font-size:19px}
.w5f--wf .w5f__val{font-size:21px}
.w5f--wf .w5f__b.is-ahead .w5f__lab{opacity:.72}
:root[data-m-go] .mcf-gauge__c{transition:opacity .15s ease,visibility 0s .15s}
:root[data-m-go] .mcf-gauge__c.is-on{transition:opacity .3s ease .18s,visibility 0s .18s}
:root[data-m-go] .mcf-gauge__left{transition:transform .7s cubic-bezier(.42,.02,.18,1)}
:root[data-m-go] .mcf-gauge__seg{transition:opacity .45s ease .2s}

@media (max-width:1099px){
 .mcx-col{grid-template-columns:minmax(0,1fr) 320px;column-gap:32px}
}
@media (max-width:860px){
 .mcx-col{grid-template-columns:minmax(0,1fr);row-gap:28px}
 .mcx-col__aside{position:static;grid-row:1}
 .mcx-col .w5s__line{left:-10px}
 .mcx__beat span{white-space:normal}
}
@media (max-width:760px){
 .mcx{padding:14px 14px 12px}
 .mcx-col .w5-reg .w3x__rows{grid-template-columns:1fr 1fr}
 .w5-sec .w5f--wf .w5f__stage{grid-template-columns:1fr}
 .mcf-right--wf{grid-column:1;grid-row:3;align-content:start;gap:10px}
 .mcf-gauge{padding:10px 12px;gap:4px}
 .mcf-gauge__k,.mcf-gauge__hint,.mcf-gauge__v span,.mcf-gauge__bar text,.w5f--wf .w5f__ro{display:none}
 .w5-sec .w5f--wf .w5f__stage{grid-template-rows:auto 34svh minmax(0,1fr) auto}
 .mcf-gauge__c{display:flex;align-items:baseline;gap:10px}
 .mcf-gauge__bar{height:16px}
 .mcf-gauge__v{font-size:1.6rem}
 .mcf-gauge__s{font-size:13px;margin-top:0!important}
 .w5f--wf .w5f__ch{font-size:1.15rem}
 .w5f--wf .w5f__kl{font-size:15px}
 .w5f--wf .w5f__ro{font-size:13px}
 .w5f--wf .w5f__tick text,.w5f--wf .w5f__val{font-size:13px}
 .w5f--wf .w5f__lab{font-size:12.5px}
}

/* information-bearing labels stay at 12 px or more on this page (citation marks, exhibit tags, register keys, grades) */
body[data-page] main a.cite{font-size:max(12px,.66em)}
body[data-page] main .w3x :is(.w3x__no,.w3x__type,.w3x__tag,.w3x__rl),body[data-page] main .w3x-card dt,body[data-page] main .w4e__id em{font-size:12px}

/* boxes whose content swaps while the page scrolls hold the size of their largest state, so the page never changes
   height under the reader: the interlude read-out, the evidence record card and the closing rack's chapter card */
.w5i .w5i__read{min-height:calc(4 * 1.5em)}
.w5i .w3x__read{min-height:100px;align-content:start}
.w5e .w4e__cardwrap{display:grid;align-content:start}
.w5e .w4e__cardwrap > .w4e__card{grid-area:1/1}
.w5e .w4e__cardwrap > .w4e__card[hidden]{display:grid!important;visibility:hidden}
.w5c .w5c__looms > .w5c__card[hidden]{display:grid;visibility:hidden}
@media (max-width:760px){
 .w5c .w5c__next{grid-template-columns:minmax(0,1fr) auto auto}
 .w5c .w5c__nk{grid-column:1 / -1}
 .w5c .w5c__nt{min-height:calc(4 * 1.3em);align-self:start}
}