/* The collab window around collab-app.css: the frame, the comment the canvas paints (paint.ts: a tint, a 1.5 px
   edge, a numbered pin), and what the app does not have yet: faces in the header, coworkers' pointers and
   selections, and the Comments panel with names and replies. */
#outcome-app{position:relative}
.cx-win{position:absolute;left:0;top:0;z-index:1;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(18,21,26,.08),0 2px 6px rgba(18,21,26,.05),0 50px 100px -40px rgba(16,26,48,.36)}
.cw.cx-bare{border-radius:14px}
.cw{--c-field:rgba(18,21,26,.045);--c-amber:#d9a21b;--left-w:340px;--right-w:272px}

/* the bare view (⌘\): the canvas alone */
.cw .a-app.a-bare{grid-template-columns:0 minmax(0,1fr) 0;grid-template-rows:0 minmax(0,1fr)}
.cw .a-bare .a-stage{padding:0}
.cw .a-bare .a-well{border-radius:0;box-shadow:none}
/* on phones the thread card covers the tools, so they stay out of the picture */
.cw .a-bare .a-tool-rail,.cw .a-bare .a-zoom{display:none}

/* buttons the film did not need */
.cw .a-btn.a-sm{height:26px}
.cw .a-btn.a-sm.a-icon{width:26px}
.cw .a-btn.a-sm svg{width:14px;height:14px}

/* faces of the people in the document */
.cw .a-faces{display:flex;align-items:center;padding:0 2px}
.cw .a-faces i{width:24px;height:24px;border-radius:50%;color:#fff;font:600 10.5px/24px var(--f-ui);font-style:normal;text-align:center;box-shadow:0 0 0 2px var(--c-surface)}
.cw .a-faces i+i{margin-left:-6px}

/* the conversation scrolled to its end: what runs off the top goes softly */
.cw .a-feed{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26px);mask-image:linear-gradient(to bottom,transparent 0,#000 26px)}

/* the Comments panel on the right */
.cw .a-sidebar{padding:0;gap:0;overflow:hidden}
.cw .a-cpanel{display:flex;flex-direction:column}
.cw .a-cpanel .a-segmented{margin:10px 12px 8px}
.cw .a-count{display:none;place-items:center;min-width:16px;height:16px;padding:0 4px;margin-left:6px;border-radius:999px;background:var(--c-amber);color:#fff;font:700 10px/16px var(--f-ui);font-style:normal}
.cw .a-cempty{display:flex;flex-direction:column;align-items:center;gap:6px;margin:44px 24px 0;text-align:center;font-size:var(--fs-sm);line-height:1.5;color:var(--c-ink-3)}
.cw .a-cempty svg{color:var(--c-ink-3);margin-bottom:4px}
.cw .a-cempty b{font-size:var(--fs-base);font-weight:600;color:var(--c-ink-2)}
.cw .a-cfoot{margin:auto 14px 14px;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--c-ink-3)}
.cw .a-cfoot svg{width:12px;height:12px}

/* a thread */
.cw .a-thread{display:none;flex-direction:column;gap:11px;margin:4px 12px 0;padding:12px;border-radius:var(--r-card);background:var(--c-white);border:1px solid var(--c-line);box-shadow:0 1px 2px rgba(18,21,26,.04),0 12px 28px -16px rgba(18,21,26,.18)}
.cw .a-th-head{display:flex;align-items:center;gap:8px;height:22px;font-size:11.5px;color:var(--c-ink-3)}
.cw .a-th-head .a-sp{flex:1}
.cw .a-th-head .a-btn{color:var(--c-ink-3);margin-right:-6px}
.cw .a-pin{flex:none;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--c-amber);color:#fff;font-size:var(--fs-micro);font-weight:700;line-height:18px;text-align:center}
.cw .a-msg{display:flex;align-items:flex-start;gap:9px}
.cw .a-av{flex:none;width:24px;height:24px;border-radius:50%;color:#fff;font:600 10.5px/24px var(--f-ui);text-align:center}
.cw .a-av.a-sm{width:18px;height:18px;font-size:9px;line-height:18px}
.cw .a-mb{flex:1;min-width:0}
.cw .a-mw{display:flex;align-items:baseline;gap:6px;font-size:var(--fs-sm);line-height:1.2}
.cw .a-mw b{font-weight:600;color:var(--c-ink)}
.cw .a-mw span{font-size:11px;color:var(--c-ink-3)}
.cw .a-msg p{margin:3px 0 0;font-size:12.5px;line-height:1.45;color:var(--c-ink)}
.cw .a-reply{display:none}
.cw .a-typing{display:none;align-items:center;gap:6px;height:18px;font-size:11.5px;color:var(--c-ink-3)}
.cw .a-typing i{width:4px;height:4px;border-radius:50%;background:var(--c-ink-3)}
.cw .a-typing span+i{margin-left:1px}
.cw .a-replybox{display:flex;align-items:center;height:32px;padding:0 10px;border-radius:var(--r-panel);background:var(--c-field);font-size:var(--fs-sm);color:var(--c-ink-3)}
/* on phones the thread lies over the canvas's corner, larger */
.cw.cx-float{position:absolute;transform-origin:0 0;background:none;z-index:2}
.cw.cx-float .a-thread{margin:0;box-shadow:0 0 0 1px rgba(18,21,26,.06),0 18px 40px -18px rgba(16,26,48,.4)}

/* on the canvas */
.cw .a-flabel{transform:none}
.cw .a-psel,.cw .a-cm,.cw .a-draft,.cw .a-cpin{position:absolute;left:0;top:0;pointer-events:none;opacity:0}
.cw .a-psel{border:1.5px solid;margin:-.75px 0 0 -.75px;box-sizing:content-box}
.cw .a-cm{background:rgba(250,158,26,.14);border:1.5px solid #f59e0b;margin:-.75px 0 0 -.75px;box-sizing:content-box}
.cw .a-draft{border:1.5px solid #f59e0b;margin:-.75px 0 0 -.75px;box-sizing:content-box}
.cw .a-cpin{width:22px;height:22px;border-radius:50%;background:#f59e0b;color:#fff;font:700 12px/22px var(--f-ui);text-align:center}
/* a caret in a coworker's colour, drawn the way the canvas draws one: 2 px, over the text */
.cw .a-caret{display:inline-block;position:relative;width:0;height:.92em;vertical-align:-.1em}
.cw .a-caret::after{content:'';position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--pc,#1769ff)}

/* the pointers: coworkers' in their colours with their names, yours the system's */
.cw .cx-pc{z-index:70}
.cw .cx-me{position:absolute;left:0;top:0;z-index:80;width:22px;height:22px;margin:-2.4px 0 0 -4.1px;transform-origin:4px 2.4px;pointer-events:none}
.cw .cx-me svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}

/* the designer in the thread and on the page: its mark as a face, Pen's flash on what it adds */
.cw .a-av.a-fw{background:var(--c-ink);color:#fff;display:grid;place-items:center}
.cw .a-av.a-fw svg{height:12px;width:auto}
.cw .a-av.a-sm.a-fw svg{height:9px}
.cw .a-typing .a-smark{margin-left:2px}
.cw .a-flash{position:absolute;left:0;top:0;border:2px solid #1769ff;border-radius:3px;overflow:hidden;pointer-events:none;z-index:40;opacity:0}
.cw .a-flash i{position:absolute;left:0;right:0;top:0;background:linear-gradient(180deg,rgba(23,105,255,0),rgba(23,105,255,.4))}
.cw #cx-dz{opacity:0}
.cw .a-src{opacity:0}