/* rd3 article visuals (rd3-visuals.php): the motion hero in the article's head, and the blocks that lead each section.
   Built on rd3-ex.css (exhibits, chart primitives) and rd3-viz.css (track-record and turning-point cards). */

/* The head: text left, the hero right on a wide screen; the hero under the byline on a phone */
@media (min-width:60rem){.rd3 .art-head.has-mh .wide{grid-template-columns:minmax(0,1fr) minmax(0,28rem)}}
@media (min-width:75rem){.rd3 .art-head.has-mh .wide{grid-template-columns:minmax(0,1fr) minmax(0,31rem);gap:4rem}}
.rd3 .art-head.has-mh h1{font-size:clamp(2.2rem, 1.5rem + 2.4vw, 3.5rem)}

/* The motion hero. Without .run (no JavaScript, reduced motion, the share image) it shows its last frame. */
.rd3 .mh{display:grid;grid-template-areas:"top" "st" "cap" "src";margin-top:2rem;padding:1rem 1.05rem .95rem;border:1px solid var(--line-d);border-radius:20px;background:rgba(255,255,255,.04);color:var(--on-navy);container-type:inline-size}
@media (min-width:60rem){.rd3 .art-head.has-mh .mh{margin-top:0}}
.rd3 .mh-top{grid-area:top;display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem}
.rd3 .mh-k span{display:block}
.rd3 .mh-k span:first-child{font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--teal)}
.rd3 .mh-k span+span{margin-top:.3rem;font-size:1.02rem;font-weight:600;line-height:1.3;letter-spacing:-.01em}
.rd3 .mh-re{flex:none;font:600 .78rem/1 var(--font);color:var(--on-navy);background:transparent;border:1px solid var(--line-d);border-radius:999px;padding:.45rem .8rem;min-height:2rem;cursor:pointer}
.rd3 .mh-re:hover{border-color:var(--teal)}
.rd3 .mh-re:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.rd3 .mh-st{grid-area:st;margin-top:.9rem}
.rd3 .mh-cap,.rd3 .mh-end{grid-area:cap;margin-top:.85rem;padding-left:.7rem;border-left:3px solid rgba(255,255,255,.2);min-height:2.7em}
.rd3 .mh-cap{display:grid;font-size:.9rem;line-height:1.4;color:var(--on-navy-2)}
.rd3 .mh-cap p{grid-area:1/1;margin:0}
.rd3 .mh-end{font-size:.95rem;font-weight:600;line-height:1.4;color:var(--on-navy);border-left-color:var(--teal)}
.rd3 .mh-src{grid-area:src;margin-top:.55rem!important;font-size:.72rem;color:#8d99ab}
.rd3 .mh-src:empty{display:none}

/* A flow: the document, and the steps it passes through */
.rd3 .mh-flow .mh-st{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:.75rem}
@container (max-width:16rem){.rd3 .mh-flow .mh-st{grid-template-columns:minmax(0,1fr)}}
.rd3 .mh-doc{align-self:start;padding:.7rem .75rem .75rem;border-radius:12px;background:#fff;color:var(--ink);box-shadow:0 18px 40px -24px rgba(0,0,0,.8)}
.rd3 .mh-dt{font-size:.86rem;font-weight:600;line-height:1.25}
.rd3 .mh-dm{margin-top:.15rem!important;font-size:.7rem;color:var(--muted)}
.rd3 .mh-doc dl{display:grid;gap:.45rem;margin:.6rem 0 0;padding-top:.55rem;border-top:1px solid var(--line)}
.rd3 .mh-doc dt{font-size:.62rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.rd3 .mh-doc dd{display:grid;justify-items:start;margin:.1rem 0 0}
.rd3 .mh-doc dd span{grid-area:1/1;margin-left:-.35rem;padding:.08rem .35rem;border-radius:6px;font-size:.92rem;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.3}
.rd3 .mh-doc .r-bad{color:#b4483c;background:#fbeae7}
.rd3 .mh-doc .r-ok{color:var(--teal-text);background:var(--tag-bg)}
.rd3 .mh-doc .r-wait{color:#8a5a00;background:#fbf1dc}
.rd3 .mh-steps{position:relative;display:grid;grid-auto-rows:1fr;gap:.35rem}
.rd3 .mh-steps li{position:relative;display:grid;grid-template-columns:.95rem minmax(0,1fr);column-gap:.55rem;align-content:center;padding:.42rem .55rem;border-radius:10px;background:rgba(255,255,255,.03)}
.rd3 .mh-steps li::before{content:"";position:absolute;left:calc(.55rem + .475rem - 1px);top:50%;width:2px;height:calc(100% + .35rem);background:rgba(255,255,255,.12)}
.rd3 .mh-steps li:nth-last-child(2)::before,.rd3 .mh-steps .mh-tok::before{display:none}
.rd3 .mh-steps i{position:relative;z-index:1;grid-row:1/span 3;align-self:center;width:.95rem;height:.95rem;border-radius:50%;border:2px solid var(--on-navy-2);background:var(--navy)}
.rd3 .mh-steps b{font-size:.84rem;font-weight:600;line-height:1.25}
.rd3 .mh-steps small{font-size:.72rem;line-height:1.3;color:var(--on-navy-2)}
.rd3 .mh-steps em{justify-self:start;margin-top:.25rem;padding:.16rem .45rem;border-radius:999px;font-size:.68rem;font-style:normal;font-weight:600;line-height:1.2}
.rd3 .mh-steps .r-ok i{border-color:var(--teal);background:var(--teal)}
.rd3 .mh-steps .r-ok em{background:rgba(95,211,192,.16);color:var(--teal)}
.rd3 .mh-steps .r-bad{background:rgba(232,131,122,.12);box-shadow:inset 0 0 0 1px rgba(232,131,122,.5)}
.rd3 .mh-steps .r-bad i{border-color:#e8837a;background:#e8837a}
.rd3 .mh-steps .r-bad em{background:rgba(232,131,122,.2);color:#f6c0b9}
.rd3 .mh-steps .r-wait i{border-color:#f0c674;background:#f0c674}
.rd3 .mh-steps .r-wait em{background:rgba(240,190,110,.16);color:#f3cf8f}
.rd3 .mh-steps .r-ok.in::before,.rd3 .mh:not(.run) .mh-steps .r-ok::before{background:rgba(95,211,192,.45)}
.rd3 .mh-steps .mh-tok{position:absolute;padding:0;background:none;left:calc(.55rem + .475rem - .7rem);top:calc((var(--i) + .5) * (100% + .35rem) / var(--n) - .175rem - .7rem);width:1.4rem;height:1.4rem;border-radius:50%;border:2px solid var(--teal);opacity:0;pointer-events:none}

/* Bars that build, then change */
.rd3 .mh-sk{display:grid;justify-items:start}
.rd3 .mh-sk span{grid-area:1/1;padding:.25rem .6rem;border-radius:999px;background:rgba(95,211,192,.14);color:var(--teal);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.rd3 .mh-bars{display:grid;gap:.75rem;margin-top:.85rem}
.rd3 .mh-bars li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.3rem .75rem;align-items:baseline}
.rd3 .mh-bl{font-size:.88rem;color:var(--on-navy-2)}
.rd3 .mh-bv{display:grid;justify-items:end}
.rd3 .mh-bv b{grid-area:1/1;font-size:.95rem;font-weight:600;font-variant-numeric:tabular-nums}
.rd3 .mh-bv b.neg{color:#f2a097}
.rd3 .mh-bt{grid-column:1/-1;position:relative;height:1rem;border-radius:5px;background:rgba(255,255,255,.08)}
.rd3 .mh-bt i{position:absolute;top:0;bottom:0;left:var(--lf);width:var(--wf);border-radius:5px;background:var(--teal)}
.rd3 .mh-bt i.neg{background:#e8837a}
.rd3 .mh-bt[style]::after{content:"";position:absolute;top:-.2rem;bottom:-.2rem;left:var(--z);width:1px;background:rgba(255,255,255,.35)}
.rd3 .mh:not(.run) .mh-bars .hi .mh-bl,.rd3 .mh.done .mh-bars .hi .mh-bl{color:var(--teal);font-weight:600}

/* Playing: elements come in (data-k) and leave (data-x) beat by beat */
.rd3 .mh:not(.run) [data-x]{visibility:hidden}
@media (prefers-reduced-motion:no-preference){
  .rd3 .mh [data-k],.rd3 .mh [data-x],.rd3 .mh-steps em,.rd3 .mh-steps i,.rd3 .mh-steps li::before{transition:opacity .45s var(--ease-out),transform .45s var(--ease-out),background-color .45s var(--ease-out),border-color .45s var(--ease-out),box-shadow .45s var(--ease-out)}
  .rd3 .mh.run [data-k]:not(.in),.rd3 .mh.run [data-x]:not(.in){opacity:0;transform:translateY(5px)}
  /* Captions take turns: the old one leaves in .15s and the new one waits .15s for it, so two never show at once (as worksbetter.ai) */
  .rd3 .mh.run .mh-cap p:not(.in),.rd3 .mh.run .mh-end:not(.in){transition-duration:.15s;transition-delay:0s}
  .rd3 .mh.run .mh-cap p.in,.rd3 .mh.run .mh-end.in{transition-delay:.15s}
  .rd3 .mh.run .mh-doc:not(.in){transform:translateX(-14px)}
  .rd3 .mh.run .mh-steps li[data-k]:not(.in){opacity:.4;transform:none;background:rgba(255,255,255,.03);box-shadow:none}
  .rd3 .mh.run .mh-steps li:not(.in) i{border-color:var(--on-navy-2);background:var(--navy)}
  .rd3 .mh.run .mh-steps li:not(.in) em{opacity:0;transform:scale(.9)}
  .rd3 .mh.run .mh-steps li.cur{box-shadow:inset 0 0 0 1px rgba(95,211,192,.6)}
  .rd3 .mh.run .mh-steps li.r-bad.cur{box-shadow:inset 0 0 0 1px rgba(232,131,122,.8)}
  .rd3 .mh-tok{transition:top .5s var(--ease-in-out),opacity .3s var(--ease-out)}
  .rd3 .mh.run .mh-steps .in~.mh-tok{opacity:1}
  .rd3 .mh.run.done .mh-steps .mh-tok{opacity:0}
  .rd3 .mh-bt i{transition:left .6s var(--ease-in-out),width .6s var(--ease-in-out),background-color .45s var(--ease-out)}
  .rd3 .mh.run .mh-bt i{width:0}
  .rd3 .mh.run[data-b="1"] .mh-bt i{left:var(--l1);width:var(--w1);background:var(--c1)}
  .rd3 .mh.run[data-b="2"] .mh-bt i{left:var(--l2);width:var(--w2);background:var(--c2)}
  .rd3 .mh.run[data-b="3"] .mh-bt i{left:var(--l3);width:var(--w3);background:var(--c3)}
  .rd3 .mh.run[data-b="4"] .mh-bt i{left:var(--l4);width:var(--w4);background:var(--c4)}
  .rd3 .mh.run[data-b="5"] .mh-bt i{left:var(--l5);width:var(--w5);background:var(--c5)}
}

/* Blocks between the sections */
.rd3 .vx{margin:1.1rem 0 1.4rem}
.rd3 .acc>.wf,.rd3 .acc>.tool{margin-bottom:1.4rem}
.rd3 .vx-numbers,.rd3 .vx-ideas{padding:0;background:none;border:0}
.rd3 .vx .ex-t{font-size:clamp(1.15rem, 1.05rem + .45vw, 1.4rem);line-height:1.25;letter-spacing:-.015em;max-width:30em}
.rd3 .vx-svg{margin-top:1.1rem}
.rd3 .vx-svg text{font-size:13px}
.rd3 .vx-svg .vx-tr{fill:var(--bg-b)}
.rd3 .xv .nd-c{fill:#d0675a}
@media (max-width:39.99rem){.rd3 .vx-svg .vx-xl.o{display:none}}
.rd3 .vx-leg{display:flex;flex-wrap:wrap;gap:.4rem 1rem;margin-top:.9rem;font-size:.8rem;color:var(--ink-2)}
.rd3 .vx-leg i{display:inline-block;width:16px;margin-right:.4rem;vertical-align:middle;border-top:2.5px solid var(--teal-text)}
.rd3 .vx-leg i.ln{border-color:var(--ink)}
.rd3 .vx-leg i.ln-c{border-top-style:dashed;border-color:#d0675a}
.rd3 .vx-figs{margin-top:.8rem;font-size:.85rem}
.rd3 .vx-figs summary{cursor:pointer;font-weight:600;color:var(--teal-text)}
.rd3 details.vx-figs>summary::after{margin-left:.4rem;font-size:1rem}
.rd3 details[open].vx-figs>summary::after{content:"\2212"}
.rd3 .vx-figs table{width:100%;margin-top:.5rem;border-collapse:collapse}
.rd3 .vx-figs th,.rd3 .vx-figs td{padding:.35rem .5rem;border-bottom:1px solid var(--line);text-align:left;font-weight:500}
.rd3 .vx-figs td{text-align:right;font-variant-numeric:tabular-nums}
.rd3 .vx-sl{display:grid;gap:.6rem;margin-top:1.1rem}
@media (min-width:40rem){.rd3 .vx-sl{grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}}
.rd3 .vx-sl li{padding:.85rem .9rem 1rem;border-radius:14px;background:var(--bg-b);border:1px solid var(--line);border-top:3px solid var(--teal-text)}
.rd3 .vx-sl .n{font-size:.75rem;font-weight:600;color:var(--teal-text)}
.rd3 .vx-sl b{display:block;margin-top:.3rem;font-size:.98rem;line-height:1.3;color:var(--ink)}
.rd3 .vx-sl p{margin-top:.3rem!important;font-size:.88rem;line-height:1.45;color:var(--ink-2)}
.rd3 .vx-trk{grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr))!important;margin-top:1.1rem}
.rd3 .vx-c{margin-top:.75rem!important;padding-top:.55rem;border-top:1px solid var(--line);font-size:.84rem;line-height:1.45;color:var(--muted)}
.rd3 .vx-turns{margin-top:1.1rem}
@media (min-width:48rem){.rd3 .vx-turns{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rd3 .vx-turns p{display:block}
.rd3 .vx-turns .xv text{font-size:13px}
.rd3 .vx-turns h3{font-size:1.08rem}
.rd3 .vx-turns .n{margin-top:.9rem}
.rd3 .vx-turns figcaption{min-height:0}
.rd3 .xv .vx-ck{fill:var(--tag-bg)}
.rd3 .xv .vx-ck.bad{fill:#fbeae7}
.rd3 .xv .vx-mk{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rd3 .xv .vx-ch{fill:var(--tag-bg);stroke:var(--teal-text);stroke-width:1}
.rd3 .vx-tw{margin-top:1.1rem}
.rd3 .vx-tb{width:100%;border-collapse:collapse;font-size:.9rem}
.rd3 .vx-tb thead th{padding:0 .6rem .6rem;border-bottom:1px solid var(--line);text-align:left;font-size:.7rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.rd3 .vx-tb tbody th,.rd3 .vx-tb td{padding:.7rem .6rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;line-height:1.4}
.rd3 .vx-tb tbody th{font-weight:600;color:var(--ink)}
.rd3 .vx-tb td{color:var(--ink-2);font-variant-numeric:tabular-nums}
.rd3 .vx-tb .no{color:#b9b5aa}
.rd3 .vx-tb .hi{background:var(--tag-bg);color:var(--teal-text);font-weight:600}
@media (max-width:39.99rem){
  .rd3 .vx-tb thead{display:none}
  .rd3 .vx-tb,.rd3 .vx-tb tbody,.rd3 .vx-tb tr{display:block}
  .rd3 .vx-tb tr{padding:.75rem 0;border-bottom:1px solid var(--line)}
  .rd3 .vx-tb tbody th,.rd3 .vx-tb td{display:flex;justify-content:space-between;gap:1rem;padding:.2rem 0;border:0}
  .rd3 .vx-tb td::before{content:attr(data-l);color:var(--muted);font-weight:500}
  .rd3 .vx-tb td.hi{margin:0 -.4rem;padding:.2rem .4rem;border-radius:6px}
  .rd3 .vx-tb td.no{display:none}
}
.rd3 .vx-cmp{display:grid;gap:.7rem;margin-top:1.1rem}
@media (min-width:40rem){.rd3 .vx-cmp{grid-template-columns:repeat(var(--c),minmax(0,1fr))}}
.rd3 .vx-cmp>div{padding:.9rem 1rem 1rem;border:1px solid var(--line);border-top:3px solid var(--ink);border-radius:14px;background:var(--card)}
.rd3 .vx-cmp h3{font-size:.98rem;line-height:1.3}
.rd3 .vx-cmp ul{display:grid;gap:.4rem;margin-top:.6rem;font-size:.88rem;line-height:1.45;color:var(--ink-2)}
.rd3 .vx-cmp li{position:relative;padding-left:1rem}
.rd3 .vx-cmp li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5}
.rd3 .vx-cmp .t-ok,.rd3 .vx-cmp .t-rule{border-top-color:var(--teal-text)}
.rd3 .vx-cmp .t-bad{border-top-color:#d0675a;background:#fdf6f5}
.rd3 .vx-cmp .t-ai{border-top-color:#3f3a8f}
.rd3 .vx-cmp .t-person{border-top-color:#c98a16}
.rd3 details.more{margin:.2rem 0 1.4rem}
.rd3 details.more>summary{display:inline-flex;gap:.45rem;align-items:center;padding:.3rem 0;font-size:.9rem;font-weight:600;color:var(--teal-text)}
.rd3 details.more>summary::after{font-size:1.1rem}
.rd3 details.more[open]>summary::after{content:"\2212"}
.rd3 details.more .prose{margin-top:.6rem}