/* proc-flow.css — a procedure's path (prefix pr-): the head that stays beside it, the legend, the plum clay track with its
   running light, the clay stars in the three lane materials (gold: Brain Club alone · cream: asks you first, with the gold
   check bubble on its card · plum: only you), each step's paper card with its green "done when" tick, and the gold star of
   what you keep. */
.pr-path-grid{display:grid;grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);gap:clamp(28px,5vw,88px);align-items:start}
.pr-path-head{position:sticky;top:112px}
.pr-path-head .k-sechead{margin-bottom:0}
.pr-path-sec .k-h2{color:var(--plum-600)}
.pr-legend{display:grid;gap:14px;margin-top:30px}
.pr-legend li{display:flex;align-items:center;gap:14px}
.pr-legend .pr-mark{width:48px;height:48px}
.pr-legend .pr-mark-star{width:44px}
.pr-legend b{display:block;font:720 1rem/1.15 var(--display);color:var(--plum-600)}
.pr-legend small{display:block;margin-top:2px;font-size:.875rem;line-height:1.3;color:var(--ink-3)}
.pr-written{padding:22px 24px;border-radius:var(--r-lg);background:var(--k-paper);box-shadow:var(--k-paper-shadow);color:var(--ink-2)}

/* the marks: a clay star seated on a small cream light; the light turns gold when the running light reaches it */
.pr-mark{position:relative;display:grid;place-items:center;flex:none;width:68px;height:68px}
.pr-mark::before{content:"";position:absolute;inset:4px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,250,236,.98) 0%,rgba(255,246,222,.9) 46%,rgba(255,246,222,0) 100%);transition:transform .6s var(--spring),background .5s}
.pr-mark-star{position:relative;width:60px;height:auto;filter:drop-shadow(0 8px 7px rgba(70,8,36,.38));transition:transform .7s var(--spring)}
.pr-mark--tap .pr-mark-star{filter:drop-shadow(0 0 1px rgba(100,8,46,.35)) drop-shadow(0 8px 7px rgba(100,8,46,.38))}
.pr-mark--tap::before{background:radial-gradient(closest-side,rgba(100,8,46,.26) 0%,rgba(100,8,46,.12) 50%,rgba(100,8,46,0) 100%)}
.pr-mark-n{position:absolute;inset-inline-end:-2px;bottom:0;display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;font:800 .72rem/1 var(--display);color:var(--cream-50);background:var(--plum-600);box-shadow:0 0 0 2.5px var(--cream-50),0 4px 8px -3px rgba(60,6,30,.55)}
.pr-mark--keep{width:68px;height:68px}
.pr-mark--keep img{position:relative;width:84px;max-width:none;height:auto;filter:drop-shadow(0 10px 10px rgba(130,70,0,.45));transition:transform .7s var(--spring),filter .7s}
.pr-mark.is-lit::before{transform:scale(1.32);background:radial-gradient(closest-side,rgba(255,240,170,1) 0%,rgba(255,226,122,.85) 44%,rgba(255,214,90,0) 100%)}
.pr-mark.is-lit .pr-mark-star{transform:rotate(14deg) scale(1.08)}
.pr-mark--keep.is-lit img{transform:rotate(14deg) scale(1.12);filter:drop-shadow(0 0 18px rgba(255,236,150,.95)) drop-shadow(0 10px 10px rgba(130,70,0,.45))}

