/* ============================================================================
   ВХОД, РЕГИСТРАЦИЯ И ПОДДЕРЖКА — 03.08.2026.
   Грузится ПОСЛЕ style.css и theme-dark.css, поэтому при равной силе селектора
   выигрывает этот файл. Тёмное переопределяется с тем же префиксом
   html[data-theme="dark"], иначе правило молча проигрывает по весу.

   ЗАЧЕМ ОН ЕСТЬ. Это два экрана трения: человек либо заводит аккаунт, либо
   жалуется на поломку. Ни там, ни там праздник не нужен — нужен порядок:
   крупные поля, видимые подписи, одна кнопка, ошибка не стирает набранное.
   Всё остальное на этих экранах должно молчать.

   ТОКЕНЫ БЕРУТСЯ ГОТОВЫЕ (--bg-*, --ink, --mut, --dim, --line, --iris, --r).
   Свои заведены только под ошибку: красного в палитре продукта нет, а --err
   есть не во всех темах, и полагаться на него было бы ставкой на удачу.
   ============================================================================ */

/* ────────────────────────────── 1. ФОРМА ВХОДА ──────────────────────────── */

/* Оверлей прокручивается сам, а карточка центрируется автополями. Форма
   регистрации теперь из четырёх полей плюс капча: на 390x844 с открытой
   клавиатурой она выше видимой области, и без прокрутки кнопка «Создать
   аккаунт» оказывается за краем экрана. margin:auto 0 центрирует, пока места
   хватает, и отдаёт прокрутку, когда перестало. */
.ov#authOv{
  align-items:flex-start;justify-content:center;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:max(16px,env(safe-area-inset-top,0px)) 14px calc(28px + env(safe-area-inset-bottom,0px));
}
.ov#authOv .auth-form{margin:auto 0}

.auth-form h3{margin-bottom:18px}

/* Поле = подпись + ввод + необязательная сноска. Подпись НАД полем, а не внутри:
   placeholder исчезает с первым символом, и форма из трёх одинаковых
   прямоугольников перестаёт объяснять себя ровно тогда, когда человек к ней
   возвращается. Для чтения с экрана поле без label — критическая находка. */
.auth-form .fld{margin-bottom:16px}
.auth-form .fld-l{
  display:block;margin-bottom:7px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);
}
.auth-form .fld-h{margin-top:7px;font-size:12.5px;line-height:1.4;color:var(--dim)}
/* Отступ переехал на .fld — иначе между полями складывались два зазора. */
.auth-form .fld input{margin-bottom:0;min-height:48px}

/* Глазок «показать пароль». По центру поля, а не по фиксированному top:11px:
   поле стало выше, и глаз уезжал к верхнему краю. Зона нажатия честные 44x44 —
   это не украшение, а порог попадания пальцем. */
.auth-form .pass-wrap{position:relative}
.auth-form .pass-wrap input{padding-right:54px}
.auth-form .pass-eye{
  top:50%;right:4px;transform:translateY(-50%);
  min-width:44px;min-height:44px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  opacity:1;color:var(--dim);
  transition:color .14s;
}
.auth-form .pass-eye:hover{color:var(--iris)}
/* Пароль сейчас открыт — глазок это показывает цветом, а не только формой:
   человек должен видеть, что его пароль виден соседу через плечо. */
.auth-form .pass-eye[aria-pressed="true"]{color:var(--iris)}
.auth-form .pass-eye svg{display:block}

/* Ошибка формы. Своя пара цветов: красного в палитре продукта нет.
   Светлая — #9B1C3B на белом (около 8.9:1), тёмная — #FFB3C4 на #17101F. */
.auth-err{
  --ae-ink:#9B1C3B;--ae-bg:rgba(155,28,59,.07);--ae-line:rgba(155,28,59,.30);
  margin:0 0 16px;padding:11px 13px;border-radius:var(--r,10px);
  font-size:13.5px;line-height:1.45;font-weight:600;
  color:var(--ae-ink);background:var(--ae-bg);border:1px solid var(--ae-line);
}
html[data-theme="dark"] .auth-err{
  --ae-ink:#FFB3C4;--ae-bg:rgba(240,135,155,.11);--ae-line:rgba(240,135,155,.32);
}
.auth-err[hidden]{display:none}
/* Виноватое поле. Рамка, а не заливка: заливка красным поверх набранного текста
   роняет его контраст ровно там, где надо перечитать написанное. */
