/* A5 CRM — clients.css. Owned by screens/clients.js (G5; DESIGN-STRIPE.md §6.4, §6.5, §5.12–5.13)
   #/clients  (.cl)  Stripe list: underline tabs, 28 px filter row (search + filter pills), the Stripe table with two-line
                     rows, a sticky totals footer and the bulk bar in the filter row; «Объекты» grid of bordered plan cards.
   #/client/:id (.cp) Stripe customer page: crumb, H1 + actions, subtitle, facts strip; main column left (deals mini table,
                     note composer, tabs, timeline), aside right (Контакты, Объекты, Метки).
   Every colour is a token of base.css (both themes); every class is prefixed cl- / cp-. */

/* ═════════════ LIST (§6.4) ═════════════ */
.cl{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);min-height:0;overflow:hidden}
.cl > .cl-tb{grid-row:1;grid-column:1}
.cl > .cl-main{grid-row:2;grid-column:1}

/* toolbar (DESIGN-CALM §16, the deals toolbar the owner picked, §13): row 1 = the contact kinds as underline tabs with
   their counts over a full-width hairline («Не сделки» apart at the right end); row 2 = search · «Список / Объекты» ·
   «Все / Мои» · «Фильтр» + the active filters as pills … count · ⋯ */
.cl-tb{display:grid;gap:16px;min-width:0;padding:0 var(--page-pad) 16px}
.cl-row{display:flex;align-items:center;gap:8px;min-width:0}
.cl-tbx{display:flex;flex-wrap:wrap;align-items:center;gap:8px;flex:1;min-width:0}
.cl-sp{flex:1 1 0;min-width:0}
.cl-count{flex:none;font:var(--t-body);color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.cl-count b{font-weight:600;color:var(--text-strong)}
/* the kind tabs: the shared .tabs, the ink as the tab's own 2 px line; they scroll sideways when the screen is narrow */
.cl .cl-kt{gap:24px;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.cl .cl-kt::-webkit-scrollbar{display:none}
.cl .cl-kt .tab{flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0}
.cl .cl-kt .tab.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:1px;background:var(--tab-ink)}
.cl .cl-kt .tab .n{margin-left:0;font-variant-numeric:tabular-nums}
.cl .cl-kt .tab:focus-visible{outline:var(--focus-outline);outline-offset:-2px}
.cl .cl-kt .tab.cl-non{margin-left:auto;color:var(--text-3)}
.cl .cl-kt .tab.cl-non.on,.cl .cl-kt .tab.cl-non:hover{color:var(--text-strong)}
/* views, then «Все / Мои» after a 1 px rule (as the deals and tasks bars) */
.cl .seg.cl-vw .n{margin-left:2px;font-weight:400;color:var(--text-3);font-variant-numeric:tabular-nums}
.cl .cl-whos{position:relative;margin-left:13px}
.cl .cl-whos::before{content:"";position:absolute;left:-13px;top:6px;bottom:6px;width:1px;background:var(--border)}
/* «Фильтр»: one control button with the number of active filters; each active filter = a pill with its own × */
.cl-flt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.cl .btn.cl-fb{gap:6px}
.cl .btn.cl-fb .ic{width:16px;height:16px;stroke-width:2;color:var(--icon)}
.cl-fbn{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--surface-pressed);font:var(--t-caption-strong);color:var(--text-strong);font-variant-numeric:tabular-nums}
.cl-fc{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 4px 0 10px;border-radius:999px;background:var(--surface-pressed);box-shadow:0 0 0 1px var(--border);font:var(--t-body-medium);color:var(--text-strong);white-space:nowrap}
.cl-fc .av{width:18px;height:18px;font-size:9px}
.cl-fc button{width:20px;height:20px;display:grid;place-items:center;border-radius:50%;color:var(--icon);transition:background-color var(--dur-1) linear,color var(--dur-1) linear}
.cl-fc button:hover{background:var(--surface-hover);color:var(--text-strong)}
.cl-fc button:focus-visible{box-shadow:var(--focus-ring)}
.cl-fc button .ic{width:12px;height:12px;stroke-width:2.4}
/* «Сбросить» = ghost action (DESIGN-CALM §3.10): --text-3, hover --text-strong */
.cl-reset{flex:none;height:28px;padding:0 4px;border-radius:var(--radius-xs);font:var(--t-body-strong);color:var(--text-3);white-space:nowrap;transition:color var(--dur-1)}
.cl-reset:hover{color:var(--text-strong)}

/* the sliding underline of the client page tabs (.cp-tabs) */
.cp-tabs > button:focus-visible{border-radius:var(--radius-xs)}
.cl-ink{position:absolute;left:0;bottom:0;width:0;height:2px;border-radius:1px;background:var(--tab-ink);pointer-events:none;transition:left var(--dur-3) var(--ease-out),width var(--dur-3) var(--ease-out)}
.cl-ink.no-anim{transition:none}

/* search (§5.5): a wrapper control, 240 → 320 on focus; keyline + ring come from components.css rule 2 */
/* the clear × floats over the right padding, so the field keeps its full width for the placeholder; a placeholder that is
   still longer than the 240 px rest width ends in an ellipsis (it shows in full at 320 on focus) */
.cl-search{position:relative;flex:none;display:flex;align-items:center;gap:8px;width:240px;height:var(--control-h);margin-right:8px;padding:0 6px 0 8px;cursor:text;transition:box-shadow var(--dur-1),width var(--dur-3) var(--ease-out)}
.cl-search:focus-within{width:320px}
.cl-search > .ic{flex:none;width:12px;height:12px;stroke-width:2.4;color:var(--text-3)}
.cl-search input{padding:0;text-overflow:ellipsis}
.cl-search.has input{padding-right:20px}
.cl-search .cl-x{position:absolute;top:50%;right:6px;margin-top:-8px;width:16px;height:16px;display:grid;place-items:center;border-radius:50%;color:var(--icon);opacity:0;pointer-events:none;transition:opacity var(--dur-2),background var(--dur-1),color var(--dur-1)}
.cl-search .cl-x .ic{width:12px;height:12px}
.cl-search.has .cl-x{opacity:1;pointer-events:auto}
.cl-search .cl-x:hover{background:var(--surface-hover);color:var(--icon-strong)}

/* main scroller: full width, content inside the gutter (§4.5) */
/* the 48 px end space is a spacer, not padding: sticky insets are measured inside the scroller's padding, so a bottom
   padding would park the sticky totals footer 48 px above the edge with rows showing beneath it */