/* the track: a plum clay rail from the first star to the last; the light runs down it as you read */
.pr-path{position:relative;--tx:34px;--t0:40px;--th:0px;--lit:0}
.pr-track{position:absolute;inset-inline-start:calc(var(--tx) - 8px);top:var(--t0);width:16px;height:var(--th);border-radius:999px;background:linear-gradient(90deg,#3e0720 0%,#7a0f44 30%,#a3205f 48%,#8a1550 62%,#4a0a28 100%);box-shadow:inset 0 3px 3px rgba(255,255,255,.16),inset 0 -3px 4px rgba(20,0,10,.45),0 8px 14px -6px rgba(60,6,30,.45)}
.pr-track::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:.4;mix-blend-mode:screen;background-image:var(--k-grain-light)}
.pr-track-lit{position:absolute;inset-inline-start:4px;inset-inline-end:4px;top:0;height:100%;border-radius:999px;transform-origin:50% 0;transform:scaleY(var(--lit));background:linear-gradient(180deg,rgba(255,232,140,.55),#ffe27a 60%,#fff3c4);box-shadow:0 0 12px 2px rgba(255,214,90,.7)}
.pr-steps{position:relative;display:grid;gap:clamp(14px,1.8vw,22px)}
.pr-step{display:grid;grid-template-columns:68px minmax(0,1fr);gap:clamp(14px,2vw,26px);align-items:start}
.pr-step>.pr-mark{margin-top:12px}

/* the card of a step */
.pr-card{position:relative;min-width:0;padding:20px 26px 21px;border-radius:30px;background:var(--k-paper);box-shadow:var(--k-paper-shadow)}
.pr-card::before{content:"";position:absolute;inset-inline-start:-7px;top:34px;width:18px;height:18px;border-radius:4px;background:#fffaf0;transform:rotate(45deg);box-shadow:-3px 3px 5px -3px rgba(90,40,10,.25)}
.pr-step--tap .pr-card{box-shadow:var(--k-paper-shadow),0 0 0 2.5px rgba(250,201,63,.95),0 18px 36px -18px rgba(200,130,0,.55)}
.pr-step--tap .pr-card::before{box-shadow:-3px 3px 0 -.5px rgba(250,201,63,.95)}
.pr-card-yes{position:absolute;inset-inline-end:-14px;top:-20px;width:58px;height:auto;--r:10deg;transform:rotate(10deg);filter:drop-shadow(0 10px 9px rgba(130,70,0,.38));animation:k-float 6.5s ease-in-out infinite}
.pr-card-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.pr-card-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--plum-600);background:rgba(100,8,46,.07)}
.pr-card-ic .pb-i{width:16px;height:16px;stroke-width:2}
.pr-card-n{font:650 .7rem/1 var(--display);letter-spacing:.18em;text-transform:uppercase;color:var(--plum-500)}
.pr-who-l{display:inline-flex;align-items:center;gap:7px;margin-inline-start:4px;font:600 .84rem/1 var(--text);color:var(--ink-3)}
.pr-who-l img{width:20px;height:20px}
.pr-who-l .pb-i{width:16px;height:16px;color:var(--plum-500);stroke-width:2}
.pr-card-t{margin-top:9px;padding-inline-end:24px;font:760 clamp(1.18rem,1.6vw,1.36rem)/1.15 var(--display);letter-spacing:-.02em;color:var(--plum-600)}
.pr-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.pr-done{display:flex;align-items:flex-start;gap:11px;margin-top:12px;font-size:.98rem;line-height:1.52;color:var(--ink-2)}
.pr-done b{font-weight:650;color:var(--plum-600)}
.pr-tick{width:22px;height:22px;flex:none;margin-top:1px;border-radius:50%;background:#2f9a62 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.500l4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 3px rgba(0,40,20,.25),0 4px 7px -3px rgba(20,90,50,.55)}
.pr-note{display:flex;align-items:flex-start;gap:10px;margin-top:10px;padding:10px 13px;border-radius:16px;font-size:.89rem;line-height:1.48;color:var(--ink-2);background:rgba(100,8,46,.05)}
.pr-note .pb-i{width:17px;height:17px;flex:none;margin-top:1px;color:var(--plum-500);stroke-width:2}
.pr-note--rule{background:rgba(196,80,47,.08)}
.pr-note--rule .pb-i{color:#a2391d}
.pr-ref{font-weight:650;color:var(--plum-500);text-decoration:underline;text-decoration-color:rgba(163,31,98,.35);text-underline-offset:3px}
.pr-ref:hover{text-decoration-color:currentColor}
.pr-code{padding:1px 6px;border-radius:6px;font:500 .84em/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--plum-700);background:rgba(100,8,46,.07);overflow-wrap:anywhere}
.pr-use{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding-block:8px; padding-inline:10px 15px;border-radius:999px;text-decoration:none;font:650 .9rem/1.2 var(--display);color:var(--plum-600);background:var(--cream-200);box-shadow:inset 0 1px 0 #fff;transition:transform .35s var(--spring),background .2s}
.pr-use .pb-i{width:17px;height:17px;flex:none;stroke-width:2.2}
.pr-use:hover{transform:translateX(3px);background:var(--gold-100)}
/* what you keep: gold clay, the last mark the big star */
.pr-card--keep{background:var(--k-grain),var(--k-gold-clay);box-shadow:var(--k-gold-shadow),0 24px 40px -24px rgba(130,70,0,.55)}
.pr-card--keep::before{background:#fcd453;box-shadow:none}
.pr-card--keep .pr-card-t{margin-top:0;color:var(--plum-700)}
.pr-keep{margin-top:8px;font-size:1rem;line-height:1.5;color:var(--plum-700)}

@media (max-width:1020px){
  .pr-path-grid{grid-template-columns:minmax(0,1fr)}
  .pr-path-head{position:static}
  .pr-legend{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
}
@media (max-width:640px){
  .pr-step{grid-template-columns:50px minmax(0,1fr);gap:12px}
  .pr-mark{width:50px;height:50px}
  .pr-mark-star{width:44px}
  .pr-step>.pr-mark{margin-top:10px}
  .pr-mark-n{min-width:21px;height:21px;font-size:.6875rem;inset-inline-end:-4px}
  .pr-mark--keep img{width:62px}
  .pr-track{width:12px;inset-inline-start:calc(var(--tx) - 6px)}
  .pr-track-lit{inset-inline-start:3px;inset-inline-end:3px}
  .pr-card{padding:16px 18px 17px;border-radius:24px}
  .pr-card::before{top:26px}
  .pr-card-yes{width:46px;inset-inline-end:-8px;top:-16px}
  .pr-done{font-size:.94rem}
}
@media (prefers-reduced-motion:reduce){.pr-mark::before,.pr-mark-star,.pr-mark--keep img,.pr-use{transition:none}.pr-mark.is-lit .pr-mark-star,.pr-use:hover,.pr-mark--keep.is-lit img{transform:none}.pr-card-yes{animation:none}}