/* Interactive flow map (flowmap.js + the markup written by build_flowmap.py or flowmap.php).
   Animation is transform and opacity only, and all of it stands down for prefers-reduced-motion.
   Three states: no JavaScript (plain numbered list, every explanation visible), .sm-js (list you can step through),
   .sm-js.sm-wide (canvas with pan, zoom and draggable steps).

   Tokens. Each --sm-* value falls back to the host page's token of the same name (--ink, --paper ...) and then
   to the "Control Room" default, so the map matches slicklab.digital untouched and still stands alone elsewhere.
   To re-brand, set the --sm-* values on .sm; nothing else needs to change. */
.sm{
  --sm-ink:var(--ink,#121311);--sm-paper:var(--paper,#F8F6F0);--sm-bone:var(--bone,#EFECE4);--sm-rule:var(--rule,#CFCABC);
  --sm-signal:var(--signal,#B8975A);--sm-sig-deep:var(--sig-deep,#7A5F2A);--sm-teal:var(--teal,#0B8F89);--sm-teal-soft:var(--teal-soft,#7FD1C9);
  --sm-t2:var(--t2,#2A2C28);--sm-t3:var(--t3,#4A4C46);--sm-t4:var(--t4,#5E6058);--sm-g3:var(--g3,#8E9088);--sm-dk:var(--dk,#3A3C37);
  --sm-ease:var(--ease,cubic-bezier(.2,.8,.2,1));
  --sm-f-disp:var(--f-disp,'Bricolage Grotesque',Georgia,serif);
  --sm-f-mono:var(--f-mono,'Geist Mono',ui-monospace,'SFMono-Regular',Menlo,monospace);
  margin-top:32px;--c:var(--sm-ink);color:var(--sm-ink)}
.sm,.sm *,.sm *::before,.sm *::after{box-sizing:border-box}
.sm-mono{font-family:var(--sm-f-mono);letter-spacing:.08em;text-transform:uppercase}
.sm-disp{font-family:var(--sm-f-disp);font-weight:800;letter-spacing:-.04em;line-height:.92}
.sm-tag{display:inline-block;font-size:11px;border:1.5px solid var(--sm-ink);padding:5px 9px}
.sm-bar{display:none;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.sm-js .sm-bar{display:flex}
.sm-chip{min-height:40px;padding:0 14px;border:2px solid var(--sm-ink);background:var(--sm-paper);color:var(--sm-ink);font-size:12px;cursor:pointer;transition:transform .2s var(--sm-ease)}
.sm-chip:hover{transform:translate(-1px,-1px)}
.sm-chip[aria-pressed="true"]{background:var(--sm-ink);color:var(--sm-paper)}
.sm-play{background:var(--sm-signal);margin-left:auto}
.sm-chip:focus-visible,.sm-btn:focus-visible,.sm-tools button:focus-visible{outline:3px solid var(--sm-teal);outline-offset:3px}

.sm-view{position:relative;background-color:transparent;background-image:none}
.sm-nodes{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:sm}
.sm-node{counter-increment:sm}
.sm-t-entry{--c:var(--sm-signal)}.sm-t-rule{--c:var(--sm-ink)}.sm-t-ai{--c:var(--sm-teal)}.sm-t-auto{--c:var(--sm-teal-soft)}
.sm-t-person{--c:var(--sm-sig-deep)}.sm-t-store{--c:var(--sm-g3)}.sm-t-end{--c:var(--sm-dk)}
.sm-btn{display:flex;flex-direction:column;gap:4px;width:100%;text-align:left;background:var(--sm-paper);color:var(--sm-ink);border:2px solid var(--sm-ink);border-top:7px solid var(--c);box-shadow:4px 4px 0 var(--sm-ink);padding:10px 12px 12px;font:inherit;cursor:pointer;transition:transform .28s var(--sm-ease),opacity .28s}
.sm-type{font-size:10px;color:var(--sm-t4)}
.sm-type::before{content:counter(sm,decimal-leading-zero) " · "}
.sm-title{font-size:20px;line-height:1}
.sm-short{font-size:13px;line-height:1.35;color:var(--sm-t3)}
.sm-detail{margin:10px 0 0;max-width:68ch;color:var(--sm-t2)}
.sm-js .sm-detail{display:none}
.sm-js .sm-node.is-active .sm-detail,.sm-js.sm-open:not(.sm-wide) .sm-detail{display:block}
.sm-edges{display:none}

/* focus states, shared by list and canvas */
.sm.has-focus .sm-node:not(.is-lit) .sm-btn{opacity:.28}
.sm-node.is-active .sm-btn{box-shadow:6px 6px 0 var(--sm-signal)}
.sm-wide .sm-node.is-active .sm-btn{transform:scale(1.05)}

.sm-insp{display:none}

/* ---------- canvas ---------- */
.sm-wide .sm-view{height:min(clamp(440px,64vh,580px),calc(var(--sm-ch,510px) + 48px));border:2px solid var(--sm-ink);background-color:var(--sm-bone);background-image:radial-gradient(var(--sm-rule) 1.5px,transparent 1.6px);background-size:24px 24px;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none}
.sm-wide .sm-view.is-panning{cursor:grabbing}
.sm-wide .sm-canvas{position:absolute;left:0;top:0;width:var(--sm-cw,980px);height:var(--sm-ch,510px);transform-origin:0 0;will-change:transform}
.sm-wide .sm-edges{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.sm-wide .sm-nodes{display:block}
.sm-wide .sm-node{position:absolute;left:0;top:0;width:150px}
.sm-wide .sm-btn{cursor:pointer}
.sm-wide .sm-node.is-drag .sm-btn{cursor:grabbing;transition:none}
.sm-wide .sm-type::before{content:none}
.sm-wide .sm-title{font-size:18px}
.sm-wide .sm-node.is-active .sm-detail,.sm-wide .sm-detail{display:none}
.sm-edge{fill:none;stroke:var(--sm-g3);stroke-width:2;vector-effect:non-scaling-stroke;transition:opacity .28s;marker-end:url(#sm-arr)}
.sm-edge.alt{stroke-dasharray:6 6}
.sm-mk{fill:var(--sm-g3)}.sm-mk-on{fill:var(--sm-ink)}
.sm.has-focus .sm-edge{opacity:.18}
.sm.has-focus .sm-edge.on{opacity:1;stroke:var(--sm-ink);stroke-width:3;marker-end:url(#sm-arr-on)}
.sm-dot{position:absolute;left:0;top:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--sm-signal);border:2px solid var(--sm-ink);opacity:0;pointer-events:none}
.sm-dot.go{animation:sm-pop .9s var(--sm-ease)}
@keyframes sm-pop{0%{opacity:.9;transform:var(--at) scale(.4)}100%{opacity:0;transform:var(--at) scale(3.2)}}
.sm-tools{position:absolute;right:10px;top:10px;display:flex;gap:6px}
.sm-tools[hidden]{display:none}
.sm-tools button{min-width:40px;min-height:40px;padding:0 10px;border:2px solid var(--sm-ink);background:var(--sm-paper);color:var(--sm-ink);font-size:12px;cursor:pointer}
.sm-wide .sm-insp{display:grid;gap:8px;justify-items:start;margin-top:18px;padding:20px 22px;background:var(--sm-paper);border:2px solid var(--sm-ink);box-shadow:6px 6px 0 var(--sm-ink);min-height:132px}
.sm-wide .sm-insp[hidden]{display:none}
.sm-insp h3{font-size:26px;margin:0;font-family:var(--sm-f-disp);font-weight:800;letter-spacing:-.04em;line-height:.92}
.sm-insp p{margin:0;max-width:72ch;color:var(--sm-t2)}

@media (prefers-reduced-motion:reduce){
  .sm-btn,.sm-chip,.sm-edge{transition:none}
  .sm-node.is-active .sm-btn{transform:none}
  .sm-dot{display:none}
}
@media print{.sm-bar,.sm-tools,.sm-insp{display:none!important}.sm-js .sm-detail{display:block}}