/* =====================================================================
   Раздел «Команда» (fos/s-team.js) — panel-desktop §6.12, прототип 23/24.
   Раскладка по ширине раздела (container queries, W — ширина .tm-wrap):
   W ≥ 1100 (окно ~1390+) — как в прототипе: таблица + форма 360 px справа, все колонки;
   940–1099 (окно 1280)   — так же, логин уходит под имя (иначе колонки не помещаются);
   724–939 (окно ~1024)   — таблица во всю ширину, форма горизонтальной карточкой под ней;
   600–723                — то же, логин под именем;
   < 600 (телефон)        — строки-карточки, действия видимыми кнопками.
   Действия строки — «⋯» с меню: в прототипе колонка действий в карточку не помещается.
   ===================================================================== */
.tm-pwslot:empty{display:none}
.tm-wrap{container-type:inline-size;min-width:0}
.tm-grid{display:flex;flex-direction:column;gap:16px;min-width:0}

/* ---------- плашка нового пароля (прототип 24) ---------- */
.tm-pw{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:18px;background:var(--ink);color:#fff;flex-wrap:wrap;
  animation:tm-in .2s var(--ease-out)}
@keyframes tm-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.tm-pw__k{font:500 10.5px var(--mono);letter-spacing:.08em;color:rgba(255,255,255,.55)}
.tm-pw__login{font:500 15px var(--mono)}
.tm-pw__pass{font:500 18px var(--mono);letter-spacing:.06em;background:rgba(255,255,255,.08);padding:6px 12px;border-radius:10px;
  user-select:all;-webkit-user-select:all}
.tm-pw__url{font:400 13px var(--font);color:rgba(255,255,255,.6)}
.tm-pw__copy{height:38px;padding:0 16px;border:none;border-radius:var(--r-pill);background:#fff;color:var(--ink);font:400 13.5px var(--font);
  display:inline-flex;align-items:center;gap:6px}
.tm-pw__copy:hover{background:#EEF3F5}
.tm-pw__x{width:38px;height:38px;flex:none;border:none;border-radius:50%;background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);padding:11px;
  display:inline-flex;align-items:center;justify-content:center;margin-left:-6px}
