/* Use cases page (10-26): one 760 px reading column, each use case's text then its figure. The movies (uc.js) step
   through scenes by setting s1..sN on the svg; .kN marks appear at scene N, .out5 marks leave at scene 5. With no script,
   or with reduced motion, the svg keeps its last scene and the steps list reads as the story */
.uc-wrap{max-width:calc(760px + 2*var(--pad))}
.uc-toc{margin:0;padding-left:1.6em;font:14px/1.5 var(--mono);display:grid;gap:6px;color:var(--muted)}
.uc-toc a{color:var(--ink-2);text-decoration:none}.uc-toc a:hover{color:var(--accent)}
.uc{padding:clamp(56px,9vh,96px) 0;border-top:1px solid var(--rule)}
.uc h2{font-size:clamp(28px,3.4vw,42px);line-height:1.1;margin:0 0 20px}
.uc p{color:var(--ink-2);max-width:40em;margin:0 0 16px}
.uc-more{margin-top:18px}
.uc-end .cmdline{margin:22px 0}
.uc-note{font-size:13px;color:var(--muted);margin:10px 0 0}

.movie,.chart{margin:30px 0 0}
.mv,.uc3{display:block;width:100%;height:auto;border:1px solid var(--rule);background:#fff}
.mv text,.uc3 text{font-family:var(--sans);fill:var(--ink-2)}
.mv .hd{font:500 15px var(--mono);fill:var(--ink)}
.mv .row{font-size:15px}
.mv .sub{font-size:13.5px;fill:var(--muted)}
.mv .lb{font:500 14.5px var(--sans);fill:var(--ink)}
.mv .dl{font-size:12.5px;fill:var(--muted)}
.mv .acc,.uc3 .acc{fill:var(--accent)}
.mv .lane{fill:var(--soft);stroke:var(--rule)}
.mv .lane.sm{fill:rgba(var(--hue),.05);stroke:rgba(var(--hue),.25)}
.mv .panel{fill:#fff;stroke:var(--faint)}
.mv .link{stroke:var(--faint);stroke-width:2}
.mv .track{fill:var(--rule)}
.mv .rng{fill:var(--ink-2)}
.mv .rng.sm{fill:var(--accent)}
.mv .card rect{fill:#fff;stroke:var(--faint)}
.mv .card text{font-size:15px;fill:var(--ink)}
.mv .ok{fill:var(--accent)}.mv .no{fill:var(--wf-other)}
.mv .mk{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mv .bar-q{fill:var(--ink-2)}
.mv .bar-c{fill:var(--accent)}
.mv .bar-q,.mv .bar-c,.mv .eb,.mv .cover{transform-box:fill-box}
.mv .bar-c{transform-origin:0 50%}
.mv .axis,.uc3 .axis{fill:none;stroke:var(--ink-2);stroke-width:1.5}
.mv .pt circle{fill:var(--ink-2)}
.mv .pt.f circle{fill:var(--accent)}
.mv .eb{fill:none;stroke:currentColor;stroke-width:2;color:var(--dot);transform-origin:center;transform:scale(.3)}
.mv .front{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:0}
.mv .budget{stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:5 5}
.mv .pick{fill:none;stroke:var(--accent);stroke-width:2}
.mv .chip{fill:#fff;stroke:var(--faint)}.mv .chip.acc{stroke:var(--accent);fill:rgba(var(--hue),.06)}
.mv .zero{stroke:var(--ink-2);stroke-dasharray:4 4}
.mv .band{fill:rgba(var(--hue),.16)}
.mv .est{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round}
.mv .cover{fill:#fff;transform-origin:100% 50%;transform:scaleX(0)}
.mv .pairs circle{fill:var(--ink-2)}.mv .pairs circle.c{fill:var(--accent)}.mv .pairs .ghost circle{fill:none;stroke:var(--faint)}
.mv .stop{stroke:var(--accent);stroke-width:1.5}
.mv .verdict{fill:var(--accent)}.mv .vt{font:500 15px var(--mono);fill:#fff}

/* scenes */
.mv .card,.mv .pt,.mv [class*="k"],.mv .out5,.mv .eb,.mv .bar-c,.mv .front,.mv .cover{transition:opacity .6s,transform 1s cubic-bezier(.3,.7,.2,1),stroke-dashoffset 1.6s ease-in-out}
.mv .card,.mv .pt{transition-delay:calc(var(--i) * 90ms)}
.mv .cover{transition:transform 3.2s linear}
.mv:not(.s1) .k1,.mv:not(.s2) .k2,.mv:not(.s3) .k3,.mv:not(.s4) .k4,.mv:not(.s5) .k5,.mv:not(.s6) .k6,.mv.s5 .out5{opacity:0}
.uc1:not(.s1) .card{opacity:0;transform:translate(-40px,0)}
.uc1.s3 .card{transform:translate(399px,var(--a))}
.uc1.s5 .card.c5{transform:translate(399px,-96px)}
.uc1.s6 .bar-c{transform:scaleX(.5)}
.uc2:not(.s1) .pt{opacity:0}
.uc2:not(.s2) .pt{transform:translate(var(--gx),var(--gy))}
.uc2:not(.s2) .eb{transform:none}
.uc2:not(.s3) .front{stroke-dashoffset:1}
.uc2.s4 .pt.d{opacity:.2}
.uc4:not(.s3) .cover{transform:none}
.mv .k2 circle{transition:opacity .4s}

.mv-bar{display:flex;align-items:center;gap:12px;margin:10px 0 0;font:13px/1 var(--mono);color:var(--muted)}
.mv-bar button{font:500 12.5px/1 var(--mono);border:1px solid var(--rule);background:#fff;padding:7px 11px;cursor:pointer;color:var(--ink-2)}
.mv-bar button:hover{border-color:var(--ink)}
.mv-bar:not(.on){display:none}
.mv-steps{margin:12px 0 0;padding-left:1.5em;font-size:15px;line-height:1.5;color:var(--muted);display:grid;gap:4px}
.mv-steps li{transition:color .3s}
.mv-steps.on li{cursor:pointer}
.mv-steps li.now{color:var(--ink)}
.mv-steps:not(.on) li{color:var(--ink-2)}

.uc3 .grid{stroke:var(--rule)}
.uc3 .tick{font-size:13px;fill:var(--muted)}
.uc3 .b0{fill:var(--faint)}.uc3 .b1{fill:var(--ink-2)}.uc3 .b2{fill:var(--accent)}.uc3 .b3{fill:#a7a7b0}
.uc3 .brk{stroke:var(--ink-2);stroke-width:1.5}
.uc3 .val{font:500 15px var(--mono);fill:var(--ink)}
.uc3 .nm{font-size:14.5px}
.uc3 .cost{font:500 16px var(--mono);fill:var(--ink)}
.uc3 .call{font:500 15px var(--sans);fill:var(--accent)}
.uc3 .arr{fill:none;stroke:var(--accent);stroke-width:2}
.uc3 .arr-h{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:480px){.mv-steps{font-size:14.5px}}
/* phones (10-26 draft 2): the figures scale to about two thirds, so their text is set larger */
@media(max-width:600px){
  .mv .hd{font-size:17px}.mv .row{font-size:17px}.mv .card text{font-size:18px}.mv .sub{font-size:17px}.mv .lb{font-size:17px}.mv .dl{font-size:15px}
  .uc4 .chip+text{font-size:15px}
  .uc3 .tick{font-size:15px}.uc3 .val{font-size:17px}.uc3 .nm{font-size:16px}.uc3 .cost{font-size:18px}.uc3 .call{font-size:17px}
}