/* © 2026 VEYRO (ИП Макаров И. В.). appagent — проприетарная программа. Использование — по лицензионному договору https://appagent.ru/legal/offer/. Копирование и распространение без разрешения запрещены. */
/* Привязка телефона: блок «Телефон» на компьютере (.rp) и экран «Привязать компьютер» на телефоне (.pp).
   Значения только из tokens.css, размеры в rem; светлая и тёмная темы переключаются токенами. QR всегда тёмный на белом
   (системные цвета Canvas / CanvasText при color-scheme: light), иначе камера не прочтёт его в тёмной теме.
   Цвет только усиливает слова и значки; касания не меньше 2,75 rem. */

/* ---------- Компьютер: блок «Телефон» ---------- */
.rp { display: grid; gap: var(--space-5); width: 100%; min-width: 0; color: var(--color-ink); }
.rp > * { min-width: 0; }
.rp__title { font: var(--text-h3-weight) var(--text-h3-size)/var(--text-h3-line) var(--text-h3-family); letter-spacing: var(--text-h3-track); overflow-wrap: anywhere; }
.rp__lead { max-width: var(--layout-measure); overflow-wrap: anywhere; }
.rp__h { font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--text-ui-strong-family); overflow-wrap: anywhere; }
.rp__text { font: var(--text-body-weight) var(--text-body-size)/var(--text-body-line) var(--font-sans); overflow-wrap: anywhere; }
.rp__hint { max-width: var(--layout-measure); }
.rp__timer { font-variant-numeric: var(--num-features); }
.rp__time { font-family: var(--font-num); font-feature-settings: "tnum"; color: var(--color-ink); }
.rp__pair, .rp__phones, .rp__settings { display: grid; gap: var(--space-3); justify-items: start; }
.rp__phones, .rp__settings { justify-items: stretch; }
.rp__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.rp__setrow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-3) var(--space-4); }
.rp .btn { white-space: normal; text-align: center; }

.rp-notice {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-md);
  background: var(--color-panel); border: 1px solid var(--color-line);
  font: var(--text-ui-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans);
}
.rp-notice > .ic { color: var(--color-ink3); }
.rp-notice > p { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.rp-notice--ok > .ic { color: var(--color-ok-text); }
.rp-notice--warn > .ic { color: var(--color-warn-text); }
.rp-notice--danger > .ic { color: var(--color-danger-text); }

.rp-card {
  display: grid; gap: var(--space-4); justify-items: start; width: 100%; max-width: var(--layout-narrow);
  padding: var(--space-6); background: var(--color-panel); border: 1px solid var(--color-line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.rp-card > * { min-width: 0; max-width: 100%; }
.rp-live { display: grid; gap: var(--space-2); }

.rp-qr {
  color-scheme: light; background: Canvas; color: CanvasText;
  padding: var(--space-3); border-radius: var(--radius-md); line-height: 0;
  width: min(100%, 17rem);
}
.rp-qr__img { display: block; width: 100%; height: auto; aspect-ratio: 1; }

.rp-sas {
  font: var(--text-number-xl-weight) var(--text-number-xl-size)/var(--text-number-xl-line) var(--font-num);
  font-variant-numeric: var(--num-features); letter-spacing: .08em; word-spacing: .2em; overflow-wrap: anywhere;
}

.rp-list { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; background: var(--color-panel); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }
.rp-phone { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); padding: var(--space-4) var(--space-5); }
.rp-phone + .rp-phone { border-top: 1px solid var(--color-line); }
.rp-phone__info { display: grid; gap: var(--space-1); min-width: 0; flex: 1 1 12rem; }
.rp-phone__info > * { overflow-wrap: anywhere; }
.rp-confirm { display: grid; gap: var(--space-3); flex: 1 1 100%; max-width: var(--layout-measure); }
.rp-confirm > p { overflow-wrap: anywhere; }
.rp__setrow > .rp-confirm { flex: 1 1 18rem; padding: var(--space-4); background: var(--color-panel); border: 1px solid var(--color-line2); border-radius: var(--radius-md); }

/* ---------- Телефон: экран «Привязать компьютер» ---------- */
.pp { display: grid; gap: var(--space-5); width: 100%; max-width: var(--layout-narrow); min-width: 0; margin: 0 auto; padding: var(--space-4); color: var(--color-ink); }
.pp > * { min-width: 0; }
.pp-title { font: var(--text-h2-weight) var(--text-h2-size)/var(--text-h2-line) var(--text-h2-family); letter-spacing: var(--text-h2-track); text-wrap: balance; overflow-wrap: anywhere; }
.pp-card {
  display: grid; gap: var(--space-4); padding: var(--space-5); background: var(--color-panel);
  border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.pp-card > * { min-width: 0; }
.pp-card--ok > .pp-icon { color: var(--color-ok-text); }
.pp-card--warn > .pp-icon { color: var(--color-warn-text); }
.pp-card--danger > .pp-icon { color: var(--color-danger-text); }
.pp-icon { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.pp-live, .pp-stack, .pp-steps, .pp-form { display: grid; gap: var(--space-3); }
.pp-text, .pp-step { font: var(--text-body-weight) var(--text-body-size)/var(--text-body-line) var(--font-sans); overflow-wrap: anywhere; }
.pp-steps .caption { overflow-wrap: anywhere; }
.pp-sas {
  font: var(--text-number-xl-weight) var(--text-number-xl-size)/var(--text-number-xl-line) var(--font-num);
  font-variant-numeric: var(--num-features); letter-spacing: .08em; word-spacing: .2em; overflow-wrap: anywhere; text-align: center;
}
.pp-field { display: grid; gap: var(--space-2); }
.pp-field__label { font: var(--text-ui-strong-weight) var(--text-ui-strong-size)/var(--text-ui-strong-line) var(--text-ui-strong-family); }
.pp-input {
  width: 100%; min-height: var(--size-control); padding: 0 var(--space-4); background: var(--color-bg2); color: var(--color-ink);
  border: 1px solid var(--color-line2); border-radius: var(--radius-md); font-size: 1rem;
}
.pp-input[aria-invalid="true"] { border-color: var(--color-danger); }
.pp-error { color: var(--color-danger-text); font: var(--text-ui-strong-weight) var(--text-ui-size)/var(--text-ui-line) var(--font-sans); overflow-wrap: anywhere; }
.pp-acts { display: grid; gap: var(--space-3); }
.pp .btn { white-space: normal; text-align: center; padding-block: var(--space-3); }
.pp-small { justify-self: center; }

@media (min-width: 48rem) {
  .pp { padding: var(--space-8) var(--space-6); }
  .pp-acts { display: flex; flex-wrap: wrap; }
}
@media (max-width: 30rem) {
  .rp-card { padding: var(--space-4); }
  .rp__acts .btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .rp *, .pp * { transition: none !important; }
}