.tm-pw__x:hover{background:rgba(255,255,255,.14);color:#fff}
.tm-pw__x svg{width:100%;height:100%}
@media (prefers-reduced-motion:reduce){.tm-pw{animation:none}}

/* ---------- таблица ---------- */
.tm-card{min-width:0}
.tm-tr{--cols:minmax(0,1fr) 100px 150px 110px 96px 30px}
.tm-tr > *{min-width:0}
.tm-name{display:flex;flex-direction:column;justify-content:center;font:400 14.5px var(--font);color:var(--ink)}
.tm-name__row{display:flex;align-items:center;gap:8px;min-width:0}
.tm-name__t{min-width:0;overflow-wrap:anywhere}
.tm-name .g-tag{flex:none}
.tm-name__l{display:none;font:400 12px var(--mono);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.tm-login{font:400 12.5px var(--mono);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* роль: капсула «Панель ▾», под ней — прозрачный системный select (на телефоне свой список) */
.tm-rc{display:flex}
.tm-role{position:relative;justify-self:start;display:inline-flex;align-items:center;gap:2px;height:32px;max-width:100%;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;font:400 13px var(--font);color:var(--ink);cursor:pointer;
  transition:border-color .15s}
.tm-role > span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-role:hover{border-color:var(--dash)}
.tm-role select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;font-size:16px;-webkit-appearance:none;appearance:none}
.tm-role select:disabled{cursor:progress}
.tm-role:has(select:focus-visible){outline:2px solid var(--teal);outline-offset:2px}
.tm-role.is-self{cursor:default}
.tm-role.is-self:hover{border-color:var(--line)}
.tm-caret{flex:none;width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;border-top:4.5px solid currentColor;margin-left:1px}

/* Telegram — правится прямо в строке */
.tm-tgc{display:flex;align-items:center}
.tm-tg{display:inline-flex;align-items:center;gap:6px;height:32px;max-width:100%;padding:0;border:none;background:none;
  font:400 12.5px var(--mono);color:var(--ink);cursor:text;text-align:left}
.tm-tg__v{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-tg .g-ico{width:12px;height:12px;color:var(--faint);opacity:0;transition:opacity .15s}
.tm-tr:hover .tm-tg .g-ico,.tm-tg:focus-visible .g-ico{opacity:1}
.tm-tg:hover .tm-tg__v{text-decoration:underline;text-decoration-color:var(--dash);text-underline-offset:3px}
.tm-tg__in{height:32px;width:100%;min-width:0;border:1px solid var(--ink);border-radius:var(--r-pill);padding:0 12px;background:#fff;
  font:400 12.5px var(--mono);color:var(--ink)}
.tm-tg__in::placeholder{color:var(--faint)}
.tm-tg__in:disabled{opacity:.6}

/* действия: «⋯» на десктопе, видимые кнопки в карточках */
.tm-act{display:flex;gap:6px;justify-content:flex-end;align-items:center}
.tm-more{color:var(--soft);border-color:transparent;background:transparent;transition:border-color .15s,color .15s,background .15s}
.tm-tr:hover .tm-more{border-color:var(--line);background:#fff}
.tm-more:hover,.tm-more:focus-visible,.tm-more[aria-expanded="true"]{color:var(--ink);border-color:var(--dash);background:#fff}
.tm-more[aria-busy="true"]{cursor:progress;opacity:.6}
.tm-btns{display:none;gap:6px;flex-wrap:wrap}
.tm-btns .g-btn{white-space:nowrap}
.tm-pop{min-width:200px}
.tm-pop .g-pop__item .g-ico{width:15px;height:15px;color:var(--soft)}
.tm-pop__bad,.tm-pop .tm-pop__bad .g-ico{color:var(--coral-ink)}
/* отключённый человек — строка полупрозрачная, действия остаются яркими (там «Включить») */
.tm-tr.is-off > :not(.tm-act){opacity:.5}

/* ---------- «Добавить человека» ---------- */
.tm-add{padding:20px;display:flex;flex-direction:column;gap:12px;margin:0;min-width:0}
.tm-add .g-input{width:100%;min-width:0}
.tm-add .g-input::placeholder{color:var(--faint)}
.tm-add__login,.tm-add__tg{font-family:var(--mono)}
.tm-add__role .g-segl{width:100%}
.tm-add__go{width:100%}
.tm-add__err{margin:0}
.tm-add__note{margin:0;font:300 12.5px/1.5 var(--font);color:var(--soft)}

/* ---------- скелетон ---------- */
.tm-skel{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}

/* ---------- раскладка как в прототипе: форма справа ---------- */
@container (min-width:940px){
  .tm-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
}
/* логин под именем: окно 1280 (форма справа) и 600–723 (форма снизу) */
@container (min-width:940px) and (max-width:1099.98px){
  .tm-tr{--cols:minmax(0,1fr) 140px 104px 84px 30px;column-gap:12px}
  .tm-login,.tm-h1{display:none}
  .tm-name__l{display:block}
}
@container (min-width:600px) and (max-width:723.98px){
  .tm-tr{--cols:minmax(0,1fr) 140px 104px 84px 30px;column-gap:12px}
  .tm-login,.tm-h1{display:none}
  .tm-name__l{display:block}
}

/* ---------- форма под таблицей горизонтальной карточкой ---------- */
@container (min-width:600px) and (max-width:939.98px){
  .tm-add{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:center}
  .tm-add__k,.tm-add__err{grid-column:1/-1}
  .tm-add__err{order:1}
}
@container (min-width:600px) and (max-width:723.98px){
  .tm-add{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tm-add__name{grid-column:1} .tm-add__login{grid-column:2}
  .tm-add__tg{grid-column:1} .tm-add__role{grid-column:2}
  .tm-add__go{grid-column:1} .tm-add__note{grid-column:2}
}
@container (max-width:939.98px){ .tm-skel{grid-template-columns:1fr} }

/* ---------- телефон (≤ 860 px) и узкий раздел (< 600 px): карточки (panel-phone §5.7) ---------- */
@media (max-width:860px){
  .tm-pw{gap:10px 14px;padding:16px;border-radius:20px}
  .tm-pw__k{flex:1 0 100%}
  .tm-pw__pass{font-size:17px}
  .tm-pw__url{flex:1 0 100%}
  .tm-pw .g-spacer{display:none}
  .tm-pw__copy{flex:1;height:44px;justify-content:center;font-size:15px}
  .tm-pw__x{width:44px;height:44px;padding:13px;margin-left:0}
}
@container (max-width:599.98px){
  .tm-card{border-radius:20px}
  .tm-thead{display:none}
  .tm-tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n s" "l t" "r r" "a a";gap:8px 12px;padding:14px 16px;
    border-bottom:1px solid var(--line-soft)}
  .tm-name{grid-area:n;font-size:15.5px} .tm-login{grid-area:l;align-self:center} .tm-rc{grid-area:r} .tm-tgc{grid-area:t;justify-content:flex-end}
  .tm-st{grid-area:s;justify-self:end;align-self:start;padding-top:2px} .tm-act{grid-area:a;justify-content:flex-start}
  .tm-more{display:none}
  .tm-btns{display:flex;flex:1}
  /* зоны нажатия ≥ 44 px (HANDOFF §3, panel-phone §7) */
  .tm-role{height:44px;padding:0 14px;font-size:14px}
  .tm-tg{height:44px;min-width:44px;font-size:13px}
  .tm-tg .g-ico{opacity:1}
  .tm-tg__in{height:44px;font-size:16px}
  .tm-btns .g-btn{flex:1;height:44px;font-size:14px}
  .tm-add{padding:18px;border-radius:20px}
  .tm-add .g-input{height:48px;font-size:16px}
  .tm-add__role .g-segl button{height:38px;font-size:14px}
  .tm-add__go{height:52px;font-size:16px}
  .tm-skel{grid-template-columns:1fr}
}