/* Раздел «Pro» кабинета: «ИИ-агент (MCP)». Только токены дизайн-системы.
 * Селекторы под .acc-main: сброс отступов и маркеров кабинета
 * (.acc-main :is(p, ul)) иначе перебивает их по специфичности.
 * Сетка и ритм - как у автокалендаря (pcal-): слева действие, справа
 * состояние. Моноширинный шрифт - только у адреса, ключа и команды: это код. */

.acc-main .pmcp { padding: var(--cf-space-4) 0 var(--cf-space-8); container-type: inline-size; }
.acc-main .pmcp-lead { margin: 0; font-size: 15px; line-height: 1.5; color: var(--cf-ink-2); max-width: 64ch; }
.acc-main .pmcp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: var(--cf-space-28) var(--cf-space-44);
  align-items: start; margin-top: var(--cf-space-24); }
.acc-main .pmcp-h { margin: 0 0 var(--cf-space-10); font-size: 13px; font-weight: 700; color: var(--cf-ink-2); }

.acc-main .pmcp-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.acc-main .pmcp-seg::-webkit-scrollbar { display: none; }
.acc-main .pmcp-seg button { flex: none; height: 36px; padding: 0 14px; font-size: 13.5px; }

.acc-main .pmcp-steps { margin: var(--cf-space-16) 0 0; padding-left: 1.3em; display: grid; gap: var(--cf-space-14);
  font-size: 14.5px; line-height: 1.5; color: var(--cf-ink); max-width: 64ch; }
.acc-main .pmcp-steps li::marker { color: var(--cf-ink-3); font-weight: 700; }
.acc-main .pmcp-steps code { padding: 1px 5px; border-radius: var(--cf-radius-xs); background: var(--cf-surface-2); }

.acc-main .pmcp-field { display: flex; gap: var(--cf-space-8); margin-top: var(--cf-space-8); }
.acc-main .pmcp-field .cf-input { flex: 1; min-width: 0; height: var(--cf-h-button); color: var(--cf-ink-2); background: var(--cf-surface-2);
  border-color: var(--cf-line); text-overflow: ellipsis; }
.acc-main .pmcp-field .cf-input:focus { outline: 2px solid var(--cf-accent); outline-offset: 1px; }
.acc-main .pmcp-field .cf-btn { flex: none; }

.acc-main .pmcp-new { display: flex; gap: var(--cf-space-8); margin-top: var(--cf-space-8); max-width: 460px; }
.acc-main .pmcp-new .cf-input { flex: 1; min-width: 0; height: var(--cf-h-button); }
.acc-main .pmcp-note { display: block; margin-top: var(--cf-space-6); font-size: 13px; color: var(--cf-ink-3); }
.acc-main .pmcp-key { margin-top: var(--cf-space-4); }
.acc-main .pmcp-key .pmcp-field .cf-input { background: var(--cf-surface); color: var(--cf-ink); }

/* ── подключения ───────────────────────────────────────────────────── */
.acc-main .pmcp-items { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cf-line); }
.acc-main .pmcp-item { display: flex; align-items: center; justify-content: space-between; gap: var(--cf-space-12);
  padding: var(--cf-space-12) 0; border-bottom: 1px solid var(--cf-line); }
.acc-main .pmcp-item div { min-width: 0; }
.acc-main .pmcp-item b { display: block; font-size: 15px; font-weight: 600; color: var(--cf-ink); overflow-wrap: anywhere; }
.acc-main .pmcp-item span { display: block; margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--cf-ink-3); font-variant-numeric: tabular-nums; }
.acc-main .pmcp-empty { padding: var(--cf-space-16); border-radius: var(--cf-radius-md); background: var(--cf-surface-2); }
.acc-main .pmcp-empty b { display: block; font-size: 14.5px; color: var(--cf-ink); }
.acc-main .pmcp-empty p { margin: var(--cf-space-4) 0 0; font-size: 13.5px; line-height: 1.5; color: var(--cf-ink-3); }
.acc-main .pmcp-msg { min-height: 1.3em; margin: var(--cf-space-8) 0 0; font-size: 13px; color: var(--cf-ink-2); }

.acc-main .pmcp-fine { margin: var(--cf-space-24) 0 0; padding-top: var(--cf-space-14); border-top: 1px solid var(--cf-line);
  font-size: 12.5px; line-height: 1.5; color: var(--cf-ink-3); max-width: 80ch; }

/* Колонки решает ширина самой панели, а не окна: кабинет с боковым меню
   на ноутбуке 1100-1300px оставлял шагам подключения узкую полосу, и адрес
   сервера сжимался до «h…». */
@container (max-width: 760px) {
  .acc-main .pmcp-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .acc-main .pmcp-seg { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--cf-radius-lg); width: 100%; }
  .acc-main .pmcp-seg button { width: 100%; }
  .acc-main .pmcp-field, .acc-main .pmcp-new { flex-wrap: wrap; }
  .acc-main .pmcp-field .cf-btn, .acc-main .pmcp-new .cf-btn { flex: 1 1 100%; }
  .acc-main .pmcp-steps { padding-left: 1.1em; }
}

/* ── страница согласия /connect.html ───────────────────────────────── */
.acc-main.cnx-main { max-width: 688px; }
.acc-main .cnx-in { padding: var(--cf-space-28); }
.acc-main .cnx-h { margin: 0 0 var(--cf-space-14); font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; color: var(--cf-ink); text-wrap: balance; }
.acc-main .cnx-p { margin: 0 0 var(--cf-space-12); font-size: 15px; line-height: 1.55; color: var(--cf-ink-2); }
.acc-main .cnx-muted { color: var(--cf-ink-3); font-size: 14px; }
.acc-main .cnx-list { list-style: disc; margin: 0 0 var(--cf-space-16); padding-left: 1.2em; display: grid; gap: var(--cf-space-6); font-size: 15px; line-height: 1.5; color: var(--cf-ink); }
.acc-main .cnx-acts { display: flex; flex-wrap: wrap; gap: var(--cf-space-10); margin-top: var(--cf-space-20); }
.acc-main .cnx-acts .cf-btn { min-width: 140px; height: var(--cf-h-control); }
.acc-main .cnx-fine { margin: var(--cf-space-16) 0 0; font-size: 13px; color: var(--cf-ink-3); }
@media (max-width: 620px) {
  .acc-main .cnx-in { padding: var(--cf-space-20) var(--cf-space-16); }
  .acc-main .cnx-h { font-size: 21px; }
  .acc-main .cnx-acts .cf-btn { flex: 1 1 100%; }
}

/* Команда и настройка целиком, с переносом: их читают перед вставкой. */
.acc-main .pmcp-block { position: relative; margin-top: var(--cf-space-8); }
.acc-main .pmcp-block pre { margin: 0; padding: var(--cf-space-12) var(--cf-space-14); padding-bottom: var(--cf-space-44);
  border-radius: var(--cf-radius-md); background: var(--cf-surface-2); box-shadow: inset 0 0 0 1px var(--cf-line);
  color: var(--cf-ink); line-height: 1.55; white-space: pre-wrap; word-break: break-all; }
.acc-main .pmcp-block pre:focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 1px; }
.acc-main .pmcp-block .cf-btn { position: absolute; right: var(--cf-space-8); bottom: var(--cf-space-8); }

.acc-main .pmcp-blocked { margin-top: var(--cf-space-16); max-width: 64ch; }