/* CRM + Command Center workspace demo (studio draft, 2026-10-14).
   The homepage demo rebuilt on the unified workspace: one shell, Today queues, a task side panel,
   favorites and saved views, bulk changes with a preview and Undo. Sample data only.
   Uses the site tokens (v2.css, v2-gray.css, v2-light.css) and sits in an .island > .frame like the other demos;
   html.light gets the white panel + tray + raised cards from depth.css rev 4. Everything is scoped to .cw. */

.cw{--cw-bg:#0c0f14;--cw-side:#10141b;--cw-card:var(--panel2);--cw-raise:inset 0 0 0 1px var(--line);
  --cw-raise-hi:inset 0 0 0 1px var(--blue-hi);--cw-sel:rgba(51,85,224,.2);--cw-ink:#fff;--cw-ok:#8fe0b6;--cw-warn:#ffcf6b;--cw-bad:#ff8f8f;
  color-scheme:dark;position:relative;display:grid;gap:0;grid-template-columns:200px minmax(0,1fr);grid-template-rows:auto 1fr;height:560px;
  background:var(--cw-bg);color:var(--text);font-family:var(--body);font-size:15px;line-height:1.4;overflow:hidden;text-align:left}
html.gray .cw{--cw-bg:#0e1116;--cw-side:#12151b}
html.light .cw{color-scheme:light;--cw-bg:var(--tray,linear-gradient(180deg,#F6F8FB,#EEF1F6));--cw-side:#FFFFFF;--cw-card:#FFFFFF;--cw-ink:#15181E;
  --cw-raise:var(--raise,0 0 0 1px rgba(16,24,40,.05),0 1px 2px rgba(16,24,40,.06),0 4px 12px -4px rgba(16,24,40,.10));
  --cw-raise-hi:var(--raise-hi,0 0 0 1px rgba(51,85,224,.35),0 12px 24px -10px rgba(51,85,224,.35));
  --cw-sel:rgba(51,85,224,.1);--cw-ok:#1C7C4A;--cw-warn:#8A5A00;--cw-bad:#B42318}
.cw *{box-sizing:border-box}
.cw button,.cw input,.cw select{font:inherit;color:inherit}
.cw button{cursor:pointer;background:none;border:0}
.cw svg{flex:none}

/* ---------- the shared header ---------- */
.cw-top{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--cw-side);box-shadow:0 1px 0 var(--line)}
.cw-biz{display:flex;align-items:center;gap:10px;min-width:0;margin-right:auto}
.cw-biz i{width:30px;height:30px;border-radius:8px;background:var(--blue);color:#fff;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:15px}
.cw-biz b{display:block;font-weight:600;font-size:15px;color:var(--cw-ink);white-space:nowrap}
.cw-biz small{display:block;font-size:12.5px;color:var(--muted)}
.cw-search{display:flex;align-items:center;gap:8px;width:260px;padding:7px 10px;border-radius:8px;background:var(--cw-card);box-shadow:var(--cw-raise);color:var(--muted);font-size:14px;white-space:nowrap;text-align:left}
.cw-search kbd{margin-left:auto;font:inherit;font-size:12px;padding:0 6px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line2)}
.cw-search:hover{box-shadow:var(--cw-raise-hi)}
.cw-me{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.cw-me i{width:28px;height:28px;border-radius:50%;background:var(--panel3);color:var(--cw-ink);display:grid;place-items:center;font-style:normal;font-weight:600;font-size:12.5px}

/* ---------- the left navigation ---------- */
.cw-nav{background:var(--cw-side);box-shadow:1px 0 0 var(--line);padding:12px 10px;display:flex;flex-direction:column;gap:2px;min-height:0}
.cw-nav button{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:14.5px;color:var(--muted);text-align:left;transition:background .15s,color .15s}
.cw-nav button:hover{color:var(--cw-ink);background:rgba(127,140,170,.08)}
.cw-nav button.on{color:var(--cw-ink);background:var(--cw-sel);box-shadow:inset 2px 0 0 var(--blue-hi)}
.cw-nav button em{margin-left:auto;font-style:normal;font-size:12px;min-width:20px;text-align:center;padding:0 6px;border-radius:99px;background:var(--blue);color:#fff}
.cw-nav h6{font-size:12px;font-weight:600;color:var(--dim);padding:14px 10px 4px;margin:0;letter-spacing:.02em}
.cw-nav .cw-fav svg{color:var(--blue-hi)}
.cw-nav .cw-save{color:var(--dim);font-size:13.5px}
.cw-nav .cw-sample{margin-top:auto;padding:10px;font-size:12.5px;color:var(--dim);border-top:1px solid var(--line)}

/* ---------- the main area ---------- */
.cw-main{position:relative;min-width:0;min-height:0;padding:16px 22px 0;overflow:hidden}
.cw-view{display:none}.cw-view.on{display:block;animation:cwIn .3s var(--ease)}
@keyframes cwIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.cw-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}
.cw-h h4{margin:0;font-family:var(--body);font-size:24px;font-weight:600;letter-spacing:-.01em;color:var(--cw-ink);line-height:1.1}
.cw-h small{display:block;margin-top:3px;font-size:13.5px;color:var(--muted)}
.cw-b{padding:7px 12px;border-radius:8px;font-size:14px;font-weight:500;background:var(--cw-card);box-shadow:var(--cw-raise);color:var(--cw-ink);transition:box-shadow .15s,background .15s;white-space:nowrap}
.cw-b:hover{box-shadow:var(--cw-raise-hi)}
.cw-b.p{background:var(--blue);color:#fff;box-shadow:none}
.cw-b.p:hover{background:var(--blue2)}
.cw-sample-tag{font-size:12.5px;color:var(--muted);padding:3px 9px;border-radius:99px;box-shadow:inset 0 0 0 1px var(--line2)}

/* priorities strip */
.cw-prio{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;background:rgba(51,85,224,.12);font-size:13.5px;color:var(--muted);margin-bottom:10px}
.cw-prio b{color:var(--cw-ink);font-weight:600}
html.light .cw-prio{background:#EEF2FF}

/* the queues: a numbers strip (the fly-through dives into it) */
.cw-queues{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:10px}
.cw-queues button{text-align:left;padding:8px 12px;border-radius:10px;background:var(--cw-card);box-shadow:var(--cw-raise);transition:box-shadow .15s}
.cw-queues button:hover{box-shadow:var(--cw-raise-hi)}
.cw-queues button.on{box-shadow:inset 0 -3px 0 var(--blue-hi),var(--cw-raise-hi)}
.cw-queues b{display:block;font-family:var(--head);font-size:30px;font-weight:600;line-height:1;color:var(--cw-ink)}
.cw-queues small{font-size:13px;color:var(--muted)}
.cw-queues button.hot b{color:var(--blue-hi)}

.cw-find{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.cw-find input,.cw-find select,.cw-panel input,.cw-panel select,.cw-panel textarea{padding:7px 10px;border-radius:8px;border:0;background:var(--cw-card);box-shadow:var(--cw-raise);font-size:14px;outline:none}
.cw-find input{flex:1;min-width:0}
.cw-find input:focus,.cw-panel :is(input,select,textarea):focus{box-shadow:inset 0 0 0 2px var(--blue-hi)}
.cw-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 10px;border-radius:99px;background:var(--cw-sel);color:var(--cw-ink);font-size:13px;white-space:nowrap}
.cw-chip button{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;color:var(--muted)}
.cw-chip button:hover{background:rgba(127,140,170,.2);color:var(--cw-ink)}

/* task rows */
.cw-list{border-radius:10px;background:var(--cw-card);box-shadow:var(--cw-raise);overflow:hidden}
.cw-row{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:6px 12px;box-shadow:0 1px 0 var(--line);transition:background .15s}
.cw-row:last-child{box-shadow:none}
.cw-row:hover{background:rgba(127,140,170,.06)}
.cw-row.sel{background:var(--cw-sel)}
.cw-row.flash{animation:cwFlash 1s var(--ease)}
@keyframes cwFlash{0%{background:rgba(51,85,224,.35)}100%{background:transparent}}
.cw-row input[type=checkbox]{width:16px;height:16px;accent-color:var(--blue);margin:0}
.cw-row .t{display:block;font-size:14.5px;font-weight:600;color:var(--cw-ink);text-align:left;padding:0;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cw-row .t:hover{color:var(--blue-hi);text-decoration:underline}
.cw-row .m{display:block;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cw-row .pin{font-size:12.5px;color:var(--blue-hi);padding:3px 6px;border-radius:6px}
.cw-row .pin:hover{background:var(--cw-sel)}
.cw-row .pin.on{color:var(--cw-ink)}
.cw-st{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:99px;white-space:nowrap;background:rgba(127,140,170,.14);color:var(--muted)}
.cw-st.open{background:rgba(51,85,224,.16);color:var(--blue-hi)}
.cw-st.review{background:rgba(255,190,60,.14);color:var(--cw-warn)}
.cw-st.waiting{background:rgba(127,140,170,.16);color:var(--muted)}
.cw-st.blocked{background:rgba(229,72,77,.14);color:var(--cw-bad)}
.cw-st.done{background:rgba(63,184,127,.16);color:var(--cw-ok)}
.cw-empty{padding:26px 14px;text-align:center;color:var(--muted);font-size:14px}
.cw-empty b{color:var(--cw-ink)}

/* the docked bulk bar */
.cw-bulk{position:absolute;left:50%;bottom:14px;transform:translate(-50%,140%);display:flex;align-items:center;gap:4px;padding:6px;border-radius:12px;
  background:var(--cw-side);box-shadow:0 0 0 1px var(--line2),0 16px 34px -10px rgba(0,0,0,.6);transition:transform .25s var(--ease);z-index:4;white-space:nowrap}
html.light .cw-bulk{box-shadow:0 0 0 1px rgba(16,24,40,.08),0 16px 34px -10px rgba(16,24,40,.35)}
.cw-bulk.on{transform:translate(-50%,0)}
.cw-bulk b{padding:0 10px;font-size:14px;color:var(--cw-ink)}
.cw-bulk button{padding:6px 10px;border-radius:8px;font-size:13.5px;color:var(--cw-ink)}
.cw-bulk button:hover{background:var(--cw-sel)}
.cw-bulk button.p{background:var(--blue);color:#fff}
.cw-bulk .q{padding:0 8px;font-size:13.5px;color:var(--muted)}
.cw-bulk .q strong{color:var(--cw-ink);font-weight:600}
.cw-menu{position:absolute;bottom:calc(100% + 6px);display:none;flex-direction:column;min-width:150px;padding:4px;border-radius:10px;background:var(--cw-side);box-shadow:0 0 0 1px var(--line2),0 12px 28px -8px rgba(0,0,0,.5)}
.cw-menu.on{display:flex}
.cw-menu button{text-align:left}

/* the task side panel */
.cw-panel{position:absolute;top:0;right:0;bottom:0;width:380px;max-width:100%;display:flex;flex-direction:column;background:var(--cw-side);
  box-shadow:-1px 0 0 var(--line),-24px 0 40px -20px rgba(0,0,0,.6);transform:translateX(105%);transition:transform .28s var(--ease);z-index:5}
html.light .cw-panel{box-shadow:-1px 0 0 #E2E6EE,-24px 0 40px -20px rgba(16,24,40,.25)}
.cw-panel.on{transform:none}
.cw-ph{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px}
.cw-ph h5{margin:0;font-size:17px;font-weight:600;color:var(--cw-ink)}
.cw-x{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line2)}
.cw-x:hover{color:var(--cw-ink);box-shadow:inset 0 0 0 1px var(--blue-hi)}
.cw-ctx{margin:0 16px 10px;padding:10px 12px;border-radius:10px;background:var(--cw-card);box-shadow:var(--cw-raise);font-size:13px;color:var(--muted)}
.cw-ctx b{color:var(--cw-ink);font-size:14.5px;font-weight:600}
.cw-ctx .lnk{color:var(--blue-hi);font-size:13px;padding:0;margin-top:4px}
.cw-ctx .lnk:hover{text-decoration:underline}
.cw-pb{flex:1;min-height:0;overflow:auto;padding:0 16px 10px;display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;align-content:start}
.cw-pb label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:var(--muted)}
.cw-pb label.w{grid-column:1/-1}
.cw-pb textarea{resize:none;height:56px;font-family:inherit}
.cw-hist{grid-column:1/-1;margin:2px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--muted)}
.cw-hist li{display:flex;gap:8px;padding:4px 0;box-shadow:0 1px 0 var(--line)}
.cw-hist li span{flex:none;width:58px;color:var(--dim)}
.cw-hist li.auto b{color:var(--blue-hi);font-weight:600}
.cw-pf{display:flex;gap:8px;padding:10px 16px 14px;box-shadow:0 -1px 0 var(--line)}
.cw-pf .ok{margin-left:auto}
.cw-plist{grid-column:1/-1;display:flex;flex-direction:column;gap:6px}
.cw-plist button{text-align:left;padding:8px 10px;border-radius:8px;background:var(--cw-card);box-shadow:var(--cw-raise);font-size:13.5px}
.cw-plist button:hover{box-shadow:var(--cw-raise-hi)}
.cw-plist small{display:block;color:var(--muted);font-size:12.5px}

/* the Undo note */
.cw-toast{position:absolute;left:50%;bottom:14px;transform:translate(-50%,140%);display:flex;align-items:center;gap:12px;padding:8px 8px 8px 14px;border-radius:12px;
  background:var(--cw-side);box-shadow:0 0 0 1px var(--line2),0 16px 34px -10px rgba(0,0,0,.6);font-size:14px;color:var(--cw-ink);transition:transform .25s var(--ease);z-index:4}
.cw-toast.on{transform:translate(-50%,0)}

/* other views */
.cw-table{width:100%;border-collapse:collapse;font-size:14px;border-radius:10px;background:var(--cw-card);box-shadow:var(--cw-raise);overflow:hidden}
.cw-table th{font-size:12.5px;font-weight:600;color:var(--dim);text-align:left;padding:8px 12px;box-shadow:0 1px 0 var(--line)}
.cw-table td{padding:8px 12px;box-shadow:0 1px 0 var(--line);color:var(--muted)}
.cw-table tr:last-child td{box-shadow:none}
.cw-table td:first-child button{font-weight:600;color:var(--cw-ink);padding:0;text-align:left}
.cw-table td:first-child button:hover{color:var(--blue-hi);text-decoration:underline}
.cw-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.cw-col{border-radius:10px;padding:10px;background:rgba(127,140,170,.06);box-shadow:inset 0 0 0 1px var(--line)}
html.light .cw-col{background:rgba(16,24,40,.03)}
.cw-col h6{display:flex;justify-content:space-between;margin:0 0 8px;font-size:13px;font-weight:600;color:var(--muted)}
.cw-card{display:block;width:100%;text-align:left;padding:9px 10px;margin-bottom:8px;border-radius:8px;background:var(--cw-card);box-shadow:var(--cw-raise);font-size:14px;font-weight:600;color:var(--cw-ink)}
.cw-card:hover{box-shadow:var(--cw-raise-hi)}
.cw-card small{display:block;font-weight:400;font-size:12.5px;color:var(--muted)}
.cw-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}
.cw-kpis div{padding:14px 16px;border-radius:10px;background:var(--cw-card);box-shadow:var(--cw-raise)}
.cw-kpis b{display:block;font-family:var(--head);font-size:38px;font-weight:600;line-height:1;color:var(--cw-ink)}
.cw-kpis small{font-size:13.5px;color:var(--muted)}
.cw-kpis .up{color:var(--cw-ok)}
.cw-two{display:grid;grid-template-columns:1.2fr 1fr;gap:12px}
.cw-box{padding:14px 16px;border-radius:10px;background:var(--cw-card);box-shadow:var(--cw-raise)}
.cw-box h6{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--cw-ink)}
.cw-bar{display:grid;grid-template-columns:130px 1fr 40px;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);margin-bottom:8px}
.cw-bar i{height:8px;border-radius:99px;background:rgba(127,140,170,.16);position:relative;overflow:hidden}
.cw-bar i::after{content:"";position:absolute;inset:0;width:var(--w);border-radius:inherit;background:var(--blue-hi)}
.cw-bar b{color:var(--cw-ink);font-weight:600;text-align:right}
.cw-mods{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.cw-mod{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;background:var(--cw-card);box-shadow:var(--cw-raise)}
.cw-mod b{display:block;font-size:14.5px;color:var(--cw-ink);font-weight:600}
.cw-mod small{font-size:12.5px;color:var(--muted)}
.cw-sw{margin-left:auto;width:40px;height:22px;border-radius:99px;background:rgba(127,140,170,.3);position:relative;transition:background .15s;flex:none}
.cw-sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.cw-sw[aria-checked=true]{background:var(--blue)}
.cw-sw[aria-checked=true]::after{transform:translateX(18px)}
.cw .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* phones: the nav becomes a strip on top, the panel covers the demo */
@media (max-width:860px){
  .cw{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;height:640px}
  .cw-search{width:auto}.cw-search span,.cw-search kbd,.cw-me span{display:none}
  .cw-nav{flex-direction:row;align-items:center;overflow-x:auto;padding:8px;box-shadow:0 1px 0 var(--line)}
  .cw-nav [data-favs]{display:contents}
  .cw-nav h6,.cw-nav .cw-sample,.cw-nav .cw-save{display:none}
  .cw-nav button{flex:none}
  .cw-main{padding:12px 12px 0}
  .cw-queues{grid-template-columns:repeat(5,minmax(84px,1fr));overflow-x:auto}
  .cw-row{grid-template-columns:24px minmax(0,1fr) auto}.cw-row .pin{display:none}
  .cw-panel{width:100%}
  .cw-kpis,.cw-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cw-two,.cw-mods{grid-template-columns:1fr}
  .cw-bulk{left:8px;right:8px;transform:translateY(140%);overflow-x:auto}.cw-bulk.on{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .cw *,.cw{animation:none!important;transition:none!important}
}

/* ---------- the guided tour (W13, fly-through station 5): one part lit, the rest dimmed, one caption ---------- */
.cw.touring::after{content:"";position:absolute;inset:0;z-index:20;pointer-events:none;background:rgba(6,9,18,.42);animation:cwIn .3s var(--ease)}
html.light .cw.touring::after{background:rgba(236,240,247,.55)}
.cw.touring .cw-lit{position:relative;z-index:21;border-radius:12px;box-shadow:0 0 0 2px var(--blue-hi),0 0 0 7px rgba(51,85,224,.22),0 24px 44px -20px rgba(51,85,224,.7)}
.cw.touring .cw-panel.cw-lit{position:absolute;border-radius:0}
.cw.touring .cw-bulk.cw-lit{position:absolute}
.cw-bubble{position:absolute;z-index:22;display:none;align-items:center;gap:14px;max-width:440px;padding:12px 12px 12px 18px;border-radius:14px;
  background:var(--blue);color:#fff;font-size:16px;font-weight:600;line-height:1.3;box-shadow:0 18px 40px -14px rgba(51,85,224,.8)}
.cw-bubble.on{display:flex;animation:cwIn .35s var(--ease)}
.cw-bubble .cw-b{flex:none;background:#fff;color:#1d2f99;font-weight:700;padding:8px 14px;border-radius:9px}
.cw-bubble[data-at=queues]{left:240px;top:236px}
.cw-bubble[data-at=panel]{right:404px;bottom:40px;max-width:360px}
.cw-bubble[data-at=biz]{left:236px;bottom:28px;max-width:460px}
.cw-bubble[data-at=claude]{left:236px;bottom:28px;max-width:420px}
.cw-bubble::before{content:"";position:absolute;width:14px;height:14px;background:inherit;transform:rotate(45deg)}
.cw-bubble[data-at=queues]::before{left:40px;top:-6px}
.cw-bubble[data-at=panel]::before{right:-6px;top:22px}
.cw-bubble[data-at=biz]::before,.cw-bubble[data-at=claude]::before{display:none}
@media (max-width:859px){.cw-bubble{left:12px!important;right:12px;bottom:12px!important;top:auto!important;transform:none!important;max-width:none}.cw-bubble::before{display:none}}

/* tour step 4: the same Command Center, run from Claude (the CRM's MCP door, live since 2026-10-11) */
.cw-claude{position:absolute;right:22px;top:76px;width:400px;z-index:21;display:none;padding:14px 16px;border-radius:14px;
  background:var(--cw-side);box-shadow:0 0 0 1px var(--line2),0 24px 50px -18px rgba(0,0,0,.6);font-size:14.5px;line-height:1.4}
.cw-claude.on{display:block;animation:cwIn .35s var(--ease)}
.cw.touring .cw-claude.cw-lit{position:absolute;border-radius:14px}
.cw-cl-h{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cw-cl-h i{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#D97757;color:#fff}
.cw-cl-h b{color:var(--cw-ink)}.cw-cl-h small{color:var(--muted);font-size:12.5px}
.cw-cl-me{margin:0 0 8px auto;max-width:88%;padding:9px 12px;border-radius:12px 12px 4px 12px;background:var(--blue);color:#fff}
.cw-cl-ai{margin:0 0 10px;padding:9px 12px;border-radius:12px 12px 12px 4px;background:var(--cw-card);box-shadow:var(--cw-raise)}
.cw-cl-ai b{color:var(--cw-ink)}
.cw-cl-f{display:block;font-size:12.5px;color:var(--muted)}
html.light .cw-claude{box-shadow:0 0 0 1px rgba(16,24,40,.08),0 24px 50px -18px rgba(16,24,40,.35)}