/* build/builder.css: the four Build pages (skills-experts, plays, workflows, automations). Loads after shared/site.css
 * and shared/app-cards.css. The frame, the window chrome and the chat parts are shared; this file draws only what the
 * builder and the Build pages add inside the one window, every size in design units (calc(var(--u)*N)).
 * The builder head, split, cards and roster follow the home's "Your team can extend Fractl Agents" drawing (home.css .b-*).
 * Elements shown per state carry data-s; anything not display:block sets --d. Highlights per state use data-f → .f-on.
 * No colour here is orange text: node and avatar tints are drawing marks only (the app's builder palette).
 * Red-team wave 2 (Sept 25): one hero size (900×600, the work heroes' size) and one stage size (960×580); every label ≥ 11u;
 * primary buttons in the app UI use --app-btn/--app-btn-ink (never --teal-ink inside a window); your team's marks are amber
 * (the home Play picker's "Your team" pill), skills are indigo (#6366f1, DESIGN.md §6 setup), contacts pink is not used here;
 * the Choose a Play modal is the shared one (shared/app-cards.css .w-modal); this file only hides its halves per state on phones. */

/* ── window sizes (never inline) ── */
.w-bd-hero{--dw:900;--dh:600}
.w-bd{--dw:960;--dh:580}
.w-bd .w-ctext,.w-bd-hero .w-ctext{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── builder head (home's) ── */
.b-head{flex:none;height:calc(var(--u)*48);display:flex;align-items:center;gap:calc(var(--u)*10);padding:0 calc(var(--u)*16);border-bottom:1px solid #454545}
.b-head img{width:calc(var(--u)*20);height:calc(var(--u)*20)}
.b-crumb{font-size:calc(var(--u)*14.5);font-weight:500}
.b-crumb i{font-style:normal;color:var(--dim);margin-right:calc(var(--u)*3)}
.b-pill{height:calc(var(--u)*26);padding:0 calc(var(--u)*10);display:inline-flex;align-items:center;gap:calc(var(--u)*6);border:1px solid var(--edge);border-radius:calc(var(--u)*7);font-size:calc(var(--u)*12);color:var(--sub);white-space:nowrap}
.b-pill .ic{width:calc(var(--u)*12);height:calc(var(--u)*12)}
.b-head .w-av{margin-left:auto}
/* the wizard's step line */
.b-sub{--d:flex;flex:none;display:flex;align-items:center;gap:calc(var(--u)*14);height:calc(var(--u)*38);padding:0 calc(var(--u)*18);border-bottom:1px solid #454545;font-size:calc(var(--u)*12);color:var(--sub)}
.b-steps{margin-left:auto;display:flex;gap:calc(var(--u)*12);font-size:calc(var(--u)*11);color:#7a7a7a;white-space:nowrap;overflow:hidden}
.b-steps span{display:flex;align-items:center;gap:calc(var(--u)*5)}
.b-steps span::before{content:"";width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:50%;background:#454545}
.b-steps span.f-on{color:var(--ink);font-weight:600}
.b-steps span.f-on::before{background:var(--teal);box-shadow:0 0 0 calc(var(--u)*3) rgba(33,173,143,.25)}

/* ── the wizard: question on the left, the thing being built on the right ── */
.b-split{--d:grid;flex:1;min-height:0;display:grid;grid-template-columns:calc(var(--u)*410) minmax(0,1fr)}
.b-left{min-width:0;padding:calc(var(--u)*28) calc(var(--u)*28);border-right:1px solid #454545}
.b-stack{--d:flex;display:flex;flex-direction:column;gap:calc(var(--u)*12)}
.b-stack h3{font-size:calc(var(--u)*21);font-weight:500;line-height:1.2;letter-spacing:-.02em}
.b-stack p{color:var(--sub);line-height:1.5}
.b-stack small{font:600 calc(var(--u)*11)/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.b-q{font-size:calc(var(--u)*16);font-weight:600;line-height:1.35}
.b-ta{min-height:calc(var(--u)*100);padding:calc(var(--u)*12) calc(var(--u)*14);border:1px solid #1f6b5a;border-radius:calc(var(--u)*10);background:#1a1a1a;font-size:calc(var(--u)*13.5);line-height:1.5}
.b-ghost{color:#7a7a7a}
.b-go{align-self:flex-start;height:calc(var(--u)*34);padding:0 calc(var(--u)*16);display:inline-flex;align-items:center;gap:calc(var(--u)*7);border-radius:calc(var(--u)*8);background:var(--app-btn);color:var(--app-btn-ink);font-weight:600;font-size:calc(var(--u)*13)}
.b-go .ic{width:calc(var(--u)*13);height:calc(var(--u)*13)}
.b-opt{display:flex;align-items:center;gap:calc(var(--u)*10);padding:calc(var(--u)*10) calc(var(--u)*12);border:1px solid var(--edge);border-radius:calc(var(--u)*9);font-size:calc(var(--u)*13)}
.b-opt.on{border-color:#1f6b5a;background:#22302c}
.b-opt>.ic{color:var(--teal)}
.b-opt>i{flex:none;width:calc(var(--u)*14);height:calc(var(--u)*14);border:1.5px solid #454545;border-radius:calc(var(--u)*4)}
.b-opt small,.b-stack .b-opt small{display:block;font:400 calc(var(--u)*11.5)/1.4 var(--sans);letter-spacing:0;text-transform:none;color:var(--sub)}
.b-right{min-width:0;padding:calc(var(--u)*28);display:flex;align-items:flex-start;justify-content:center;background:#1a1a1a}
.b-empty{--d:flex;margin:auto;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*12);max-width:calc(var(--u)*260);text-align:center;color:var(--dim)}
.b-empty i{width:calc(var(--u)*44);height:calc(var(--u)*44);display:grid;place-items:center;border:1px dashed var(--border);border-radius:calc(var(--u)*12)}
.b-empty .ic{width:calc(var(--u)*18);height:calc(var(--u)*18)}
/* the card of the thing being built */
.b-card{width:100%;max-width:calc(var(--u)*460);border:1px solid var(--edge);border-radius:calc(var(--u)*12);background:#292929;overflow:hidden}
.b-card>header{display:flex;align-items:center;gap:calc(var(--u)*12);padding:calc(var(--u)*14)}
.b-card strong{display:block;font-size:calc(var(--u)*15);font-weight:600}
.b-card header small{display:block;font-size:calc(var(--u)*12);color:var(--sub)}
.b-card dl{--d:grid;display:grid;gap:calc(var(--u)*12);padding:calc(var(--u)*12) calc(var(--u)*14) calc(var(--u)*14);border-top:1px solid #454545}
.b-card dt{font:600 calc(var(--u)*11)/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.b-card dd{display:flex;flex-wrap:wrap;gap:calc(var(--u)*6);margin-top:calc(var(--u)*6);font-size:calc(var(--u)*12.5);line-height:1.45}
.b-card dd>span{display:inline-flex;align-items:center;gap:calc(var(--u)*5);padding:calc(var(--u)*2) calc(var(--u)*8);border:1px solid var(--edge);border-radius:calc(var(--u)*6);background:#303030}
.b-card dd>span .ic{width:calc(var(--u)*12);height:calc(var(--u)*12);color:var(--dim)}
.b-card dd>span.sk{border-color:rgba(99,102,241,.45);background:rgba(99,102,241,.12)}
.b-rules{display:grid;gap:calc(var(--u)*6);width:100%;counter-reset:r}
.b-rules li{--d:flex;display:flex;gap:calc(var(--u)*9);align-items:baseline;font-size:calc(var(--u)*13)}
.b-rules li::before{counter-increment:r;content:counter(r);flex:none;width:calc(var(--u)*18);height:calc(var(--u)*18);display:grid;place-items:center;border-radius:50%;background:rgba(33,173,143,.18);color:var(--teal-hi);font-size:calc(var(--u)*11);font-weight:600}
/* initials squares: teal for what Fractl built, violet for your team's own (the home's) */
.b-sq{flex:none;width:calc(var(--u)*38);height:calc(var(--u)*38);display:grid;place-items:center;border-radius:calc(var(--u)*10);background:rgba(139,92,246,.18);color:#c4b5fd;font-size:calc(var(--u)*12.5);font-weight:600}
.b-sq.fr{background:rgba(33,173,143,.13);color:var(--teal-hi)}


/* ── a roster (all experts, all skills) ── */
.b-roster{--d:flex;flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(var(--u)*16);padding:calc(var(--u)*26) calc(var(--u)*28)}
.b-rbar{display:flex;align-items:center;gap:calc(var(--u)*8)}
.b-rbar strong{margin-right:auto;font-size:calc(var(--u)*17);font-weight:600}
.b-add{display:inline-flex;align-items:center;gap:calc(var(--u)*6);height:calc(var(--u)*32);padding:0 calc(var(--u)*13);border-radius:calc(var(--u)*8);background:var(--app-btn);color:var(--app-btn-ink);font-size:calc(var(--u)*12.5);font-weight:600;white-space:nowrap}
.b-add .ic{width:calc(var(--u)*13);height:calc(var(--u)*13)}
.b-add.ghost{background:none;border:1px solid var(--edge);color:var(--ink)}
.b-rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*14)}
.b-rc{--d:flex;position:relative;display:flex;align-items:center;gap:calc(var(--u)*12);min-width:0;padding:calc(var(--u)*14);border:1px solid var(--edge);border-radius:calc(var(--u)*12);background:#292929;font-size:calc(var(--u)*13.5);font-weight:600;line-height:1.3}
.b-rc small{display:block;font-size:calc(var(--u)*11.5);font-weight:400;color:var(--dim)}
.b-rc.b-new{border-color:#1f6b5a;background:#22302c}
.b-rc em{position:absolute;top:calc(var(--u)*-9);left:calc(var(--u)*14);padding:calc(var(--u)*1) calc(var(--u)*8);border-radius:calc(var(--u)*999);background:var(--app-btn);color:var(--app-btn-ink);font-size:calc(var(--u)*11);font-weight:600;font-style:normal}
.b-done{--d:flex;display:flex;align-items:center;gap:calc(var(--u)*8);font-size:calc(var(--u)*13);color:var(--teal-hi)}
.b-done .ic{width:calc(var(--u)*14);height:calc(var(--u)*14);stroke-width:2.6}

/* ── chat parts the Build pages add: the + menu, the chip over the composer, a picker over the chat ── */
.c-dock{position:relative;flex:none;display:flex;flex-direction:column}
.c-menu{--d:grid;position:absolute;left:calc((100% - min(100% - var(--u)*44, var(--u)*680)) / 2);bottom:calc(100% + var(--u)*6);z-index:6;display:grid;gap:1px;min-width:calc(var(--u)*190);padding:calc(var(--u)*6);border:1px solid var(--edge);border-radius:calc(var(--u)*12);background:#292929;box-shadow:0 calc(var(--u)*18) calc(var(--u)*40) rgba(0,0,0,.6)}
.c-menu li{display:flex;align-items:center;gap:calc(var(--u)*10);padding:calc(var(--u)*8) calc(var(--u)*11);border-radius:calc(var(--u)*8);font-size:calc(var(--u)*13.5);font-weight:500}
.c-menu li .ic{color:var(--sub)}
.c-menu li.hot{background:#333333}
.c-chip{--d:flex;align-self:flex-start;display:flex;align-items:center;gap:calc(var(--u)*8);height:calc(var(--u)*32);margin:0 0 calc(var(--u)*-1) calc((100% - min(100% - var(--u)*44, var(--u)*680)) / 2 + var(--u)*18);padding:0 calc(var(--u)*12) calc(var(--u)*2);border:1px solid var(--edge);border-bottom:0;border-radius:calc(var(--u)*10) calc(var(--u)*10) 0 0;background:#292929;font-size:calc(var(--u)*12.5);white-space:nowrap}
.c-chip b{font-weight:600}
.c-chip span{color:var(--sub)}
.c-chip .ic{width:calc(var(--u)*11);height:calc(var(--u)*11);color:var(--dim)}
.c-tag{flex:none;padding:calc(var(--u)*2) calc(var(--u)*6);border-radius:calc(var(--u)*5);background:rgba(99,102,241,.2);color:#b4b6fb;font:600 calc(var(--u)*11)/1.2 var(--sans);letter-spacing:.05em;text-transform:uppercase}
.c-tag.ex{background:rgba(33,173,143,.2);color:var(--teal-hi)}
.w-who .c-tag{margin-right:calc(var(--u)*2)}
.w-who.c-named{color:var(--ink);letter-spacing:0;text-transform:none;font:600 calc(var(--u)*12)/1.2 var(--sans)}
.c-modal{--d:grid;position:absolute;inset:calc(var(--u)*48) 0 0;z-index:8;display:grid;place-items:center;padding:calc(var(--u)*18);background:rgba(0,0,0,.55)}
.c-mcard{width:min(calc(var(--u)*620),100%);border:1px solid var(--edge);border-radius:calc(var(--u)*14);background:#292929;box-shadow:0 calc(var(--u)*30) calc(var(--u)*70) rgba(0,0,0,.7);overflow:hidden}
.c-mhead{display:flex;align-items:center;gap:calc(var(--u)*6);padding:calc(var(--u)*11) calc(var(--u)*14);border-bottom:1px solid #454545;font-size:calc(var(--u)*14);font-weight:600}
.c-mhead span{padding:calc(var(--u)*5) calc(var(--u)*11);border-radius:calc(var(--u)*7);font-size:calc(var(--u)*13);font-weight:500;color:var(--sub)}
.c-mhead span.on{background:#333333;color:var(--ink);font-weight:600}
.c-picks{padding:calc(var(--u)*4) calc(var(--u)*16) calc(var(--u)*6)}
.c-picks li{display:grid;grid-template-columns:calc(var(--u)*20) minmax(0,1fr);gap:calc(var(--u)*12);padding:calc(var(--u)*12) 0;border-bottom:1px solid #454545}
.c-picks li:last-child{border-bottom:0}
.c-picks strong{font-size:calc(var(--u)*14);font-weight:600}
.c-picks p{margin-top:calc(var(--u)*2);font-size:calc(var(--u)*12.5);line-height:1.45;color:var(--sub)}
.c-badge{display:inline-block;margin-left:calc(var(--u)*8);padding:calc(var(--u)*1) calc(var(--u)*7);border:1px solid #6b5320;border-radius:calc(var(--u)*5);color:#f5c26b;font-size:calc(var(--u)*11);font-weight:600;vertical-align:calc(var(--u)*1)}
.c-box{width:calc(var(--u)*18);height:calc(var(--u)*18);margin-top:calc(var(--u)*2);display:grid;place-items:center;border:1.5px solid #454545;border-radius:calc(var(--u)*5)}
.c-box.on{background:var(--app-btn);border-color:var(--app-btn);color:var(--app-btn-ink)}
.c-box .ic{width:calc(var(--u)*11);height:calc(var(--u)*11);stroke-width:3}
.c-mfoot{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u)*10);padding:calc(var(--u)*11) calc(var(--u)*16);border-top:1px solid #454545;font-size:calc(var(--u)*12.5);color:var(--sub)}
.c-go{display:inline-flex;align-items:center;height:calc(var(--u)*34);padding:0 calc(var(--u)*15);border-radius:calc(var(--u)*9);background:var(--app-btn);color:var(--app-btn-ink);font-size:calc(var(--u)*13);font-weight:600;white-space:nowrap}
/* an answer the agent gave: short lines, one per headline */
.c-heads{display:grid;gap:calc(var(--u)*7)}
.c-heads li{padding:calc(var(--u)*9) calc(var(--u)*13);border-radius:calc(var(--u)*10);background:var(--panel);font-size:calc(var(--u)*14.5);line-height:1.3;letter-spacing:-.01em}
/* the agent's activity line, with the expert it picked */
.c-act{--d:grid;display:grid;gap:calc(var(--u)*10);padding:calc(var(--u)*12) calc(var(--u)*14);border:1px solid #454545;border-radius:calc(var(--u)*12);background:#1a1a1a;font-size:calc(var(--u)*12.5)}
.c-act>header{display:flex;align-items:center;gap:calc(var(--u)*8);font-weight:600;font-size:calc(var(--u)*13)}
.c-act>header .ic{width:calc(var(--u)*12);height:calc(var(--u)*12);fill:var(--brand);stroke:none}
.c-act>header em{margin-left:auto;font-style:normal;font-weight:400;color:var(--sub)}
.c-phases{display:flex;gap:calc(var(--u)*14);font:500 calc(var(--u)*11.5)/1 var(--sans);color:var(--sub)}
.c-phases span::before{content:"✓ ";color:var(--teal-hi)}
.c-picked{display:grid;gap:calc(var(--u)*6);padding:calc(var(--u)*10) calc(var(--u)*12);border:1px solid var(--edge);border-radius:calc(var(--u)*10)}
.c-picked>div{display:flex;align-items:center;gap:calc(var(--u)*8);font-size:calc(var(--u)*13.5);font-weight:600}
.c-picked>div small{margin-left:auto;font-size:calc(var(--u)*11.5);font-weight:400;color:var(--sub)}
.c-picked li{font:400 calc(var(--u)*12)/1.4 var(--sans);color:#b3b3b3}
.c-picked li::before{content:"✓  ";color:var(--teal-hi)}

/* ── Plays: the bar over the chat, the step set up by the agent, the Play picker ── */
.p-bar{--d:flex;flex:none;display:flex;align-items:center;gap:calc(var(--u)*11);height:calc(var(--u)*42);padding:0 calc(var(--u)*14);border-bottom:1px solid rgba(33,173,143,.35);background:#1f2926;font-size:calc(var(--u)*12.5);white-space:nowrap}
.p-bar>.ic{color:var(--teal-hi)}
.p-bar strong{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.p-run,.p-note,.p-ghost,.p-dots{flex:none}
.p-bar em{--d:inline;font-style:normal;font-size:calc(var(--u)*11.5);color:var(--sub);overflow:hidden;text-overflow:ellipsis}
.p-dots{--d:flex;margin-left:auto;display:flex;gap:calc(var(--u)*4)}
.p-dots i{width:calc(var(--u)*7);height:calc(var(--u)*7);border-radius:50%;background:#454545}
.p-dots i.cur{background:rgba(33,173,143,.5);box-shadow:0 0 0 calc(var(--u)*2) rgba(33,173,143,.25)}
.p-dots i.done{background:var(--teal)}
.p-run,.p-note,.p-ghost{--d:inline-flex;display:inline-flex;align-items:center;gap:calc(var(--u)*5);height:calc(var(--u)*27);padding:0 calc(var(--u)*10);border-radius:calc(var(--u)*8);font-size:calc(var(--u)*11.5);font-weight:600}
.p-run{background:var(--app-btn);color:var(--app-btn-ink)}
.p-note,.p-ghost{border:1px solid var(--edge);color:var(--sub)}
.p-ghost{font-weight:400}
.p-run .ic,.p-ghost .ic{width:calc(var(--u)*11);height:calc(var(--u)*11)}
.p-run .ic{fill:currentColor;stroke:none}
.p-setup{--d:grid;display:grid;gap:calc(var(--u)*10);padding:calc(var(--u)*14) calc(var(--u)*16);border:1px solid var(--edge);border-radius:calc(var(--u)*12);background:#292929}
.p-setup>small{font:600 calc(var(--u)*11)/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--teal-hi)}
.p-setup>strong{font-size:calc(var(--u)*15.5);font-weight:600}
.p-field{display:grid;gap:calc(var(--u)*4);font-size:calc(var(--u)*11.5);color:var(--sub)}
.p-field span{padding:calc(var(--u)*8) calc(var(--u)*10);border:1px solid var(--edge);border-radius:calc(var(--u)*8);background:var(--page);font-size:calc(var(--u)*13);color:var(--ink)}
.p-setup .p-run{justify-self:start;height:calc(var(--u)*32);padding:0 calc(var(--u)*14);font-size:calc(var(--u)*13)}
.p-step{--d:flex;display:flex;align-items:center;gap:calc(var(--u)*10);padding:calc(var(--u)*9) calc(var(--u)*12);border:1px solid var(--edge);border-radius:calc(var(--u)*12);background:#292929;font-size:calc(var(--u)*13);font-weight:600}
.p-step>.ic{margin-left:auto;color:var(--teal)}
/* the Choose a Play modal is shared/app-cards.css (.w-veil + .w-modal), the home's markup with this page's Play names */
.p-how{display:grid;gap:calc(var(--u)*7);padding:calc(var(--u)*11) calc(var(--u)*12);border:1px solid rgba(33,173,143,.4);border-radius:calc(var(--u)*10);background:#1f2926;font-size:calc(var(--u)*12.5);counter-reset:h}
.p-how li{--d:flex;display:flex;gap:calc(var(--u)*9);align-items:baseline;line-height:1.35}
.p-how li::before{counter-increment:h;content:counter(h);flex:none;width:calc(var(--u)*17);height:calc(var(--u)*17);display:grid;place-items:center;border-radius:50%;background:rgba(33,173,143,.26);color:var(--teal-hi);font-size:calc(var(--u)*11);font-weight:600}
.b-card .p-how{width:100%}
.b-work{--d:flex;display:flex;align-items:center;gap:calc(var(--u)*10);color:var(--sub)}
.b-work i{width:calc(var(--u)*14);height:calc(var(--u)*14);border-radius:50%;border:2px solid #454545;border-top-color:var(--teal)}

/* ── Workflows: the canvas builder ── */
.wf-top{flex:none;display:flex;align-items:center;gap:calc(var(--u)*8);height:calc(var(--u)*48);padding:0 calc(var(--u)*12);border-bottom:1px solid #454545}
.wf-title{--d:flex;display:flex;align-items:center;gap:calc(var(--u)*10);margin:0 auto;font-size:calc(var(--u)*13.5);white-space:nowrap}
.wf-sched{--d:inline-flex;display:inline-flex;align-items:center;gap:calc(var(--u)*5);padding:calc(var(--u)*3) calc(var(--u)*9);border:1px solid #1f6b5a;border-radius:calc(var(--u)*999);background:#22302c;font-size:calc(var(--u)*11.5);color:var(--teal-hi)}
.wf-sched .ic{width:calc(var(--u)*11);height:calc(var(--u)*11);stroke-width:2.6}
.wf-run .ic{width:calc(var(--u)*10);height:calc(var(--u)*10);fill:currentColor;stroke:none}
.wf-save{display:inline-flex;align-items:center;height:calc(var(--u)*28);padding:0 calc(var(--u)*13);border-radius:calc(var(--u)*7);background:var(--app-btn);color:var(--app-btn-ink);font-size:calc(var(--u)*12);font-weight:600}
.wf-row{flex:1;min-height:0;display:grid;grid-template-columns:calc(var(--u)*124) minmax(0,1fr) calc(var(--u)*212)}
.wf-pal{display:grid;gap:calc(var(--u)*7);align-content:start;padding:calc(var(--u)*12) calc(var(--u)*9);border-right:1px solid #454545}
.wf-pal span{display:flex;align-items:center;gap:calc(var(--u)*9);padding:calc(var(--u)*8) calc(var(--u)*9);border:1px solid #454545;border-radius:calc(var(--u)*9);background:#292929;font-size:calc(var(--u)*12.5);font-weight:600;transition:border-color var(--motion-medium) var(--ease-out),background-color var(--motion-medium) var(--ease-out)}
.wf-pal span i{flex:none;width:calc(var(--u)*20);height:calc(var(--u)*20);border-radius:calc(var(--u)*6);background:var(--c)}
.wf-pal span.f-on{border-color:#1f6b5a;background:#22302c}
.wf-canvas{position:relative;min-width:0;display:flex;align-items:center;justify-content:center;padding:calc(var(--u)*14);background:radial-gradient(#303030 1px,transparent 1px) 0 0/calc(var(--u)*20) calc(var(--u)*20)}
.wf-words{display:grid;gap:calc(var(--u)*10);max-width:calc(var(--u)*320)}
.wf-words small{font:600 calc(var(--u)*11)/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.wf-words ol{display:grid;gap:calc(var(--u)*7);counter-reset:w}
.wf-words li{display:flex;gap:calc(var(--u)*9);padding:calc(var(--u)*9) calc(var(--u)*12);border:1px dashed var(--border);border-radius:calc(var(--u)*9);background:#212121;font-size:calc(var(--u)*13)}
.wf-words li::before{counter-increment:w;content:counter(w);color:var(--dim);font-weight:600}
.wf-flow{--d:flex;display:flex;align-items:center}
.wn{flex:none;width:calc(var(--u)*128);border:1px solid color-mix(in srgb,var(--c) 55%,#454545);border-radius:calc(var(--u)*10);background:#212121;overflow:hidden;font-size:calc(var(--u)*11.5)}
.wn header{display:flex;align-items:center;gap:calc(var(--u)*7);padding:calc(var(--u)*8) calc(var(--u)*9);background:color-mix(in srgb,var(--c) 14%,transparent)}
.wn header>i{flex:none;width:calc(var(--u)*16);height:calc(var(--u)*16);border-radius:calc(var(--u)*5);background:var(--c)}
.wn header b{font-weight:600;line-height:1.15}
.wn header small{display:block;font-size:calc(var(--u)*11);font-weight:400;color:var(--sub)}
.wn header .ic{margin-left:auto;width:calc(var(--u)*13);height:calc(var(--u)*13);color:var(--teal);stroke-width:2.6}
.wn p{padding:calc(var(--u)*8) calc(var(--u)*9);font-size:calc(var(--u)*11);line-height:1.35;color:#b3b3b3}
.wn p span.wait{color:var(--teal-hi);font-weight:600}
.we{flex:none;position:relative;width:calc(var(--u)*18);height:calc(var(--u)*2);background:var(--teal)}
.we::after{content:"";position:absolute;right:calc(var(--u)*-1);top:calc(var(--u)*-3);border-left:calc(var(--u)*6) solid var(--teal);border-top:calc(var(--u)*4) solid transparent;border-bottom:calc(var(--u)*4) solid transparent}
.wf-toast{position:absolute;right:calc(var(--u)*12);bottom:calc(var(--u)*12);max-width:calc(var(--u)*250);padding:calc(var(--u)*11) calc(var(--u)*13);border:1px solid var(--edge);border-radius:calc(var(--u)*12);background:#303030;box-shadow:0 calc(var(--u)*18) calc(var(--u)*40) rgba(0,0,0,.55);font-size:calc(var(--u)*12.5);line-height:1.4}
.wf-toast strong{display:block;margin-bottom:calc(var(--u)*3);font-size:calc(var(--u)*11.5);color:var(--teal-hi)}
.wf-assist{min-width:0;min-height:0;display:flex;flex-direction:column;border-left:1px solid #454545}
.wf-assist h4{padding:calc(var(--u)*11) calc(var(--u)*13);border-bottom:1px solid #454545;font-size:calc(var(--u)*12.5);font-weight:500;color:var(--sub)}
.wf-chat{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:calc(var(--u)*10);padding:calc(var(--u)*12);font-size:calc(var(--u)*12.5);line-height:1.45;overflow:hidden}
.wf-chat .me{padding:calc(var(--u)*9) calc(var(--u)*11);border-radius:calc(var(--u)*12);background:#333333}
.wf-chat .bot{color:#f5f5f5}
.wf-in{display:flex;align-items:center;gap:calc(var(--u)*8);height:calc(var(--u)*38);margin:0 calc(var(--u)*10) calc(var(--u)*12);padding:0 calc(var(--u)*6) 0 calc(var(--u)*12);border:1px solid var(--edge);border-radius:calc(var(--u)*10);font-size:calc(var(--u)*12);color:var(--dim)}
.wf-in em{flex:1;min-width:0;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-in span{margin-left:auto;display:inline-flex;align-items:center;height:calc(var(--u)*26);padding:0 calc(var(--u)*10);border-radius:calc(var(--u)*7);background:var(--app-btn);color:var(--app-btn-ink);font-weight:600}

/* ── Automations ── */
.a-row{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.a-list{display:grid;gap:calc(var(--u)*10);align-content:start;min-width:0;padding:calc(var(--u)*16);border-right:1px solid #454545;font-size:calc(var(--u)*12.5);color:var(--sub)}
.a-bar{display:flex;align-items:flex-start;gap:calc(var(--u)*10)}
.a-bar b{display:block;font-size:calc(var(--u)*14);font-weight:600;color:var(--ink)}
.a-bar .b-add{margin-left:auto;height:calc(var(--u)*28);font-size:calc(var(--u)*12)}
.a-filters{display:flex;flex-wrap:wrap;gap:calc(var(--u)*6)}
.a-filters span{padding:calc(var(--u)*4) calc(var(--u)*9);border:1px solid var(--edge);border-radius:calc(var(--u)*7);font-size:calc(var(--u)*11.5)}
.a-filters span.on{border-color:var(--teal);color:var(--teal-hi)}
.a-job{padding:calc(var(--u)*10) calc(var(--u)*12);border:1px solid #454545;border-radius:calc(var(--u)*10);background:#292929}
.a-job.new{border-color:#1f6b5a;background:#22302c}
.a-job strong{display:block;font-size:calc(var(--u)*13);font-weight:600;color:var(--ink)}
.a-job small{font-size:calc(var(--u)*11.5)}
.a-main{min-width:0;display:grid;align-content:center;padding:calc(var(--u)*28)}
.a-rhythms{--d:grid;display:grid;gap:calc(var(--u)*16)}
.a-rhythms>small,.a-result>small{font:600 calc(var(--u)*11)/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.a-rh{display:grid;grid-template-columns:calc(var(--u)*30) minmax(0,1fr);gap:calc(var(--u)*4) calc(var(--u)*12);align-items:center}
.a-rh>i{grid-row:span 2;width:calc(var(--u)*28);height:calc(var(--u)*28);border-radius:50%;background:var(--c);opacity:.9}
.a-rh strong{display:block;font-size:calc(var(--u)*14);font-weight:600}
.a-rh span{font-size:calc(var(--u)*12);color:var(--sub)}
.a-rh>b{grid-column:2;height:calc(var(--u)*6);border-radius:calc(var(--u)*3);background:linear-gradient(90deg,var(--c) var(--w),#333333 var(--w))}
.a-ed{--d:grid;display:grid;gap:calc(var(--u)*18)}
.a-tabs{display:flex;gap:calc(var(--u)*6);font-size:calc(var(--u)*12.5);color:var(--sub)}
.a-tabs span{padding:calc(var(--u)*6) calc(var(--u)*11);border:1px solid transparent;border-radius:calc(var(--u)*8)}
.a-tabs span.f-on{border-color:var(--edge);background:#292929;color:var(--ink);font-weight:600}
.a-ed .b-stack{gap:calc(var(--u)*10)}
.a-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*8)}
.a-presets{display:flex;flex-wrap:wrap;gap:calc(var(--u)*8)}
.a-presets span{padding:calc(var(--u)*9) calc(var(--u)*14);border:1px solid var(--edge);border-radius:calc(var(--u)*9);font-size:calc(var(--u)*13.5)}
.a-presets span.on{border-color:var(--teal);background:rgba(33,173,143,.12)}
.a-cron{font-size:calc(var(--u)*24);font-weight:500;letter-spacing:-.02em;color:var(--ink)!important}
.a-result{--d:grid;display:grid;gap:calc(var(--u)*8);padding:calc(var(--u)*18) calc(var(--u)*20);border:1px solid rgba(33,173,143,.45);border-radius:calc(var(--u)*14);background:#1f2926}
.a-result strong{font-size:calc(var(--u)*16);font-weight:600}
.a-result p{color:#d0dcd8}
.a-open{justify-self:start;display:inline-flex;align-items:center;gap:calc(var(--u)*7);height:calc(var(--u)*32);padding:0 calc(var(--u)*12);border:1px solid rgba(33,173,143,.6);border-radius:calc(var(--u)*8);color:var(--teal-hi);font-size:calc(var(--u)*12.5);font-weight:600}
.a-open .ic{width:calc(var(--u)*13);height:calc(var(--u)*13)}

/* ── narrow screens (the window at --dw:430) ── */
@media (max-width:899px){
  .fit .w-bd{--dh:620}
  .fit .w-wf-st{--dh:740} /* the one phone exception: the workflow's four steps stack vertically under the palette */
  .fit .w-bd-hero{--dh:620}
  .b-sub{padding:0 calc(var(--u)*12)}
  .b-steps span:not(.f-on){display:none}
  .b-split{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-content:start}
  .b-left{padding:calc(var(--u)*18);border-right:0}
  .b-right{padding:0 calc(var(--u)*18) calc(var(--u)*18);background:none}
  .b-empty{margin:calc(var(--u)*24) auto}
  .b-card{max-width:none}
  .b-roster{padding:calc(var(--u)*18) calc(var(--u)*16)}
  .b-rgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--u)*12)}
  .b-rc{padding:calc(var(--u)*12) calc(var(--u)*10);font-size:calc(var(--u)*12.5)}
  .b-rc .b-sq{width:calc(var(--u)*32);height:calc(var(--u)*32)}
  .b-head .b-pill.bd-wide{display:none}
  .c-menu{left:calc(var(--u)*12)}
  .c-chip{margin-left:calc(var(--u)*26)}
  .c-chip>span:not(.c-tag){display:none}
  .w-bd .p-bar em,.w-bd .p-ghost,.w-bd .p-bar .p-dots,.w-bd-hero .p-bar em,.w-bd-hero .p-ghost,.w-bd-hero .p-bar .p-dots{display:none!important}
  .p-bar .p-run,.p-bar .p-note{margin-left:auto}
  /* the shared Play picker fills the window on a phone: the list while a person picks, the steps once a Play is picked */
  .w-plst[data-state="1"] .m-right,.w-plst[data-state="2"] .m-left{display:none}
  .c-modal{padding:calc(var(--u)*10)}
  .wf-top .b-pill{display:none}
  .wf-title{margin:0;min-width:0;flex-direction:column;align-items:flex-start;gap:calc(var(--u)*3);font-size:calc(var(--u)*12.5)}
  .fit .w-wf-hero{--dh:800}
  .wf-canvas{flex-direction:column;justify-content:center;gap:calc(var(--u)*12)}
  .wf-save{margin-left:auto}
  .wf-row{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
  .wf-pal{grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(var(--u)*6);padding:calc(var(--u)*10);border-right:0;border-bottom:1px solid #454545}
  .wf-pal span{padding:calc(var(--u)*6) calc(var(--u)*7);font-size:calc(var(--u)*11.5)}
  .wf-pal span i{width:calc(var(--u)*14);height:calc(var(--u)*14)}
  .wf-flow{flex-direction:column}
  .wn{width:calc(var(--u)*230)}
  .we{width:calc(var(--u)*2);height:calc(var(--u)*18)}
  .we::after{right:auto;top:auto;left:calc(var(--u)*-3);bottom:calc(var(--u)*-1);border-top:calc(var(--u)*6) solid var(--teal);border-left:calc(var(--u)*4) solid transparent;border-right:calc(var(--u)*4) solid transparent;border-bottom:0}
  .wf-toast{position:static;max-width:calc(var(--u)*300)}
  .wf-assist{border-left:0;border-top:1px solid #454545;max-height:calc(var(--u)*190)}
  .wf-assist h4,.wf-in{display:none}
  .wf-chat{justify-content:flex-start}
  .a-row{grid-template-columns:minmax(0,1fr)}
  .a-list{display:none}
  .a-main{align-content:start;padding:calc(var(--u)*20) calc(var(--u)*18)}
  .a-opts{grid-template-columns:minmax(0,1fr)}
}
/* a one-line card (header only) in the chat */
.pc.pc-one>header{border-bottom:0}
.pc.pc-one>header>.ic{margin-left:auto;width:calc(var(--u)*15);height:calc(var(--u)*15);color:var(--teal);stroke-width:2.6}
@media (max-width:899px){.wf-top .b-pill.wf-run{display:inline-flex}}