/* Spotsheet · Collaborators window (DH #445). Built on tokens.css + nt-* kit.
   Teal reserved for the primary path. Extracted from the design's .co-* block;
   .co-backdrop overridden to a real fixed-viewport modal. */

.co-backdrop { position: fixed; inset: 0; z-index: 1000; background: rgba(8,10,12,.55);
               backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
               display: flex; align-items: center; justify-content: center; padding: 26px; }

.co-window { background: var(--bg-panel); border: 1px solid var(--line); border-radius: var(--r-sheet);
             box-shadow: var(--float); display: flex; flex-direction: column; overflow: hidden;
             max-width: 94vw; max-height: 90vh; }

/* header */
.co-head { flex-shrink: 0; display: flex; align-items: center; gap: 12px;
           padding: 16px 16px 15px 20px; border-bottom: 1px solid var(--line-soft); }
.co-head-titles { display: flex; flex-direction: column; gap: 4px; margin-right: auto; }
.co-title { font-size: 16px; color: var(--fg-strong); font-weight: 500; letter-spacing: -.01em; }

/* tools */
.co-tools { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 12px 20px;
            border-bottom: 1px solid var(--line-soft); background: var(--bg-app); }
.co-searchwrap { flex: 1; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px;
                 background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r-2);
                 box-shadow: inset 0 1px 2px rgba(0,0,0,.45); transition: border-color .15s, box-shadow .15s; }
.co-searchwrap:focus-within { border-color: var(--teal-line); box-shadow: inset 0 1px 2px rgba(0,0,0,.45), 0 0 0 3px var(--teal-glow); }
.co-searchwrap svg { color: var(--fg-dim); flex-shrink: 0; }
.co-searchwrap.lg { height: 38px; }
.co-search { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--fg);
             font-family: var(--ui); font-size: 13px; }
.co-search::placeholder { color: var(--fg-dim); }
.co-search-x { background: transparent; border: 0; color: var(--fg-dim); cursor: pointer; display: inline-flex;
               padding: 2px; border-radius: 50%; }
.co-search-x:hover { color: var(--fg); background: var(--bg-row-hover); }

/* segmented control */
.co-seg { display: inline-flex; background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r-2);
          padding: 2px; gap: 2px; box-shadow: inset 0 1px 2px rgba(0,0,0,.4); }
.co-seg-opt { font-family: var(--ui); font-size: 12px; color: var(--fg-mute); background: transparent; border: 0;
              border-radius: var(--r-1); padding: 5px 13px; cursor: pointer; transition: background .12s, color .12s; }
.co-seg.sm .co-seg-opt { font-size: 11px; padding: 4px 10px; }
.co-seg-opt:hover { color: var(--fg); }
.co-seg-opt.on { background: var(--bg-row-sel); color: var(--fg-strong); box-shadow: inset 0 0 0 1px var(--teal-line); }

/* body + groups */
.co-body { flex: 1; overflow: auto; padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 24px; }
.co-group { display: flex; flex-direction: column; }
.co-group-h { display: flex; align-items: center; gap: 9px; padding: 0 2px 10px; }
.co-group-n { font-size: 10px; color: var(--fg-faint); }
.co-group-hint { margin-left: auto; font-size: 11px; color: var(--fg-dim); }
.co-noresult { font-size: 11px; color: var(--fg-dim); padding: 10px 2px; }

/* active row */
.co-row { display: flex; align-items: center; gap: 13px; padding: 11px 12px; margin-bottom: 8px;
          border: 1px solid var(--line-soft); border-radius: var(--r-2); background: var(--bg-row);
          cursor: pointer; transition: border-color .12s, background .12s; }
.co-row:hover { border-color: var(--line); background: var(--bg-row-hover); }
.co-row-id { display: flex; flex-direction: column; gap: 2px; min-width: 168px; }
.co-row-name { font-size: 13px; color: var(--fg-strong); }
.co-row-email { font-size: 11px; color: var(--fg-dim); }
.co-projsum { flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; background: transparent;
              border: 0; cursor: pointer; text-align: left; padding: 6px 8px; border-radius: var(--r-2); transition: background .12s; }
.co-projsum:hover { background: var(--bg-sub); }
.co-projsum-n { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--bg-deep);
                border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; color: var(--fg); }
.co-projsum-names { font-size: 12px; color: var(--fg-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-projsum-more { color: var(--fg-dim); }
.co-projsum-none { font-size: 12px; color: var(--fg-faint); font-style: italic; }
.co-row-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }

/* pending row · dashed, amber-tinted */
.co-prow { display: flex; align-items: center; gap: 13px; padding: 11px 12px; margin-bottom: 8px;
           border: 1px dashed var(--line-strong); border-radius: var(--r-2); background: rgba(193,147,85,.045); }
.co-prow-id { display: flex; flex-direction: column; gap: 5px; margin-right: auto; min-width: 0; }
.co-prow-email { font-size: 13px; color: var(--fg-strong); }
.co-prow-meta { display: flex; align-items: center; gap: 9px; }
.co-prow-when { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--fg-dim); }
.co-prow-when svg { color: var(--st-flagged); }
.co-av-pending { opacity: .7; background: var(--bg-sub) !important; color: var(--fg-mute); border: 1px dashed var(--line-strong); }