.auth-form input.bad,
html[data-theme="dark"] .auth-form input.bad{border-color:#C8385C}
html[data-theme="dark"] .auth-form input.bad{border-color:#F0879B}

/* Главная кнопка во всю ширину. margin-left:auto достался от .btn.accent —
   на всю ширину он не нужен и ломает выравнивание. */
.auth-form .auth-go{width:100%;margin-left:0;margin-top:2px;min-height:52px;font-size:16px}

/* Ловушка для ботов. Не display:none: часть автозаполнялок пропускает скрытые
   поля, а уведённое за край — видит и заполняет. От клавиатуры и от чтения с
   экрана поле убрано отдельно (tabindex=-1, aria-hidden в разметке). */
.auth-trap{
  position:absolute !important;left:-9999px;top:auto;
  width:1px;height:1px;min-height:0 !important;padding:0 !important;margin:0 !important;
  opacity:0;pointer-events:none;
}

/* ──────────────── 1-bis. ТРЕБОВАНИЯ К ПАРОЛЮ, ЖИВОЙ СПИСОК (04.08) ───────────
   Стоит ПОД полем пароля и виден с первой секунды, а не после отказа. Правило,
   о котором человек узнаёт из красной плашки, — это правило, которое он уже
   нарушил; список же превращает регистрацию из угадайки в задачу с условиями.
   Состояние передаётся ТРЕМЯ носителями сразу — форма значка (кружок/галка),
   цвет и текст для чтения с экрана: одним цветом состояние передавать нельзя
   (ui-ux-pro-max, «Color Only», severity High), и это же спасает дальтоника. */
.auth-form .pw-req{
  margin-top:10px;padding:11px 12px 10px;
  border:1px solid var(--line);border-radius:var(--r,10px);
  background:rgba(127,127,127,.05);
}
html[data-theme="dark"] .auth-form .pw-req{background:rgba(255,255,255,.035)}
.auth-form .pw-req-h{
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);margin-bottom:8px;
}
.auth-form .pw-req-l{list-style:none;margin:0;padding:0}
/* Строка требования. align-items:flex-start — на 360px длинная подпись уходит во
   вторую строку, и значок обязан остаться у первой, а не уехать в середину. */
.auth-form .pw-i{
  display:flex;align-items:flex-start;gap:8px;
  margin:0 0 7px;font-size:13px;line-height:1.45;color:var(--dim);
  transition:color .16s;
}
.auth-form .pw-i:last-child{margin-bottom:0}
.auth-form .pw-m{flex:0 0 auto;display:inline-flex;margin-top:1px;color:var(--dim);transition:color .16s}
.auth-form .pw-t{flex:1 1 auto;min-width:0}
/* Текст состояния — только для чтения с экрана. Не display:none: скрытое так
   содержимое скринридер не читает вовсе, и смысл галочки теряется. */
.auth-form .pw-s{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
/* Выполнено. Зелёного в палитре продукта нет, а красить достижение в акцентный
   сиреневый честнее, чем тащить чужой цвет: он уже значит «твоё, засчитано». */
.auth-form .pw-i.on{color:var(--ink)}
.auth-form .pw-i.on .pw-m{color:var(--iris)}
/* Счётчик длины. Табличные цифры — иначе строка дёргается на каждом символе. */
.auth-form .pw-n{
  font-weight:800;font-variant-numeric:tabular-nums;color:var(--dim);
}
.auth-form .pw-i.on .pw-n{color:var(--iris)}
/* Четыре вида символов показаны образцами, а не названиями: «abc ABC 123 !@#»
   понятно без перевода и в полтора раза короче, чем «строчные, заглавные…». */
.auth-form .pw-cs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.auth-form .pw-c{
  min-width:38px;padding:3px 8px;border-radius:7px;
  border:1px solid var(--line);
  font-size:11.5px;font-weight:700;line-height:1.5;text-align:center;
  color:var(--dim);
  transition:color .16s,border-color .16s,background-color .16s;
}
.auth-form .pw-c.on{
  color:var(--iris);border-color:var(--iris);
  background:rgba(200,136,230,.12);
}
.auth-form .pw-req-f{
  margin-top:9px;padding-top:8px;border-top:1px solid var(--line);
  font-size:11.5px;line-height:1.4;color:var(--dim);
}
/* Узкий экран: 360px минус поля формы оставляет около 300px под текст. Уменьшаем
   только шрифт списка — значки и чипсы трогать нельзя, они и так на пределе. */
@media(max-width:380px){
  .auth-form .pw-req{padding:10px 10px 9px}
  .auth-form .pw-i{font-size:12.5px}
}
/* Человек попросил не анимировать — не анимируем. */
@media(prefers-reduced-motion:reduce){
  .auth-form .pw-i,.auth-form .pw-m,.auth-form .pw-c{transition:none}
}

/* Место под виджет капчи. Высота зарезервирована заранее: иначе виджет,
   приехавший через секунду, толкает кнопку вниз под уже занесённым пальцем.
   Пока ключа у сервера нет, контейнер скрыт и места не занимает вовсе. */
.auth-cap{margin:0 0 16px}
.auth-cap:not([hidden]){min-height:70px}   /* замерено: виджет Turnstile 69px */

/* Фокус с клавиатуры виден везде. У полей в style.css стоит outline:none, а в
   тёмной теме своё правило на :focus — поэтому пишем оба, с тем же префиксом. */
.auth-form input:focus-visible,
.auth-form .btn:focus-visible,
.auth-form .pass-eye:focus-visible,
.auth-form .auth-switch a:focus-visible{
  outline:2px solid var(--iris);outline-offset:2px;
}
html[data-theme="dark"] .auth-form input:focus-visible{
  outline:2px solid var(--iris);outline-offset:1px;
}
/* Переключатель «уже есть аккаунт» — ссылка, значит и вести себя должна как
   ссылка: курсор и зона нажатия в одну строку текста слишком мелки для пальца.
   Замер 04.08 показал 34x27 — ниже порога 44px, по которому мы проверяем весь
   продукт. Высота добирается инлайновым боксом, а не паддингом: паддинг раздул
   бы подчёркивание ссылки на две строки. */
.auth-form .auth-switch a{
  cursor:pointer;display:inline-flex;align-items:center;
  min-height:44px;padding:0 4px;
}

@media(max-width:400px){
  .auth-form{padding:22px 18px 24px}
}

/* ─────────────────────────── 2. ОКНО ПОДДЕРЖКИ ──────────────────────────── */

/* Высоту видимой области и высоту клавиатуры считает JS (helpVVSync в app.js).
   Клавиатура телефона НЕ уменьшает layout-вьюпорт: оверлей position:fixed
   остаётся во весь экран, и низ окна вместе с кнопкой «Отправить» уезжает ПОД
   клавиатуру. Затемнение при этом трогать нельзя — оно обязано покрывать экран
   целиком, поэтому сдвигается только окно (padding-bottom оверлея). */

/* ПОЛЕ ВВОДА ВО ВСЮ ШИРИНУ, КНОПКА ПОД НИМ.
   Было: строка ввода и круглая стрелка рядом — на 390px под текст оставалось
   около 240 пикселей в одну строку, и жалобу в ней было физически неудобно
   писать (претензия Сармата 03.08). Стало: поле на всю ширину, пять строк
   сразу, кнопка отдельной полосой под ним. Заодно кнопка выросла с 44 круглых
   до полосы во всю ширину — попасть по ней большим пальцем можно не глядя. */
.help-in{display:block;padding:12px 14px 0}
.help-in textarea{
  display:block;width:100%;
  min-height:132px;max-height:none;   /* потолок роста считает helpGrow от экрана */
  padding:12px 14px;line-height:1.5;
}
.help-in #helpSend{
  width:100%;margin:10px 0 12px;margin-left:0;
  min-height:50px;font-size:16px;font-weight:700;
}
/* Сноска под кнопкой не должна упираться в её тень: 12 пикселей зазора кнопка
   уже даёт снизу сама, здесь только снимаем верхний отступ. */
.help-foot{padding-top:0}
.help-in textarea:focus-visible{outline:none}
html[data-theme="dark"] .help-in textarea:focus{
  border-color:var(--iris);
  box-shadow:inset 0 2px 4px rgba(0,0,0,.35),0 0 0 3px rgba(200,136,230,.22);
}
.help-in textarea:focus{border-color:var(--iris);box-shadow:0 0 0 3px var(--iris-soft)}

/* Приглашение выбрать тему. До 03.08 чипсы висели без объяснения, и выбор темы
   читался как обязательная анкета. Теперь строка прямо обещает, за что человек
   тапает: начало сообщения напишут за него. */
.help-ask{
  margin-top:18px;font-size:13px;font-weight:700;line-height:1.45;
  letter-spacing:.01em;color:var(--ink);
}
.help-topics{margin-top:10px;gap:9px}
/* 44 пикселя вместо 40: это тот же порог попадания пальцем, что и у остальных
   кнопок продукта, и чипсы — не исключение. */
.hchip{min-height:44px;padding:0 14px;font-size:13.5px;font-weight:600}
.hchip.on{box-shadow:inset 0 0 0 1px var(--accent)}
.help-hint{margin-top:12px}

@media(max-width:560px){
  /* Окно поддержки прижато к низу видимой области, а не по центру экрана.
     Две причины. Первая: клавиатура открывается снизу, и центрированное окно
     она разрезает пополам. Вторая: поле растёт ВВЕРХ за счёт ленты сообщений,
     поэтому кнопка «Отправить» стоит на месте и не прыгает под пальцем — ровно
     то, чего требовал Сармат. */
  .ov#helpOv{align-items:flex-end;padding:0 0 var(--vv-gap,0px)}
  .help-box{
    width:100%;max-width:none;height:min(92%,760px);
    max-height:var(--vv-h,100%);
    border-bottom-left-radius:0;border-bottom-right-radius:0;
  }
  /* Пустая переписка — окно по содержимому (правило style.css). Но при открытой
     клавиатуре содержимое выше доступной высоты, а flex:0 0 auto запрещает
     ленте ужиматься, и она вылезала за край. Разрешаем ей сжиматься и
     прокручиваться — текст обращения важнее приветствия над ним. */
  .help-box.lean{height:auto;max-height:var(--vv-h,100%)}
  .help-box.lean .chat-log{flex:0 1 auto;min-height:0}
  .help-box .chat-log{min-height:0}
  .help-foot{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
}