.cl-main{position:relative;min-height:0;overflow:auto;overflow-anchor:none;padding:0 var(--page-pad);outline:0}   /* no anchoring: the virtual list sets its own rows */
.cl-main::after{content:"";display:block;height:48px}

/* table (§5.12): the shared .tbl look + 56 px two-line rows, 1000 px minimum; empty cells stay empty (DESIGN-CALM §16) */
.cl-t{width:100%;min-width:1000px;table-layout:fixed;border-collapse:separate;border-spacing:0}
.cl-t thead th.num,.cl-t td.num{text-align:right}
.cl-t :is(th,td):nth-child(2){padding-left:0}            /* checkbox column 36: the next column starts at 36 */
.cl-t td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background var(--dur-1)}
.cl-t tbody td{height:var(--row-h-2)}
.cl-t tbody tr{cursor:pointer}
.cl-t tbody tr:last-child td{border-bottom-color:var(--border-soft)}   /* the sticky footer's top rule closes the table */
.cl-t .cl-sb{display:inline-flex;align-items:center;gap:6px;height:24px;margin:0 -4px;padding:0 4px;border-radius:var(--radius-xs);transition:background var(--dur-1)}
.cl-t .cl-sb:hover{background:var(--surface-hover)}
.cl-t tbody tr.cl-new td{animation:cl-flash 1.4s var(--ease-out) backwards}
@keyframes cl-flash{from{background:var(--flash-bg)}to{background:transparent}}
@keyframes cl-fade{from{opacity:0}to{opacity:1}}
.cl-t.enter tbody tr{animation:cl-fade var(--dur-4) var(--ease-out) both;animation-delay:calc(var(--i,0) * 20ms)}

/* sticky totals footer */
.cl-t tfoot td{position:sticky;bottom:0;z-index:2;height:var(--row-h);border:0;background:var(--bg);box-shadow:inset 0 1px 0 var(--border);font:var(--t-body);color:var(--text-3);cursor:default}
/* the label cell spans 5 columns and scrolls with the table; only its text sticks beside the checkbox column (§4.6), so the
   totals to its right are never covered (overflow:clip keeps the cell from becoming the sticky text's scroll box) */
.cl-t tfoot td:nth-child(2){overflow:clip}
.cl-ft{position:sticky;left:36px;display:inline-block;vertical-align:middle}
.cl-t tfoot b{font-weight:600;color:var(--text-strong);font-variant-numeric:tabular-nums}
/* «22 ждут ответа»: quiet status (DESIGN-CALM §1.6): neutral 600 text, the colour lives only in a 6 px --dot-orange dot.
   «Waiting» has one dot hue on this screen: this dot, the avatar dot and the facts-strip dot are all --dot-orange; the
   clocks use --warning, the text-grade amber of the same family (a 12 px glyph needs 3:1, a dot beside a label does not) */
.cl-t tfoot .red{font-weight:600;color:var(--text-strong)}
.cl-t tfoot .red::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;vertical-align:2px;background:var(--dot-orange)}

/* checkbox glyphs (the box itself is components.css .cl-cb, list blue) */
.cl-cb{position:relative;vertical-align:middle}
.cl-cb .ic{grid-area:1/1;width:10px;height:10px;stroke-width:2.6;color:var(--on-accent);opacity:0;transform:scale(.6);transition:opacity var(--dur-2) var(--ease-out),transform 160ms var(--ease-spring)}
.cl-cb[aria-checked="true"] .ic{opacity:1;transform:none}
.cl-cb[aria-checked="mixed"]::after{content:"";grid-area:1/1;width:8px;height:2px;border-radius:1px;background:var(--on-accent)}

/* cells */
.cl-who{display:flex;align-items:center;gap:12px;min-width:0}
.cl-av{position:relative;flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font:600 12px/1 var(--font-sans)}
.cl-av .ic{width:16px;height:16px;stroke-width:2}
/* the waiting dot (DESIGN-CALM §1.6): --dot-orange, the footer's waiting hue, not the shared --info (in pipe / inbox that
   blue dot means «unread»). It stays because «Клиент» is the sticky column: below 1200 px the «Ждёт» clock can scroll away.
   Its ring matches the row fill: hovered = --surface-hover, selected = --row-selected (also while hovered) */
