/* craft.css — bento card 2 ("pixel craft"), the live session (owner's pick 2026-10-26: craft lab R4-A2b-b, replacing the pencil).
   An agent (violet pixel cursor) drags out the dashboard's six parts as wireframe rectangles, never more than two ahead; Lukas
   (ink pixel cursor + his name tag) selects each drafted part and wipes it finished. Order: a clockwise spiral into the chart,
   so his last wipe runs along the "246" line and his live cursor lands on the cursor baked into dash-finished.webp (Figma
   1929:809754, panel x 178.38 y 72.12) and hands over to it: the resting frame IS the finished card, no third cursor. Two tiny
   cursor-free patches (assets/craft/patch-*.webp, Figma 1929:809624 / 1939:896672) hide the baked cursor until then.
   Top-left: who is in the file (Lukas + one agent dot); a ring lights while each works, a blue check at the hand-off.
   Hover a part (tap on touch) to make it the next one. Script: js/craft-live.js (one rAF loop, paused offscreen and in hidden tabs).
   Lab source: _sandbox/craft-lab/R4-A2b-b-live-session-presence.html. Scoped to .craft-live. */
.craft-live { position: absolute; inset: 0; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.craft-live img { -webkit-user-drag: none; }
.cl-stage { position: absolute; left: 50%; bottom: 0; width: 550px; height: 360px; translate: -50% 0;
            --s: 1.12; --px: 48.446px; --py: 78.88px; }               /* desktop: the panel at 1.12, centred; its visible 251 px = the finished image */
@media (max-width: 820px) { .cl-stage { zoom: .8; --s: .93; --px: 86.88px; --py: 80px; } }   /* phones: a 93% panel, centred with ~24px side air and ~26px below (was edge to edge, Oct 26) */   /* phones/tablets: the 550 × 360 stage at .8 (the 335 × 288 tile): 1×, centred */
.cl-panel, .cl-ov { position: absolute; left: var(--px); top: var(--py); transform-origin: 0 0; transform: scale(var(--s)); }
.cl-panel { width: 404.56px; height: 265.44px; border-radius: 14px; overflow: hidden; background: #fff;
            box-shadow: 0 1.8px 1.5px rgba(30,39,46,.02), 0 4.4px 3.5px rgba(30,39,46,.028), 0 8.3px 6.6px rgba(30,39,46,.035),   /* recipe C, as on the live card */
                        0 14.7px 11.8px rgba(30,39,46,.042), 0 27.6px 22.1px rgba(30,39,46,.05), 0 66px 52.8px rgba(30,39,46,.07); }
.cl-wf, .cl-fin { position: absolute; inset: 0; clip-path: polygon(0 0, 0 0, 0 0); }   /* one layer per part, revealed by its clip */
.cl-panel img { position: absolute; left: 0; top: 0; width: 404.56px; max-width: none; display: block; }
.cl-wf > img { height: 265.44px; }
.cl-fin > img, .cl-panel > .cl-full { height: 251px; }
.cl-panel > .cl-full { opacity: 0; }
.cl-wf > .cl-patch  { left: 176.287px; top: 70.939px; width: 13.33px; height: 18.318px; }   /* webp px 529,213 · 40 × 55 */
.cl-fin > .cl-patch { left: 176.287px; top: 70.667px; width: 13.996px; height: 19px; }      /* webp px 529,212 · 42 × 57 */
/* overlays in panel coordinates, above the panel so its radius never clips a handle */
.cl-ov { width: 0; height: 0; pointer-events: none; }
.cl-hov, .cl-sel { position: absolute; left: 0; top: 0; opacity: 0; outline: 1px solid #266BE1; outline-offset: -.5px; }
.cl-hov.a { outline-color: #642BE1; }
.cl-sel i { position: absolute; width: 5px; height: 5px; box-sizing: border-box; background: #fff; border: 1px solid #266BE1; }
.cl-sel i:nth-child(1) { left: -2.5px; top: -2.5px; }  .cl-sel i:nth-child(2) { right: -2.5px; top: -2.5px; }
.cl-sel i:nth-child(3) { left: -2.5px; bottom: -2.5px; } .cl-sel i:nth-child(4) { right: -2.5px; bottom: -2.5px; }
.cl-band { position: absolute; left: 0; top: 0; opacity: 0; }
.cl-band i { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #642BE1; }
.cl-band .f { width: 100px; height: 100px; background: rgba(100,43,225,.06); }
.cl-band .h { width: 100px; height: 1px; } .cl-band .v { width: 1px; height: 100px; }
/* presence (tile space, not the stage: it stays 24 px from the corner on every tile size) */
.cl-who { position: absolute; left: 24px; top: 24px; display: flex; gap: 8px; pointer-events: none; }
.cl-face { position: relative; width: 24px; height: 24px; border-radius: 50%; }
.cl-face > b { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.cl-me > b { background: #1d1d26; }
.cl-me > b img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-me > b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(144.38deg, rgba(255,255,255,.2) 17.6%, rgba(0,0,0,.2) 79.13%); }   /* as card 4's avatar */
.cl-bot > b { display: grid; place-items: center; background: linear-gradient(168deg, #642BE1, #A485F7); }
.cl-bot svg { width: 10px; height: 10px; display: block; } .cl-bot circle { fill: #fff; }
.cl-ring { position: absolute; inset: -3.5px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #266BE1; opacity: 0; }   /* the cursor's colour */
.cl-bot .cl-ring { box-shadow: inset 0 0 0 1.5px #642BE1; }
.cl-ok { position: absolute; right: -4px; bottom: -4px; width: 12px; height: 12px; border-radius: 50%; background: #266BE1; box-shadow: 0 0 0 1.5px #f2f2f2; opacity: 0; }
.cl-ok svg { display: block; width: 12px; height: 12px; } .cl-ok path { fill: none; stroke: #fff; stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; }
/* multiplayer cursors: the dashboard's own pixel cursor (Figma 1929:809754), ink for Lukas, violet for the agent */
.cl-cur { position: absolute; left: 0; top: 0; pointer-events: none; will-change: transform; }
.cl-arrow { position: absolute; left: -.0962px; top: -.1212px; width: 10.6639px; height: 16.6667px; transform-origin: .0962px .1212px; }   /* 32 × 50 canvas on the webp's 3× grid; origin = the tip */
.cl-tag { position: absolute; left: 0; top: 0; }
.cl-pill { display: flex; align-items: center; gap: 4px; height: 18px; padding: 0 8px 0 6px; border-radius: 999px; white-space: nowrap;   /* icon side 2px tighter */
           background: linear-gradient(168deg, #642BE1, #A485F7); color: #fff; font: 500 10.2px/18px 'Surt Expanded', 'Surt', sans-serif; letter-spacing: .15px;
           box-shadow: 0 5px 10px -5px rgba(100,43,225,.6); }
.cl-pill svg { width: 8px; height: 8px; display: block; overflow: visible; }
.cl-pill circle { fill: #fff; }
.cl-name { width: 77.4px; height: 36px; filter: drop-shadow(0 4px 6px rgba(30,39,46,.12)); }   /* the chat card's name tag (card 4) at .6 */
.cl-name > img { position: absolute; inset: 0; width: 77.4px; height: 36px; max-width: none; }
.cl-av { position: absolute; left: 3.6px; top: 3.6px; width: 28.8px; height: 28.8px; border-radius: 50%; overflow: hidden; background: #1d1d26; }
.cl-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-av::after { content: ""; position: absolute; inset: 0; background: linear-gradient(144.38deg, rgba(255,255,255,.2) 17.6%, rgba(0,0,0,.2) 79.13%); }
.cl-name b { position: absolute; left: 42px; top: 4.77px; font: 500 10.2px/13.26px 'Surt Expanded', 'Surt', sans-serif; color: #1e272e; }