/* state pill */
.co-state-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px;
                 letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-1); }
.co-state-pill.active { color: var(--st-resolved); border: 1px solid var(--st-resolved); background: var(--st-resolved-bg); }
.co-state-pill .co-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* sub-panels (add / assign / detail) */
.co-sub { display: flex; flex-direction: column; height: 100%; }
.co-sub-head { flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 13px 16px 13px 14px; border-bottom: 1px solid var(--line-soft); }
.co-back { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px 0 7px;
           background: var(--bg-sub); border: 1px solid var(--line); border-radius: var(--r-2);
           color: var(--fg-mute); font-family: var(--ui); font-size: 12px; cursor: pointer; flex-shrink: 0; }
.co-back:hover { color: var(--fg); border-color: var(--line-strong); }
.co-sub-titles { display: flex; align-items: center; gap: 11px; margin-right: auto; min-width: 0; }
.co-sub-tcol { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.co-sub-title { font-size: 14.5px; color: var(--fg-strong); font-weight: 500; letter-spacing: -.005em; }
.co-sub-email { font-size: 11.5px; color: var(--fg-dim); }
.co-sub-icon, .co-sub-iconwrap { width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: var(--teal-bg);
                border: 1px solid var(--teal-line); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; }
.co-sub-body { flex: 1; overflow: auto; padding: 16px 18px 22px; display: flex; flex-direction: column; }
.co-sub-foot { flex-shrink: 0; display: flex; align-items: center; gap: 9px; padding: 12px 18px; border-top: 1px solid var(--line-soft); }
.co-foot-note, .co-remove-note { font-size: 11.5px; color: var(--fg-dim); }
.co-remove-note { margin-left: 2px; }

/* assign tools + always-note */
.co-assign-tools { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 12px 18px;
                   border-bottom: 1px solid var(--line-soft); background: var(--bg-app); }
.co-assign-count { font-size: 11px; color: var(--fg-dim); flex-shrink: 0; }
.co-always-note { display: inline-flex; align-items: flex-start; gap: 8px; font-size: 11.5px; color: var(--fg-dim); line-height: 1.45; max-width: 460px; }
.co-always-note svg { color: var(--fg-mute); margin-top: 1px; flex-shrink: 0; }
.co-always-note b { color: var(--fg-mute); font-weight: 500; }

/* project assign row */
.co-par { border: 1px solid var(--line-soft); border-radius: var(--r-2); margin-bottom: 9px; background: var(--bg-row); overflow: hidden; transition: border-color .12s; }
.co-par.on { border-color: var(--line); background: var(--bg-panel); }
.co-par-head { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer; padding: 11px 13px; }
.co-checkbox { width: 17px; height: 17px; flex-shrink: 0; border-radius: var(--r-1); border: 1px solid var(--line-strong);
               background: var(--bg-deep); display: inline-flex; align-items: center; justify-content: center; color: var(--teal); }
.co-checkbox.sm { width: 15px; height: 15px; }
.co-par.on .co-checkbox { border-color: var(--teal-line); background: var(--teal-bg); }
.co-folder { color: var(--fg-dim); display: inline-flex; flex-shrink: 0; }
.co-par.on .co-folder { color: var(--fg-mute); }
.co-par-id { display: flex; flex-direction: column; gap: 1px; margin-right: auto; }
.co-par-name { font-size: 13px; color: var(--fg); }
.co-par.on .co-par-name { color: var(--fg-strong); }
.co-par-meta { font-size: 10.5px; color: var(--fg-dim); }
.co-par-off { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); margin-left: auto; }
.co-par-grants { display: flex; flex-direction: column; border-top: 1px solid var(--line-soft); background: var(--bg-deep); }
.co-grow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 13px 9px 42px; border-bottom: 1px solid var(--line-soft); }
.co-grow:last-child { border-bottom: 0; }
.co-grow-tab { display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 0; cursor: pointer; padding: 0; }
.co-grow.on .co-checkbox { border-color: var(--teal-line); background: var(--teal-bg); }
.co-grow-name { font-size: 12.5px; color: var(--fg-mute); }
.co-grow.on .co-grow-name { color: var(--fg); }
.co-grow-none { font-family: var(--mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-faint); }
.co-grow-level { background: var(--bg-panel); }
.co-grow-level .co-grow-name { color: var(--fg); }

/* project grant chips (detail) */
.co-pgchips { display: inline-flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.co-pgchip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--fg-mute); background: var(--bg-sub);
             border: 1px solid var(--line); border-radius: var(--r-1); padding: 2px 4px 2px 7px; }