.cl-t .cl-av > i{background:var(--dot-orange)}
.cl-t tbody tr:hover .cl-av > i{box-shadow:0 0 0 2px var(--surface-hover)}
.cl-t tbody tr.sel .cl-av > i{box-shadow:0 0 0 2px var(--row-selected)}
.cl-who .tt{display:grid;gap:2px;min-width:0}
.cl-l1{display:flex;align-items:center;gap:8px;min-width:0}
.cl-l1 .cl-tag{flex:none}
.cl-sub .sp,.cl-l2 .sp{margin:0 6px;font-style:normal;color:var(--text-4)}
.cl-k{color:var(--text-2)}
.cl-k.sp{color:var(--danger)}
.cl-k i{margin-left:4px;font-style:normal;font-size:11px;color:var(--ai-text);cursor:help}
/* two-line cells: the main value, then a 12/16 --text-3 line */
.cl-2l{display:grid;justify-items:start;gap:2px;min-width:0}
.cl-l2{display:flex;align-items:center;min-width:0;max-width:100%;font:var(--t-caption);color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-cp.em{height:18px;margin-left:16px;font:var(--t-caption);color:var(--text-3)}       /* the email under the number, lined up with it */
/* «Сделка»: the best deal's title, its stage ring + name under it; a link to the deal */
.cl-deal{display:grid;gap:2px;min-width:0;max-width:100%;color:inherit;text-decoration:none}
.cl-deal .dt{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--t-body);color:var(--text)}
.cl-deal.nd .dt{color:var(--text-3)}
.cl-deal:hover .dt{color:var(--text-strong);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px}
.cl-ds{display:inline-flex;align-items:center;gap:6px;min-width:0}
.cl-ds .stg-ring{flex:none;width:12px;height:12px}
.cl-ds.ok{color:var(--success)}
.cl-ds.ok .ic{width:12px;height:12px;stroke-width:2.4}
.cl-deal:focus-visible{outline:0;border-radius:var(--radius-xs);box-shadow:var(--focus-ring)}
.cl-nm{font:var(--t-body-strong);color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-nm.anon{font-weight:400;color:var(--text-3)}
.cl-sub{font:var(--t-caption);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-t mark,.cl-grid mark{background:var(--badge-warning-bg);color:inherit;border-radius:2px}
/* phone: the WA glyph aligns with the header text, the number starts 8 px after it; the hover boxes of both buttons reach
   4 px into the cell padding so the number keeps its full width (164 column = 6 + 12 + 8 + 129 «+971 54 277 5158» + 9) */
.cl-ph{display:flex;align-items:center;min-width:0;margin:0 -4px}
.cl-wa{flex:none;width:20px;height:20px;display:grid;place-items:center;border-radius:var(--radius-xs);color:var(--wa);transition:background var(--dur-1)}
.cl-wa .ic{width:12px;height:12px}
.cl-cp{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;height:24px;margin-left:-4px;padding:0 4px;border-radius:var(--radius-xs);font:var(--t-body);color:var(--text-2);font-variant-numeric:tabular-nums;transition:background var(--dur-1)}
.cl-t td > .cl-cp{max-width:calc(100% + 8px);margin-right:-4px}   /* email: the text runs to the cell's text edge */
.cl-ph .cl-cp{margin-left:0;color:var(--text)}
.cl-cp span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cl-cp .cpy{display:none;flex:none;width:12px;height:12px;color:var(--icon)}   /* revealed on hover: the number keeps the room at rest */
.cl-cp:is(:hover,:focus-visible) .cpy{display:block}
:is(.cl-wa,.cl-cp):hover{background:var(--surface-offset-hover)}         /* on a hovered row (already --surface-hover) */
.cl-t tbody tr.sel :is(.cl-wa,.cl-cp):hover{background:var(--row-selected-hover)}   /* on a selected row (--row-selected) */
/* the icon-only WA button keeps ≥ 3:1 on the grey fills: --wa is 3.41 on white but 2.96 on --row-selected / the button's
   hover fill and 2.83 on --row-selected-hover (light). 15 % of --text-strong deepens it in light (3.56 on --row-selected-hover) and
   lifts it a touch in dark, same hue */
.cl-t tbody tr.sel .cl-wa,.cl-wa:hover{color:color-mix(in srgb,var(--wa) 85%,var(--text-strong))}
.cl-none{color:var(--text-3)}   /* «—»: an empty value is information, so ≥ 4.5:1 (§2.3; = components.css .tbl .empty-v) */
.cl-num{font-variant-numeric:tabular-nums}
.cl-t td:nth-child(5) .cl-num{font-weight:600;color:var(--text-strong)}   /* «Сумма»: Stripe amounts are 600 */
.cl-last{font:var(--t-body);color:var(--text);font-variant-numeric:tabular-nums}
/* «Менеджер»: avatar + first name */
.cl-mgr{display:inline-flex;align-items:center;gap:8px;min-width:0;max-width:100%;vertical-align:middle;cursor:default;color:var(--text)}
.cl-mgr .mn{min-width:0;overflow:hidden;text-overflow:ellipsis}
.cl-tags{display:flex;gap:4px;overflow:hidden}
.cl-t td.row-act{overflow:visible}

/* badges (§5.10) on the CRM's own chips: kind, language, tags, deal chip, language chip. They are Attio pastel tags through
   the tokens alone (DESIGN-CALM §3.7). The once-per-page header chip «Ждёт ответа · 4 мин» (.wchip2) stays a tag */
:is(.cl-kind,.cl-lang,.cl-tag,.cl-wpin,.cp-facts .wchip2,.cp-dchip,.cp-stage){
  display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border-radius:var(--radius-xs);white-space:nowrap;vertical-align:middle;
  font:var(--t-caption-strong);background:var(--badge-neutral-bg);color:var(--badge-neutral-text);box-shadow:inset 0 0 0 1px var(--badge-neutral-border);cursor:default}
:is(.cl-kind,.cl-lang,.cl-tag,.cl-wpin,.cp-facts .wchip2,.cp-stage) .ic{width:12px;height:12px;stroke-width:2.4}
:is(.cl-kind.cl,.cp-stage.info){background:var(--badge-info-bg);color:var(--badge-info-text);box-shadow:inset 0 0 0 1px var(--badge-info-border)}
:is(.cl-kind.pt,.cl-tag.vip){background:var(--badge-purple-bg);color:var(--badge-purple-text);box-shadow:inset 0 0 0 1px var(--badge-purple-border)}
:is(.cl-kind.sp,.cp-stage.danger){background:var(--badge-danger-bg);color:var(--badge-danger-text);box-shadow:inset 0 0 0 1px var(--badge-danger-border)}
.cp-stage.danger .ic{color:var(--danger)}
.cp-stage.success{background:var(--badge-success-bg);color:var(--badge-success-text);box-shadow:inset 0 0 0 1px var(--badge-success-border)}
:is(.cl-tag.hot,.cp-facts .wchip2){background:var(--badge-warning-bg);color:var(--badge-warning-text);box-shadow:inset 0 0 0 1px var(--badge-warning-border)}
/* the object-card pin sits on the plan drawing, so it keeps a backing: a neutral tag with the warning clock (no orange slab) */
.cl-wpin .ic{color:var(--warning)}
.cl-kind i{font-style:normal;font-size:12px;line-height:1}                 /* ✦: inherits the badge colour (§6.1) */

/* status marks (DESIGN-CALM §3.7 recipe): a signal that repeats per row or per message — waiting in the list «Последний
   контакт» column, waiting in the deals mini table and on timeline messages — is a coloured 12 px clock + neutral text */
.cl-last.w{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;vertical-align:middle;font:var(--t-body-medium);color:var(--text-strong);cursor:default}
.cl-last.w .ic{flex:none;width:12px;height:12px;stroke-width:2.4;color:var(--warning)}

/* empty / no results (§5.24 #1: the markup carries the shared .empty class) */
.cl-empty .acts{display:flex;flex-wrap:wrap;gap:8px}
/* «+ Клиент» / «+ Добавить «…»» here: demoted to secondary (DESIGN-CALM §3.4 «demote primary»): the header «+ Клиент» stays
   the view's one primary */
.cl-empty .acts .btn.g{background:var(--btn-bg);color:var(--btn-text);box-shadow:var(--shadow-control),0 0 0 1px var(--border)}
.cl-empty .acts .btn.g:hover{background:var(--btn-bg-hover);box-shadow:var(--shadow-control),0 0 0 1px var(--border-strong)}
.cl-empty .acts .btn.g:active{background:var(--surface-hover)}
.cl-empty .acts .btn.g:focus-visible{outline:none;box-shadow:var(--shadow-control),var(--focus-ring)}
.cl-empty .acts .btn.g :is(.kbd,kbd){background:var(--kbd-bg);box-shadow:none;color:var(--kbd-text)}

/* bulk bar (§5.13): sits in the filter row and replaces its right side; the pills hide while it shows */
.cl > .cl-bulk{grid-row:1;grid-column:1;align-self:end;justify-self:end;z-index:4;display:flex;align-items:center;gap:8px;height:var(--control-h);margin:0 var(--page-pad) 16px 0;padding-left:8px;background:var(--bg);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2)}
.cl > .cl-bulk.is-on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity var(--dur-2) var(--ease-out)}
.cl > .cl-bulk.is-off{transition:opacity var(--dur-2) var(--ease-in),visibility 0s linear var(--dur-2)}
.cl:has(> .cl-bulk.is-on) .cl-tb .cl-tbx > *{visibility:hidden}
@container view (max-width:1020px){.cl:has(> .cl-bulk.is-on) .cl-tb .cl-search{visibility:hidden}}   /* bulk bar 680 + search 244 no longer fit */
.cl-bulk .pill{display:inline-flex;align-items:center;margin-right:4px;font:var(--t-body);color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.cl-bulk .pill b{font-weight:inherit}
.cl-bulk .pill .w::after{content:"";display:inline-block;width:1px;height:20px;margin:0 12px;vertical-align:middle;background:var(--border)}
.cl-bulk .pill button{height:24px;padding:0 2px;border-radius:var(--radius-xs);font:var(--t-body-strong);color:var(--text-strong);white-space:nowrap;text-decoration:underline dashed var(--text-3);text-underline-offset:3px;transition:text-decoration-color var(--dur-1)}
.cl-bulk .pill button:hover{text-decoration-color:var(--text-strong)}
.cl-bulk .btn{opacity:0;transition:opacity var(--dur-3) var(--ease-out),background var(--dur-1),box-shadow var(--dur-1)}
.cl-bulk.is-on .btn{opacity:1}
.cl-bulk.is-on .btn:nth-child(3){transition-delay:20ms}
.cl-bulk.is-on .btn:nth-child(4){transition-delay:40ms}
.cl-bulk.is-on .btn:nth-child(5){transition-delay:60ms}

/* ═════════════ OBJECTS GRID ═════════════ */
.cl-main.objs{background:var(--bg)}
.cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:16px}
.cl-obj{position:relative;display:grid;grid-template-rows:auto 1fr;min-width:0;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-m);cursor:pointer;transition:box-shadow var(--dur-2) var(--ease-out)}
.cl-obj:hover{box-shadow:var(--shadow-hover)}
.cl-obj:focus-visible{border-color:var(--focus-color);box-shadow:none}   /* the card keyline turns accent: nothing outside it, so the scroller never clips the top edge */
.cl-grid.enter .cl-obj{animation:cl-fade var(--dur-4) var(--ease-out) both;animation-delay:calc(var(--i,0) * 20ms)}
.cl-plan{position:relative;height:132px;display:grid;place-items:center;overflow:hidden;background:var(--surface-offset);border-bottom:1px solid var(--border-soft)}
.cl-plan svg{width:88%;height:112px}
.cl-plan .w{fill:none;stroke:var(--text-3);stroke-width:2.2}
.cl-plan .p{fill:none;stroke:var(--border);stroke-width:1;transition:stroke var(--dur-3) var(--ease-out)}
.cl-plan .d{fill:none;stroke:var(--border);stroke-width:.8;stroke-dasharray:2 2}
.cl-plan .g{fill:none;stroke:var(--border-soft);stroke-width:.8;stroke-dasharray:3 3}
.cl-plan .z{fill:var(--surface-pressed);stroke:none;opacity:0;transition:opacity var(--dur-3) var(--ease-out)}   /* hover wash of the rooms: neutral grey, not the accent tint */
.cl-plan text{font:600 6px var(--font-sans);fill:var(--text-3)}
.cl-obj:hover .cl-plan .p{stroke:var(--text-3)}
.cl-obj:hover .cl-plan .z{opacity:1}
.cl-plan .tagl{position:absolute;left:12px;top:8px;font:var(--t-caption);color:var(--text-3)}
.cl-plan .area{position:absolute;right:12px;top:8px;font:var(--t-caption);color:var(--text-2);font-variant-numeric:tabular-nums}
.cl-obj .cl-wpin{position:absolute;left:12px;bottom:8px}
.cl-obj-b{display:grid;align-content:start;gap:4px;min-width:0;padding:12px 16px}
.cl-obj-b h4{margin:0;font:var(--t-heading-s);color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-obj-b .ty{font:var(--t-caption);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-obj-b .who{display:flex;align-items:center;gap:8px;min-width:0;margin-top:4px;font:var(--t-body)}
.cl-obj-b .who .cl-av{width:20px;height:20px;font-size:9px}
.cl-obj-b .who .cl-av .ic{width:12px;height:12px}
.cl-obj-b .who a{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-obj-b .st{display:flex;align-items:center;gap:8px;margin-top:2px;font:var(--t-caption);color:var(--text-2)}
.cl-obj-b .st b{margin-left:auto;font:var(--t-body-strong);color:var(--text-strong);font-variant-numeric:tabular-nums}
/* «Выиграна»: quiet status (DESIGN-CALM §1.6, as the facts-strip «Выиграно»): neutral 600 text, the green only in a 6 px dot */
.cl-obj-b .st .won{font-weight:600;color:var(--text-strong)}
.cl-obj-b .st .won::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;vertical-align:1px;background:var(--dot-green)}
.cl-obj-b .st .lost{font-weight:600;color:var(--text-3)}
/* stage bar (§6.1 rule): 3 px segments, gap 2 */
.cl-sbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;height:3px;margin-top:8px}
.cl-sbar i{background:var(--step-future)}
.cl-sbar i.d{background:var(--step-done)}
.cl-sbar i.c{background:var(--step-current)}
.cl-sbar.won i{background:var(--success)}
.cl-sbar.lost i{background:var(--border)}
.cl-sbar.lost i.c{background:var(--danger)}

/* «+ Клиент» modal: duplicate warning = caution banner (§5.14), field error, mail preview card */
.cl-dup{display:flex;align-items:flex-start;gap:8px;margin:0 0 16px;padding:12px 16px;border:1px solid var(--banner-caution-border);border-radius:var(--radius-s);background:var(--banner-caution-bg);font:var(--t-body);color:var(--badge-warning-text);animation:cl-fade var(--dur-3) var(--ease-out) both}
.cl-dup > .ic{flex:none;width:16px;height:16px;margin-top:2px;color:currentColor}
.cl-dup .tx{flex:1;min-width:0;font-weight:600}
.cl-dup .tx small{display:block;font:var(--t-body);color:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cl-dup .btn,.cl-dup .btn:hover{flex:none;align-self:center;height:auto;padding:0 2px;background:none;box-shadow:none;font:var(--t-body-strong);color:var(--text-strong);text-decoration:underline;text-decoration-color:var(--border-strong);text-decoration-thickness:1px;text-underline-offset:3px}
.cl-dup .btn:hover{text-decoration-color:var(--text-3)}   /* «Открыть» opens a CRM record: record link (DESIGN-CALM §3.10) */
.cl-dup .btn:focus-visible{box-shadow:var(--focus-ring)}
.field .cl-err{font:var(--t-body);color:var(--danger)}
@keyframes cl-shake{0%,100%{transform:none}20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.cl-shake{animation:cl-shake 240ms linear}
.cl-mail-prev{margin-top:16px;padding:16px;border:1px solid var(--border);border-radius:var(--radius-m);background:var(--surface-raised);font:var(--t-body);color:var(--text)}
.cl-mail-prev .lbl{display:block;margin-bottom:4px;font:var(--t-caption-strong);color:var(--text-3)}
.cl-mail-note{margin:12px 0 0;font:var(--t-caption);color:var(--text-3)}

/* ═════════════ CLIENT PAGE: the deal page's layout (DESIGN-CALM §14, §17) ═════════════
   The header band, then three panes over hairlines, each scrolling on its own: «Контакты» + «Метки» 360 | the conversation
   (the deal feed's .cm-* items, css/deal.css, in a reading column of at most 880 px) | «Сделки» + «Объекты» 384; under
   1500 px of #view two panes (data-look="am": the right blocks join the left pane). The groups and rows are the deal
   page's .grp / .kv / .kr (css/deal.css) */
.cp{--dpad:32px;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);min-height:0;background:var(--bg)}
.cp-top{min-width:0;padding:0 var(--dpad) 16px;box-shadow:inset 0 -1px 0 var(--border-soft)}
.cp-body{display:grid;grid-template-columns:360px minmax(0,1fr) 384px;grid-template-rows:minmax(0,1fr);min-height:0}
.cp-body > :is(.cp-l,.cp-x){min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px var(--dpad) 40px}
.cp-body > .cp-l{box-shadow:inset -1px 0 0 var(--border-soft)}
.cp-body > .cp-x{box-shadow:inset 1px 0 0 var(--border-soft)}
.cp[data-look="am"] .cp-body{grid-template-columns:352px minmax(0,1fr)}
.cp[data-look="am"] .cp-body > .cp-x{display:none}
.cp-body .blk + .blk{margin-top:32px}
.cp-body .blk:empty{display:none}

/* header: crumb, the name + kind / tag badges, the facts line; actions on the title line (as .dh on the deal page) */
.cp-h{display:flex;align-items:flex-start;gap:16px;padding-top:20px}
.cp-m{flex:1;min-width:0}
.cp-crumb{display:flex;align-items:center;gap:8px;height:20px;margin-bottom:4px;font:var(--t-body-strong)}
.cp-crumb .crumb{color:var(--text-2);border-radius:var(--radius-xs);text-decoration:none;transition:color var(--dur-1)}   /* crumb: secondary text (DESIGN-CALM §3.10) */
.cp-crumb .crumb:hover{color:var(--text-strong)}
.cp-crumb .crumb-ch{width:12px;height:12px;color:var(--text-3);stroke-width:2}
.cp-t{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;min-height:36px}
.cp-t h2{min-width:0;margin:0;font:var(--t-title);color:var(--text-strong);overflow-wrap:anywhere}
.cp-t h2 .anon{color:var(--text-2)}
.cp-t :is(.cl-kind,.cl-tag){flex:none}
.cp-acts{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:8px;flex:none;padding-top:28px}   /* crumb 20 + 4, then the 36 px title line */
.cp-acts .btn .ic.wa{color:var(--wa)}
.cp-nav{display:inline-flex;gap:4px}
/* facts: «phone · email · язык · Клиент с … · source · owner ⇅», 16/24 --text-2, then the waiting badge */
.cp-facts{display:flex;align-items:center;flex-wrap:wrap;gap:4px 0;min-height:28px;margin-top:4px;font:var(--t-lead);color:var(--text-2)}
.cp-facts .fi{display:inline-flex;align-items:center;min-width:0}
/* «от <партнёр>»: the partner who brought the client, a quiet link to their card */
.cp-facts .wchip2.nofirst{background:var(--badge-danger-bg);color:var(--badge-danger-text);box-shadow:inset 0 0 0 1px var(--badge-danger-border)}
.cp-pt{display:inline-flex;align-items:center;gap:6px;min-width:0;color:var(--text-2);text-decoration:none}
.cp-pt:hover{color:var(--text-strong);text-decoration:underline;text-underline-offset:3px}
.cp-pt .ic{flex:none;width:14px;height:14px;color:var(--icon)}
.cp-facts .fi + .fi::before{content:"·";margin:0 8px;color:var(--text-3)}
.cp-facts .fi:has(+ .wchip2)::after{content:"";flex:none;width:12px}
.cp-chip{display:inline-flex;align-items:center;gap:6px;height:28px;border-radius:var(--radius-xs);font:inherit;color:inherit;font-variant-numeric:tabular-nums;transition:color var(--dur-1)}
.cp-chip > .ic:first-child{width:12px;height:12px;color:var(--icon)}
.cp-chip > .ic.wa{color:var(--wa)}
.cp-chip[data-copy] > span{text-decoration:underline dotted var(--text-4);text-underline-offset:4px}
.cp-chip .cpy{width:12px;height:12px;color:var(--icon);transition:color var(--dur-1)}
.cp-chip[data-copy]:hover{color:var(--text-strong)}
.cp-chip[data-copy]:hover .cpy{color:var(--icon-strong)}
.cp-chip.copied .cpy{display:none}
.cp-chip.copied::after{content:"";box-sizing:border-box;width:5px;height:9px;margin:0 3px 2px;border:solid var(--success);border-width:0 2px 2px 0;transform:rotate(45deg)}   /* 12 px ✓ for 1.2 s */
.cp-chip.muted{color:var(--text-3)}   /* «Добавить email»: placeholder ghost (DESIGN-CALM §3.10) */
.cp-chip.muted:hover,.cp-chip.lg:hover{color:var(--text-strong)}
.cp-own{display:inline-flex;align-items:center;gap:6px;height:28px;margin:0 -6px;padding:0 6px;border-radius:var(--radius-s);font:inherit;color:inherit;transition:background var(--dur-1),color var(--dur-1)}
.cp-own:hover,.cp-own[aria-expanded="true"]{background:var(--surface-hover);color:var(--text-strong)}
.cp-own > .ic{width:12px;height:12px;stroke-width:2.4;color:var(--text-3)}

/* figures strip (in the band, where the deal page has its stepper): label / value / caption columns with dividers */
.cp-stats{display:flex;flex-wrap:wrap;row-gap:12px;margin-top:20px}
.cp-stat{display:grid;align-content:start;min-width:96px;padding:0 20px;box-shadow:inset 1px 0 0 var(--border-soft)}
.cp-stat:first-child{padding-left:0;box-shadow:none}
.cp-stat .lbl{font:var(--t-caption);color:var(--text-3)}
.cp-stat b{font:var(--t-body-strong);color:var(--text-strong);font-variant-numeric:tabular-nums;white-space:nowrap}
/* «Последний контакт» while the client waits / «Выиграно» > 0: the status lives in a 6 px dot before the value (DESIGN-CALM §1.6) */
.cp-stat b:is(.red,.ok)::before{content:"";display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;vertical-align:2px;background:var(--dot-orange)}
.cp-stat b.ok::before{background:var(--dot-green)}
.cp-stat b[data-count]{min-width:2ch}
.cp-stat small{font:var(--t-caption);color:var(--text-3)}

/* «Контакты»: the deal page's rows; the value cell is the editor button (or its input) */
.cp .kv .cp-dd{padding:0}
.cp-v{position:relative;display:flex;align-items:center;gap:6px;flex:1;min-width:0;min-height:32px;padding:0 8px;border-radius:var(--radius-s);font:var(--t-body);color:var(--text);text-align:left;transition:background var(--dur-1)}
.cp-v .tx{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-v .tx.ph{font-weight:400;color:var(--text-3)}   /* «Добавить email», «Важное о клиенте»: placeholder ghost (DESIGN-CALM §3.10) */
.cp-v:hover .tx.ph{color:var(--text-strong)}
.cp-v .pen{flex:none;margin-left:auto;width:12px;height:12px;color:var(--icon);opacity:0;transition:opacity var(--dur-2)}
.cp-v:hover{background:var(--surface-hover)}
.cp-v:is(:hover,:focus-visible) .pen{opacity:1}
.cp-v:focus-visible{box-shadow:inset 0 0 0 1px var(--focus-color)}
.cp-v.ro{cursor:default}
.cp-v.ro:hover{background:transparent}
.cp-v .ok{flex:none;margin-left:auto;width:12px;height:12px;stroke-width:2.6;color:var(--success);animation:cp-ok 1.1s var(--ease-out) both}
.cp-v:has(> .ok){animation:cp-saved 600ms var(--ease-out)}
@keyframes cp-ok{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:none}70%{opacity:1}100%{opacity:0}}
@keyframes cp-saved{from{background:var(--badge-success-bg)}to{background:transparent}}
.cp .kv .cp-dd:has(> .cp-ed){display:block}
.cp-ed{display:block;width:100%;animation:cl-fade var(--dur-2) var(--ease-out) both}
select.cp-ed,.cp-comp .cp-cf select{background:var(--surface) var(--select-chevron) no-repeat right 8px center/12px 12px;padding-right:26px}
.cp-ed.err{box-shadow:0 0 0 1px var(--danger)}
.cp-ed.err:focus{box-shadow:0 0 0 1px var(--danger),inset 0 0 0 1px var(--danger)}   /* focused error = 2 px red, no blue (DESIGN-CALM §3.8) */
.cp-hint{display:block;font:var(--t-caption);color:var(--danger);padding:4px 0 2px}
.cp .kr.note{align-items:start}
.cp .kr.note dt{min-height:32px}
.cp .kr.note .cp-v{align-items:flex-start;padding-block:6px}
.cp .kr.note .cp-v .tx{white-space:normal;overflow-wrap:anywhere}
.cp .kr.note .cp-v .pen{margin-top:4px}

/* tags: badges with a 16 px ghost ×; «+ Метка» = dashed pill; the tag input = 24 px control */
.cp-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding-top:6px}
.cp-tags .cl-tag{gap:2px;padding-right:2px;cursor:default}
.cp-tags .cl-tag button{width:16px;height:16px;display:grid;place-items:center;border-radius:var(--radius-xs);color:inherit;transition:background var(--dur-1)}
.cp-tags .cl-tag button:hover{background:var(--surface-hover)}
.cp-tags .cl-tag button .ic{width:12px;height:12px}
.cp-tags .cl-tag.leaving{opacity:0;transform:scale(.9);transition:opacity var(--dur-2) var(--ease-in),transform var(--dur-2) var(--ease-in)}
.cp-tags .cl-tag.fresh{animation:cl-fade var(--dur-3) var(--ease-out) both}
.cp-tag-add{display:inline-flex;align-items:center;height:24px;padding:0 8px;border:1px dashed var(--border);border-radius:var(--radius-pill);font:var(--t-caption-strong);color:var(--text-2);transition:background var(--dur-1)}
.cp-tag-add:hover{border-style:solid;background:var(--surface-hover)}
/* dashed controls on the client page: the keyline turns solid accent on keyboard focus, no ring outside it (§1.5) */
:is(.cp-tag-add,.cp-deal-add,.cp-tabs .cl-f):focus-visible{border-style:solid;border-color:var(--focus-color);box-shadow:none}
.cp-tag-in{width:140px;height:24px;padding:0 8px;border:0;border-radius:var(--radius-s);outline:0;background:var(--surface);color:var(--text);font:var(--t-body);box-shadow:0 0 0 1px var(--control-border);animation:cl-fade var(--dur-2) var(--ease-out) both}
.cp-tag-in:focus{box-shadow:var(--focus-ring)}

/* «Объекты»: 40 px mini-plan thumbnails in hairline rows */
.cp [data-sec="objects"] .grp-i{box-shadow:inset 0 1px 0 var(--border-soft)}
.cp-obj{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;padding:8px;box-shadow:inset 0 -1px 0 var(--border-soft);cursor:pointer;transition:background var(--dur-1)}
.cp-obj:hover{background:var(--surface-hover)}
.cp-obj:focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--focus-color)}
.cp-obj .th{width:40px;height:40px;display:grid;place-items:center;overflow:hidden;border-radius:var(--radius-s);background:var(--surface-offset)}
.cp-obj .th svg{width:34px;height:22px}
.cp-obj .th .w{fill:none;stroke:var(--text-3);stroke-width:3}
.cp-obj .th .p{fill:none;stroke:var(--border);stroke-width:1.6}
.cp-obj .th :is(.d,.g,.z,text){display:none}
.cp-obj > span:last-child{min-width:0}
.cp-obj b{display:block;font:var(--t-body-medium);color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-obj small{display:block;font:var(--t-caption);color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp [data-sec="objects"] .none{box-shadow:none}

/* «Сделки»: two-line rows split by hairlines (as the deal page's next steps); a closed deal in --text-3 */
.cp [data-sec="deals"] .grp-i{box-shadow:inset 0 1px 0 var(--border-soft)}
.cp-drow{display:grid;gap:4px;width:100%;min-height:60px;padding:10px 8px;text-align:left;box-shadow:inset 0 -1px 0 var(--border-soft);transition:background var(--dur-1)}
.cp-drow:hover{background:var(--surface-hover)}
.cp-drow:focus-visible{outline:0;box-shadow:inset 0 0 0 1px var(--focus-color)}
.cp-drow .l1{display:flex;align-items:baseline;gap:12px;min-width:0}
.cp-drow .l1 b{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--t-body-medium);color:var(--text-strong)}
.cp-drow .l1 .sm{flex:none;font:var(--t-body-strong);color:var(--text-strong)}
.cp-drow .l2{display:flex;align-items:center;min-width:0;font:var(--t-caption);color:var(--text-3);white-space:nowrap;overflow:hidden}
.cp-drow .l2 > span{display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.cp-drow .l2 > span:first-child{flex:none;color:var(--text-2)}
.cp-drow .l2 .sp{margin:0 6px;font-style:normal;color:var(--text-4)}
.cp-drow .l2 .stg-ring{flex:none;width:12px;height:12px}
.cp-drow .l2 .ic{flex:none;width:12px;height:12px;stroke-width:2.4}
.cp-drow .l2 .ok{color:var(--success)}
.cp-drow .l2 .late .ic{color:var(--danger)}
.cp-drow .l2 .warn .ic{color:var(--warning)}
.cp-drow.closed .l1 :is(b,.sm){font-weight:400;color:var(--text-3)}
.cp-drow .l3{display:flex}
/* «+ Новая сделка»: a ghost row under the list (DESIGN-CALM §3.10) */
.cp-deal-add{display:flex;align-items:center;gap:6px;width:100%;height:40px;padding:0 8px;border:0;border-radius:var(--radius-s);font:var(--t-body-medium);color:var(--text-3);transition:background var(--dur-1),color var(--dur-1)}
.cp-deal-add:hover{background:var(--surface-hover);color:var(--text-strong)}
.cp-deal-add .ic{width:12px;height:12px;stroke-width:2.4;color:var(--icon)}

/* ── the conversation pane .cp-c: tabs, the feed, the note composer in a reading column of at most 880 px; the bars'
   hairlines run the full pane width (a size container: --col in cqw, as the deal page) ── */
.cp-c{--col:max(var(--dpad), (100cqw - 880px) / 2);container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(120px,1fr) auto;min-width:0;min-height:0}
.cp-c > *{min-width:0;padding-inline:var(--col)}
.cp-tabs{position:relative;display:flex;align-items:flex-end;gap:24px;padding-top:14px;box-shadow:inset 0 -1px 0 var(--border-soft)}
.cp-tabs > button{position:relative;display:inline-flex;align-items:center;padding:0 0 8px;font:var(--t-body-strong);color:var(--text-2);white-space:nowrap;transition:color var(--dur-1)}
.cp-tabs > button:hover,.cp-tabs > button.on{color:var(--text-strong)}   /* tab recipe; its ink is the shared .cl-ink (--tab-ink) */
.cp-tabs > button .n{margin-left:6px;font-weight:400;color:var(--text-3);font-variant-numeric:tabular-nums}
.cp-tabs > button .n:empty{display:none}
.cp-tabs .cl-ink{left:0}
.cp-tabs .r{margin-left:auto;align-self:center;display:flex;align-items:center;gap:8px;margin-bottom:6px}
.cp-tabs .r:empty{display:none}
.cp-tabs .cl-f{display:inline-flex;align-items:center;gap:6px;height:24px;max-width:280px;padding:0 8px 0 6px;border:1px dashed var(--border);border-radius:var(--radius-pill);font:var(--t-caption-strong);color:var(--text-2);transition:background var(--dur-1)}
.cp-tabs .cl-f:hover,.cp-tabs .cl-f[aria-expanded="true"]{border-style:solid;background:var(--surface-hover)}
.cp-tabs .cl-f > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-tabs .cl-f > .ic{flex:none;width:12px;height:12px;color:var(--icon)}
.cp-tabs .cl-f > .ic:last-child{width:8px;height:8px;stroke-width:3.2}
.cp-feed{overflow:auto;overscroll-behavior:contain;padding-block:20px 24px;display:flex;flex-direction:column;gap:8px}
.cp-feed.swap{animation:cp-fade var(--dur-2) var(--ease-out) both}
@keyframes cp-fade{from{opacity:.25}to{opacity:1}}
.cp-showmore{align-self:center;margin-bottom:8px}
.cp-reply{display:flex;margin-top:-2px}
.cm-mail + .cp-reply,.cm-note + .cp-reply{margin-left:6%}   /* under a letter: lined up with its card */
.cp-reply .btn .ic{width:12px;height:12px;stroke-width:2.4}
/* the deal chip inside a feed item (several deals): a small neutral badge, a link to the deal */
.cp-feed .cp-dchip{margin-right:6px}
.cp-feed .cm-ev .cp-dchip{margin:0 2px 0 4px}
.cp-feed .cm-note .nh .cp-dchip{margin:0 0 0 6px}
/* doubled class: the badge rule (0,2,0) through its :is() would switch the ellipsis off with inline-flex */
.cp-dchip.cp-dchip{display:inline-block;max-width:200px;height:18px;line-height:18px;overflow:hidden;text-overflow:ellipsis;font:var(--t-caption-strong);transition:color var(--dur-1)}
a.cp-dchip{cursor:pointer;text-decoration:none}
a.cp-dchip:hover{color:var(--text-strong);box-shadow:inset 0 0 0 1px var(--border-strong)}
/* keyboard focus on the focusable badges: their own 1 px edge turns accent (DESIGN-CALM §3.9) */
:is(.cp-chip.lg,a.cp-dchip):focus-visible{box-shadow:inset 0 0 0 1px var(--focus-color)}

/* note composer at the bottom (the deal composer's note box): one line that opens onto the note colours */
.cp-c > .cp-comp{padding-block:12px 16px;box-shadow:inset 0 1px 0 var(--border-soft)}
.cp-comp textarea{display:block;width:100%;height:40px;min-height:40px;max-height:200px;padding:9px 12px;border:0;outline:0;resize:none;border-radius:var(--radius-m);background:var(--surface);box-shadow:0 0 0 1px var(--control-border);font:var(--t-body);color:var(--text);transition:height var(--dur-3) var(--ease-out),box-shadow var(--dur-1),background var(--dur-3) var(--ease-out)}
.cp-comp textarea:hover{box-shadow:0 0 0 1px var(--control-border-hover)}
.cp-comp textarea::placeholder{color:var(--text-4)}
.cp-comp.open textarea{height:84px;background:var(--note-bg);box-shadow:0 0 0 1px var(--note-border)}
.cp-comp.open textarea:focus{box-shadow:var(--focus-ring)}
.cp-comp .cp-cf{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-3) var(--ease-out)}
.cp-comp.open .cp-cf{grid-template-rows:1fr}
.cp-comp .cp-cf > div{min-height:0;overflow:hidden;display:flex;align-items:center;gap:8px}
.cp-comp.open .cp-cf > div{padding-top:8px}
.cp-comp .cp-cf .ic.nt{flex:none;color:var(--note-label)}
.cp-comp .cp-cf select{min-width:0;max-width:300px}
.cp-comp .cp-cf .sp{flex:1}
/* «Отмена» a bordered secondary, «Сохранить заметку» the primary, both 28 px (§5.2) */
.cp-comp .cp-cf .btn.sm{height:var(--control-h);padding:0 8px;gap:6px;font:var(--t-body-strong)}
.cp-comp .cp-cf .btn.q{background:var(--btn-bg);color:var(--btn-text);box-shadow:var(--shadow-control),0 0 0 1px var(--border)}
.cp-comp .cp-cf .btn.q:hover{background:var(--btn-bg-hover);box-shadow:var(--shadow-control),0 0 0 1px var(--border-strong)}
.cp-comp .cp-cf .btn.q:active{background:var(--surface-hover)}
.cp-comp .cp-cf .btn.q:focus-visible{box-shadow:var(--shadow-control),var(--focus-ring)}   /* the 1 px ring replaces the grey keyline (DESIGN-CALM §3.9 stack rule) */

/* the «Ждёт ответа» status mark on the deal rows (DESIGN-CALM §3.7): a 12 px clock in --warning, neutral text */
.cp-wt{display:inline-flex;align-items:center;gap:4px;font:var(--t-caption-strong);color:var(--text-2);white-space:nowrap}
.cp-wt .ic{flex:none;width:12px;height:12px;stroke-width:2.4;color:var(--warning)}

/* not found (§5.24 #5): crumb, then the page empty state */
.cp-404{display:block;min-height:0;overflow:auto;padding:16px var(--page-pad) 48px}

/* ═════════════ responsive: container queries on #view (§4.6) ═════════════ */
/* the table no longer fits: checkbox + «Клиент» stick left, «…» sticks right with the fade (§5.12); --bg strips cover the
   gutters so scrolled cells never show beside the sticky columns */
@container view (max-width:1199px){
  .cl-t :is(th,td):first-child{position:sticky;left:0;z-index:1;overflow:visible}       /* insets count from the gutter (scroller padding) */
  .cl-t :is(thead th,tbody td):nth-child(2){position:sticky;left:36px;z-index:1}       /* not the tfoot label cell: see .cl-ft */
  .cl-t thead th:is(:first-child,:nth-child(2),.row-act),.cl-t tfoot td:first-child{z-index:3}
  .cl-t :is(th,td):first-child::after{content:"";position:absolute;top:0;bottom:-1px;right:100%;width:var(--page-pad);background:var(--bg);pointer-events:none}
  .cl-t :is(th,td).row-act::after{content:"";position:absolute;top:0;bottom:-1px;left:100%;width:var(--page-pad);background:var(--bg);pointer-events:none}
  .cl-t thead th.row-act{position:sticky}
}

/* row focus (§5.12: one outline on the row, no seams; DESIGN-CALM §3.9: 1 px, outline-offset -1px). The TR outline is painted
   under sticky cells, so a focused row redraws the ring's edges on them: the outer side as a 1 px border (padding trimmed by
   1 px so nothing moves), top as a 1 px inset shadow, bottom as the cell's own 1 px border in --focus-color (no bottom inset:
   it would make that edge 2 px). The row's other bottom borders go transparent so the ring is the only line */
.cl-t tbody tr:focus-visible > td{border-bottom-color:transparent}
.cl-t tbody tr:focus-visible > td.row-act{padding-right:5px;border-right:1px solid var(--focus-color);border-bottom-color:var(--focus-color);box-shadow:inset 0 1px 0 var(--focus-color)}
@container view (max-width:1199px){
  .cl-t tbody tr:focus-visible > td:first-child{padding-left:5px;border-left:1px solid var(--focus-color)}
  .cl-t tbody tr:focus-visible > td:is(:first-child,:nth-child(2)){border-bottom-color:var(--focus-color);box-shadow:inset 0 1px 0 var(--focus-color)}
  .cl-t tbody tr:focus-visible > td:first-child::after{right:calc(100% + 1px)}
  .cl-t tbody tr:focus-visible > td.row-act::after{left:calc(100% + 1px)}
}
/* the client card on a narrower #view: the facts step down to 14/20; 320 px side pane and 24 px sides under 1100 */
@container view (max-width:1199px){
  .cp-facts{font:var(--t-body)}
}
@container view (max-width:1099px){
  .cp{--dpad:24px}
  .cp[data-look="am"] .cp-body{grid-template-columns:320px minmax(0,1fr)}
}
@container view (max-width:760px){
  .cl-search,.cl-search:focus-within{width:100%}
}

/* ═════════════ reduced motion: no movement, only short fades ═════════════ */
@media (prefers-reduced-motion: reduce){
  .cl-cb .ic,.cp-tags .cl-tag.leaving,.cp-v .ok{transform:none!important}
  .cl-t.enter tbody tr,.cl-grid.enter .cl-obj,.cp-feed.swap,.cp-ed,.cp-tag-in,.cl-dup,.cp-tags .cl-tag.fresh{animation:none!important}
  .cl-ink,.cl-search,.cp-comp textarea,.cp-comp .cp-cf{transition:none!important}
  .cl-shake{animation:none!important}
  .cl > .cl-bulk,.cl-bulk .btn{transition:opacity 100ms linear!important}
}

/* «Показаны 300 из N · Показать ещё · Показать все» under a long list */
/* the virtual list's spacer rows (screens/clients.js paintRows): they stand for the rows not drawn — no border, no hover */
.cl-t tbody tr.cl-vpad{cursor:default}
.cl-t tbody tr.cl-vpad td,.cl-t tbody tr.cl-vpad:hover td{padding:0;border:0;background:none}