/* =====================================================================
   Контакты и карточка контакта (fos/s-contacts.js) — panel-desktop §6.8
   Только классы .ct-*; общий вид — .g-* из /deep.css.
   ===================================================================== */
.ct-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ct-search{width:420px;max-width:100%}
.ct-search input::-webkit-search-cancel-button{cursor:pointer}
.ct-skel-search{width:420px;max-width:100%;height:44px;border-radius:var(--r-pill)}
.ct-count{margin-left:auto;white-space:nowrap}
.ct-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}
.ct-main{display:flex;flex-direction:column;gap:16px;min-width:0;transition:opacity .15s}
.is-busy .ct-main{opacity:.55}

/* таблица */
.ct-table{--cols:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr) 110px}
.ct-tr.is-sel,.ct-tr.is-sel:hover{background:var(--selected)}
.ct-email{font:400 13px var(--mono);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-nm{font:400 14px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-co{font:400 13.5px var(--font);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-co.is-none{color:var(--ink)}
.ct-date{font:500 11px var(--mono);color:var(--soft);white-space:nowrap}

/* карточка справа */
.ct-card{padding:20px;display:flex;flex-direction:column;gap:12px;position:sticky;top:90px;min-width:0;transition:opacity .15s}
.ct-card.is-loading .ct-stats,.ct-card.is-loading .ct-open{opacity:.55}
.ct-kicker{font:500 10.5px var(--mono);letter-spacing:.08em;color:var(--muted)}
.ct-hint{margin:0;font:300 14px/1.5 var(--font);color:var(--soft)}
.ct-name{font:300 24px/1.2 var(--font);overflow-wrap:anywhere}
.ct-mail{font:400 13px var(--mono);color:var(--soft);margin-top:-8px;overflow-wrap:anywhere}
.ct-extra{font:400 12.5px var(--mono);color:var(--soft);margin-top:-8px;overflow-wrap:anywhere}
.ct-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;border-top:1px solid var(--line-head);padding-top:12px}
.ct-stats > div{display:flex;flex-direction:column;min-width:0}
.ct-stats__v{font:300 22px var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-stats__l{font:400 11.5px var(--font);color:var(--soft)}
.ct-chans{display:flex;flex-direction:column;gap:8px}
.ct-chans__k{font:500 10px var(--mono);letter-spacing:.08em;color:var(--faint)}
.ct-chans__r{display:flex;align-items:center;gap:8px;font:400 13px var(--mono);color:var(--ink-2);min-width:0}
.ct-chans__r .g-ico{width:15px;height:15px;color:var(--soft)}
.ct-comp{align-self:flex-start;font:400 15px var(--font);overflow-wrap:anywhere;text-align:left}
.ct-comp:hover{color:var(--teal-ink);text-decoration:underline;text-underline-offset:3px}
.ct-comp--plain{color:var(--ink-2)}
.ct-comp--plain:hover{text-decoration:none;color:var(--ink-2)}
.ct-open{width:100%}
.ct-open[aria-disabled="true"]{opacity:.45;cursor:default}

/* ---------- узкий десктоп (до 1280 px, раскладка сжимается до 1024) ---------- */
@media (max-width:1279px) and (min-width:861px){
  .ct-layout{grid-template-columns:minmax(0,1fr) 300px}
  .ct-table{--cols:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) 84px}
  .ct-table .g-thead,.ct-table .g-tr{gap:12px}
}
@media (max-width:1150px) and (min-width:861px){
  /* имя под почтой — для компании остаётся место */
  .ct-table{--cols:minmax(0,1.3fr) minmax(0,1fr) 84px}
  .ct-table .g-thead > :nth-child(2){display:none}
  .ct-table .g-tr{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 84px;grid-template-areas:"e c d" "n c d";row-gap:2px}
  .ct-table .ct-email{grid-area:e}
  .ct-table .ct-nm{grid-area:n;font-size:13px;color:var(--soft)}
  .ct-table .ct-co{grid-area:c}
  .ct-table .ct-date{grid-area:d}
}

/* ---------- телефон (< 860 px): строки — карточками, карточка контакта — панелью поверх ---------- */
@media (max-width:860px){
  .g-view.ct-view{grid-template-columns:minmax(0,1fr)}
  .ct-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  .ct-search{width:auto;height:48px}
  .ct-search input{font-size:16px}
  .ct-count{margin-left:0;padding:0 4px}
  .ct-layout{grid-template-columns:minmax(0,1fr)}
  .ct-mlist{background:#fff;border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column;overflow:hidden}
  .ct-mrow{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-bottom:1px solid var(--line-soft);color:var(--ink)}
  .ct-mrow:last-child{border-bottom:none}
  .ct-mrow:hover,.ct-mrow:active{color:var(--ink);background:var(--hover)}
  .ct-mrow.is-sel{background:var(--selected)}
  .ct-mrow__top{display:flex;align-items:baseline;gap:10px;min-width:0}
  .ct-mrow__t{flex:1;min-width:0;font:400 15px var(--font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ct-mrow__dt{font:500 11px var(--mono);color:var(--soft);flex:none}
  .ct-mrow__e{font:400 13px var(--mono);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ct-mrow__c{font:400 12.5px var(--font);color:var(--soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ct-mpager .g-pager{padding:4px 0}
  .ct-mpager .g-pager button{width:44px;height:44px}
  .ct-drawer{gap:12px}
  .ct-dhead{align-items:center}
  .ct-dbody{display:flex;flex-direction:column;gap:12px}
  .ct-dbody .ct-open{height:52px;font-size:16px}
  .ct-dbody .ct-comp{min-height:44px;display:flex;align-items:center}
}