/* MAX: карточка на главной и окно подключения/управления.
   Макет: Figma «LidFly — Проекты», стр. «21 · MAX — подключение каналов».
   Только токены tokens.css и общие компоненты buttons.css, status.css, collapsible, team-menu. */

.btn .home-max-logo { width: 20px; height: 20px; flex: none; }
#home-provider-max-card .card-content > .status { align-self: center; }

#modal-home-max .home-max-modal { width: min(680px, calc(100vw - 32px)); max-width: none; }
#modal-home-max .home-max-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
#modal-home-max .home-max-head > img { flex: none; width: 32px; height: 32px; }
#modal-home-max .home-max-head__text { flex: 1; min-width: 0; }
#modal-home-max .home-max-head h3 { margin: 0; }
#modal-home-max .home-max-head p { margin: 2px 0 0; color: var(--color-text-secondary); font-size: 13px; }
#modal-home-max .home-max-head p:empty { display: none; }
#modal-home-max .home-max-head .btn-icon { flex: none; }

#home-max-body { display: grid; gap: 20px; }
#home-max-body p { margin: 0; color: var(--color-text-secondary); line-height: 1.55; }
#home-max-body .home-max-note { color: var(--color-text-muted); font-size: 13px; }
#home-max-body .home-max-alert { padding: 12px 16px; border: 1px solid var(--status-warning-border); border-radius: 12px; background: var(--status-warning-bg); color: var(--status-warning-fg); }

/* Шаги B1–B4: один шаг раскрыт, остальные свёрнуты; статус «Готово / Ждём вас / Дальше» справа. */
.home-max-steps { display: grid; padding: 4px 24px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg-card); }
.home-max-step { display: grid; gap: 12px; padding: 16px 0; }
.home-max-step + .home-max-step { border-top: 1px solid var(--color-border); }
.home-max-step__top { display: flex; align-items: flex-start; gap: 12px; }
.home-max-step__title { flex: 1; min-width: 0; display: grid; gap: 2px; }
.home-max-step__title strong { color: var(--color-text); font-size: var(--text-lg); font-weight: 600; line-height: 1.45; }
.home-max-step__title span { color: var(--color-text-secondary); font-size: 13px; }
.home-max-step.is-later .home-max-step__title strong { color: var(--color-text-muted); }
.home-max-step__body { display: grid; gap: 12px; justify-items: start; }
.home-max-step__body > p, .home-max-step__body > ol, .home-max-step__body > .home-max-qr,
.home-max-step__body > .home-max-box, .home-max-step__body > details { justify-self: stretch; }
.home-max-list { display: grid; gap: 8px; margin: 0; padding-left: 20px; color: var(--color-text); line-height: 1.5; }
.home-max-qr { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 12px; background: var(--color-bg); }
/* Генератор кода рисует собственный светлый фон: так QR сканируется и в тёмной теме. */
.home-max-qr__code { flex: none; width: 136px; height: 136px; overflow: hidden; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg-card); }
.home-max-qr__code svg { display: block; width: 100%; height: 100%; }
.home-max-qr b { display: block; margin-bottom: 4px; color: var(--color-text); font-weight: 600; }
.home-max-box { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--color-bg); }
.home-max-box__text { flex: 1; min-width: 0; color: var(--color-text); overflow-wrap: anywhere; }

/* Цена до подключения (F1/F2). */
.home-max-price { display: grid; padding: 4px 24px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg-card); }
.home-max-price__row { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.home-max-price__row + .home-max-price__row { border-top: 1px solid var(--color-border); }
.home-max-price__row > span:first-child { flex: 1; min-width: 0; color: var(--color-text-secondary); }
.home-max-price__row b { color: var(--color-text); font-weight: 400; text-align: right; }
.home-max-price__row b.is-strong { font-weight: 600; }
.home-max-done { display: grid; gap: 12px; }
.home-max-done > b { color: var(--color-text); font-size: var(--text-xl); font-weight: 700; }

/* «Управлять» (E). */
.home-max-account { padding: 20px 24px 8px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg-card); }
.home-max-account__head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.home-max-account__head > b { color: var(--color-text); font-size: var(--text-xl); font-weight: 700; }
.home-max-account__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
#home-max-body .home-max-account__sub { margin-top: 4px; font-size: 13px; }
#home-max-body .home-max-account > .home-max-note { margin-top: 8px; }
.home-max-account__empty { padding: 12px 0; }
.home-max-account__sub + .home-max-chat { margin-top: 12px; }
/* Статус, «Как исправить» и «⋯» держатся вместе и уходят под название, когда места не хватает. */
.home-max-chat { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 16px 0; border-top: 1px solid var(--color-border); }
.home-max-chat__avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-bg); color: var(--color-text-secondary); font-weight: 600; }
.home-max-chat__text { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
.home-max-chat__aside { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.home-max-chat__text b { color: var(--color-text); font-weight: 600; overflow-wrap: anywhere; }
.home-max-chat__text span { color: var(--color-text-secondary); font-size: 13px; }
.home-max-more { justify-self: start; }
.home-max-posts { display: grid; gap: 12px; }
.home-max-posts h4 { margin: 0; }
.home-max-post-photos { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.home-max-post-photos img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
#home-max-body .home-max-post__text { color: var(--color-text); white-space: pre-wrap; overflow-wrap: anywhere; }

@media (max-width: 768px) {
  /* На телефоне кнопка сразу открывает MAX, QR не нужен (макет, кадр C). */
  .home-max-qr { display: none; }
  .home-max-steps, .home-max-price, .home-max-account { padding-left: 16px; padding-right: 16px; }
  .home-max-step__body > .btn-l { justify-self: stretch; }
}