/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Мастер «Подключить Instagram» (igw-*): прогресс из шести кнопок, карточка шага, ввод маркера, выбор аккаунта.
   Значения — только из tokens.css, размеры в rem. На 390px без горизонтальной прокрутки, касания не меньше --size-touch-min. */

.igw { display: grid; gap: var(--space-4); align-content: start; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; color: var(--color-ink); }
.igw > * { min-width: 0; max-width: 100%; }
.igw p { margin: 0; overflow-wrap: anywhere; }
.igw [hidden] { display: none; }
.igw-intro { color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); }
.igw-note { color: var(--color-warn-text); font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); }

/* ---------- Прогресс ---------- */
.igw-progress { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.igw-progress__b {
  display: inline-grid; place-items: center; min-width: var(--size-touch-min); min-height: var(--size-touch-min); padding: 0;
  background: var(--color-panel2); color: var(--color-ink2); border: 1px solid var(--color-line2); border-radius: var(--radius-pill);
  font: var(--weight-medium) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); cursor: pointer;
}
.igw-progress__b:hover { border-color: var(--color-ink); color: var(--color-ink); }
.igw-progress__i[data-state="done"] .igw-progress__b { color: var(--color-ok-text); border-color: var(--color-ok); }
.igw-progress__i[data-state="current"] .igw-progress__b { background: var(--color-acc); color: var(--color-on-acc); border-color: var(--color-acc); }

/* ---------- Шаг ---------- */
.igw-step { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.igw-step__n { margin: 0; }
.igw-step__t { margin: 0; overflow-wrap: anywhere; }
.igw-step__t:focus { outline: none; }
.igw-step__t:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }
.igw-step__hint { color: var(--color-ink2); font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); max-width: var(--layout-measure); }
.igw-warn { margin: 0; }
.igw-link { justify-self: start; min-height: var(--size-touch-min); max-width: 100%; white-space: normal; text-align: center; text-decoration: none; }

/* ---------- Маркер ---------- */
.igw-key { display: grid; gap: var(--space-3); min-width: 0; }
.igw-key__form { display: grid; gap: var(--space-2); min-width: 0; }
.igw-key__hint { color: var(--color-ink2); }
.igw-key__input {
  width: 100%; min-height: var(--size-touch-min); padding: var(--space-3) var(--space-4); box-sizing: border-box;
  background: var(--color-panel2); color: var(--color-ink); border: 1px solid var(--color-line2); border-radius: var(--radius-md); font: inherit;
}
.igw-key__input:focus-visible { outline: var(--size-focus-width) solid var(--color-focus); outline-offset: var(--size-focus-offset); }
.igw-key__input[aria-invalid="true"] { border-color: var(--color-danger-text); }
.igw-key__btns { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.igw-key__input:disabled, .igw-key__btns .btn:disabled { opacity: .6; cursor: not-allowed; }
.igw-key__btns .btn, .igw-back__btn, .igw-choose__btn, .igw-nav .btn { min-height: var(--size-touch-min); max-width: 100%; white-space: normal; text-align: center; }

.igw-msg { min-width: 0; font: var(--text-caption-weight) var(--text-caption-size)/var(--text-caption-line) var(--font-sans); color: var(--color-ink2); }
.igw-msg:empty { display: none; }
.igw-msg[data-tone="ok"] { color: var(--color-ok-text); }
.igw-msg[data-tone="warn"] { color: var(--color-warn-text); }
.igw-msg[data-tone="danger"] { color: var(--color-danger-text); }
.igw-back:empty, .igw-choose:empty { display: none; }
.igw-back { display: flex; }

/* ---------- Выбор аккаунта ---------- */
.igw-choose__set { display: grid; gap: var(--space-3); min-width: 0; margin: 0; padding: 0; border: 0; }
.igw-choose__set legend { padding: 0; }
.igw-choose__list { display: grid; gap: var(--space-2); }
.igw-choose__row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--size-touch-min); }
.igw-choose__radio { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--color-acc); }
.igw-choose__label { flex: 1 1 auto; min-width: 0; padding: var(--space-3) 0; overflow-wrap: anywhere; cursor: pointer; }
.igw-choose__btn { justify-self: start; }

/* ---------- Навигация ---------- */
.igw-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); }
.igw-nav .btn:disabled { opacity: .6; cursor: not-allowed; }

@media (max-width: 39.99rem) {
  .igw-key__btns .btn, .igw-link, .igw-choose__btn { width: 100%; }
  .igw-nav .btn { flex: 1 1 8rem; }
}