.co-pgchip i { font-style: normal; font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase;
               color: var(--fg-dim); border-left: 1px solid var(--line); padding-left: 5px; }
.co-pgchip.lvl-write { border-color: var(--teal-line); }
.co-pgchip.lvl-write i { color: var(--teal); }
.co-pg-base { font-size: 10px; color: var(--fg-faint); letter-spacing: .06em; }

/* ADD flow */
.co-add-search { flex-shrink: 0; padding: 14px 18px 14px; border-bottom: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; background: var(--bg-app); }
.co-add-group { display: flex; flex-direction: column; gap: 9px; }
.co-add-group > .nt-label { margin-bottom: 2px; }
.co-add-none { font-size: 11px; color: var(--fg-dim); padding: 8px 2px; line-height: 1.5; }
.co-add-err { font-size: 11.5px; color: var(--st-flagged); }
.co-dirow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: var(--r-2); background: var(--bg-row); }
.co-dirow.added { border-color: var(--teal-line); background: var(--teal-bg); }
.co-dirow-id { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.co-dirow-name { font-size: 13px; color: var(--fg-strong); }
.co-dirow-email { font-size: 11px; color: var(--fg-dim); }
.co-dirow-org { font-size: 11px; color: var(--fg-mute); margin-right: 10px; }
.co-added-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--st-resolved); font-family: var(--mono); letter-spacing: .04em; }
.co-invite-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg-row); }
.co-invite-top { display: flex; gap: 13px; align-items: flex-start; }
.co-invite-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--teal-bg); border: 1px solid var(--teal-line); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; }
.co-invite-txt { display: flex; flex-direction: column; gap: 5px; }
.co-invite-title { font-size: 13.5px; color: var(--fg-strong); }
.co-invite-sub { font-size: 12px; color: var(--fg-mute); line-height: 1.55; }
.co-invite-sub b { color: var(--fg); font-weight: 500; }
.co-link-out { display: flex; gap: 8px; align-items: center; }
.co-link-field { flex: 1; height: 34px; display: flex; align-items: center; padding: 0 12px; font-size: 12px; color: var(--fg);
                 background: var(--bg-deep); border: 1px solid var(--line); border-radius: var(--r-2); box-shadow: inset 0 1px 2px rgba(0,0,0,.45);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.co-invite-foot { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--fg-dim); letter-spacing: .04em; }
.co-invite-foot svg { color: var(--st-flagged); }

/* DETAIL */
.co-detail-meta { flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--line-soft); background: var(--bg-app); }
.co-detail-metaitem { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fg-mute); }
.co-detail-metaitem svg { color: var(--fg-dim); }
.co-detail-body { gap: 0; }
.co-detail-grouphead { display: flex; align-items: baseline; gap: 10px; padding: 0 2px 12px; }
.co-detail-alwaysline { margin-left: auto; font-size: 9.5px; color: var(--fg-faint); letter-spacing: .08em; }
.co-dprow { display: flex; align-items: center; gap: 11px; padding: 11px 12px; margin-bottom: 7px; border: 1px solid var(--line-soft); border-radius: var(--r-2); background: var(--bg-row); }
.co-dprow-name { font-size: 13px; color: var(--fg); }
.co-detail-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; border: 1px dashed var(--line-strong); border-radius: var(--r-2); font-size: 12.5px; color: var(--fg-mute); }

/* EMPTY */
.co-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 30px; }
.co-empty-stack { display: flex; align-items: center; margin-bottom: 24px; }
.co-empty-stack .nt-as { box-shadow: 0 0 0 3px var(--bg-panel); }
.co-empty-link { width: 38px; height: 38px; border-radius: 50%; margin-left: -8px; z-index: 2; background: var(--teal-bg); border: 1px dashed var(--teal-line);
                 color: var(--teal); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--bg-panel); }
.co-empty-ghost { width: 38px; height: 38px; border-radius: 50%; margin-left: -8px; background: var(--bg-sub); border: 1px dashed var(--line-strong); box-shadow: 0 0 0 3px var(--bg-panel); opacity: .6; }
.co-empty-ghost.two { opacity: .35; }
.co-empty-title { font-size: 20px; color: var(--fg-strong); font-weight: 500; margin: 0 0 12px; letter-spacing: -.01em; }
.co-empty-sub { font-size: 13px; color: var(--fg-mute); line-height: 1.6; margin: 0 0 24px; max-width: 430px; }
.co-empty-meta { display: flex; align-items: center; gap: 12px; font-size: 11.5px; color: var(--fg-dim); margin-top: 20px; }
.co-empty-meta span { display: inline-flex; align-items: center; gap: 6px; }
.co-empty-meta svg { color: var(--fg-mute); }
.co-dotsep { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-faint); }