/* v3-login.css — «Вход» по design-canvas/Login.dc.html (1 в 1), только оформление.

   Разметка входа (#login в index.html) прежняя: знак, «Полимер-Сервис», строка
   под ним, поле логина, пароль с «показать», ошибка, «Войти», ссылка водителям.
   Подписи макета («МТК Платформа», «Логин», «Пароль», строка про водителей)
   дорисованы здесь через content — прежние тексты остаются в разметке для
   читалок экрана. Телефон — по MobLogin.dc.html, ниже отдельным блоком. */
@media (min-width: 861px) {
  html .login-wrap { background: var(--t-page); font-family: var(--t-font); color: var(--t-ink); font-size: 14px; }
  html .login-card { width: 484px; max-width: 92vw; box-sizing: border-box; display: flex; flex-direction: column; gap: 18px;
    padding: 34px 32px 30px; border-radius: 30px; background: var(--t-surface); border: 1px solid var(--t-line);
    box-shadow: var(--sh-panel); }

  /* знак 64 и «МТК Платформа» */
  html .login-logo { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 0; line-height: normal; }
  html .login-logo span { display: none; }
  html .login-logo::before { content: ''; width: 64px; height: 64px; border-radius: 32px;
    background: url(/static/img/logo-mark.svg) center / cover no-repeat;
    box-shadow: 0 12px 26px -12px rgba(10,95,208,.8); }
  html .login-logo::after { content: 'МТК Платформа'; font-size: 26px; font-weight: 760; letter-spacing: -.02em; color: var(--t-ink); }

  /* строка под названием (10 от заголовка, 6 снизу) + подпись «Логин» над полем (7 до поля) */
  html .login-sub { font-size: 0; margin: -8px 0 -11px; color: var(--t-ink-3); text-align: center; }
  html .login-sub::before { content: 'Полимер-Сервис · вход для сотрудников'; display: block; font-size: 14px; }
  html .login-sub::after { content: 'Логин'; display: block; margin-top: 24px; text-align: left;
    font-size: 13px; font-weight: 600; color: var(--t-ink-2); }

  /* поля — 356 × 46, как в макете */
  html .login-card input, html .login-card input.inp { width: 100%; max-width: 100%; height: 46px; min-height: 46px; box-sizing: border-box;
    margin: 0; padding: 0 15px; border-radius: 15px; border: 1.5px solid var(--t-line-2); box-shadow: none;
    background: var(--t-surface); color: var(--t-ink); font: 550 15px var(--t-font); outline: none; }
  html .login-card input:focus, html .login-card input.inp:focus { border-color: var(--t-blue); box-shadow: var(--focus); background: var(--t-surface); }
  html .login-card input::placeholder { color: transparent; }
  html .login-card .pw-wrap { width: 100%; max-width: 100%; display: flex; flex-direction: column; gap: 7px; }
  html .login-card .pw-wrap::before { content: 'Пароль'; font-size: 13px; font-weight: 600; color: var(--t-ink-2); }
  html .login-card .pw-wrap .inp { width: 100%; padding-right: 92px; }
  html .login-card .pw-wrap .pw-toggle { top: auto; bottom: 23px; transform: translateY(50%); right: 15px;
    font-size: 13px; font-weight: 600; color: var(--t-blue); }

  html .login-err { margin: 0; min-height: 0; font-size: 13.5px; font-weight: 600; color: var(--t-bad-ink); }
  html .login-err:empty { display: none; }

  /* «Войти» — 52, градиент кита */
  html .login-card .btn.pri.lg { width: 100%; height: 52px; min-height: 52px; padding: 0; margin: 0; border: 0; border-radius: 26px;
    display: flex; align-items: center; justify-content: center; background: var(--t-blue-grad); color: #fff;
    font: 650 16px var(--t-font); box-shadow: var(--sh-pri); }
  html .login-card .btn.pri.lg:hover { background: linear-gradient(180deg, #5cb0ff, #1a7cea); }

  /* ссылка водителям — строкой под кнопкой */
  html .login-driver-link { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: 0;
    text-align: center; text-decoration: none; }
  html .login-driver-link::before { content: 'Водителям — в приложении водителя'; font-size: 13px; font-weight: 400;
    color: var(--t-ink-3); }
  html .login-driver-link:hover { background: none; }
  html .login-driver-link:hover::before { color: var(--t-blue-ink); }
}

/* ── Телефон: MobLogin.dc.html ──
   В макете знак с названием, белая карточка только с полями, под ней «Войти»
   и «Я водитель». В разметке же всё лежит в одной .login-card, поэтому
   карточка здесь прозрачная, а белую подложку под полями рисует её ::before.
   Её место считается из высот выше — они все заданы явно, в px:
   сверху 24 (отступ) + знак с названием 114 (72 + 10 + 32) + строка 28
   (10 + 18) + 20 до карточки = 186; сама карточка — 18 + «Логин» 17 + 7 +
   поле 52 + 12 + «Пароль» 17 + 7 + поле 52 + 18 = 200.
   Меняете любую высоту выше — пересчитайте top/height у ::before. */
@media (max-width: 860px) {
  /* по центру — полями auto у карточки: когда клавиатура поджала экран, верх не срезается */
  html .login-wrap { box-sizing: border-box; height: 100%; overflow-y: auto; align-items: flex-start; justify-content: flex-start;
    background: var(--t-nested);
    font-family: var(--t-font); color: var(--t-ink); font-size: 15px; line-height: normal;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px); }
  html .login-card { position: relative; z-index: 0; width: 100%; max-width: 440px; margin: auto; box-sizing: border-box;
    padding: 24px 22px; display: flex; flex-direction: column; background: none; border: 0; border-radius: 0; box-shadow: none; }
  html .login-card::before { content: ''; position: absolute; z-index: -1; left: 22px; right: 22px; top: 186px; height: 200px;
    border-radius: 26px; background: var(--t-surface); }

  /* знак 72 и «МТК Платформа» */
  html .login-logo { height: 114px; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 0;
    font-size: 0; line-height: 0; }
  html .login-logo span { display: none; }
  html .login-logo::before { content: ''; flex-shrink: 0; width: 72px; height: 72px; border-radius: 36px;
    background: url(/static/img/logo-mark.svg) center / cover no-repeat;
    box-shadow: 0 12px 26px -12px rgba(10,95,208,.8); }
  html .login-logo::after { content: 'МТК Платформа'; margin-top: 10px; font-size: 26px; font-weight: 760; line-height: 32px;
    letter-spacing: normal; color: var(--t-ink); }

  /* строка под названием и подпись «Логин» — уже внутри белой карточки */
  html .login-sub { margin: 0; font-size: 0; line-height: 0; text-align: center; color: var(--t-ink-3); }
  html .login-sub::before { content: 'вход для сотрудников'; display: block; margin-top: 10px; font-size: 14.5px; line-height: 18px; }
  html .login-sub::after { content: 'Логин'; display: block; margin: 38px 18px 0; text-align: left;
    font-size: 14px; font-weight: 600; line-height: 17px; color: var(--t-ink-2); }

  /* поля — 52, скругление 16, шрифт 17 (меньше 16 — и iPhone приближает страницу) */
  html .login-card input, html .login-card input.inp { width: 100%; max-width: none; height: 52px; min-height: 52px;
    box-sizing: border-box; margin: 0; padding: 0 16px; border-radius: 16px; border: 1.5px solid var(--t-line-2);
    box-shadow: none; background: var(--t-surface); color: var(--t-ink); font: 400 17px var(--t-font); outline: none; }
  html .login-card input:focus, html .login-card input.inp:focus { border-color: var(--t-blue); box-shadow: var(--focus);
    background: var(--t-surface); }
  html .login-card input::placeholder { color: transparent; }
  html .login-card > input, html .login-card > input.inp { width: calc(100% - 36px); margin: 7px 18px 0; }
  html .login-card .pw-wrap { width: calc(100% - 36px); margin: 12px 18px 0; display: flex; flex-direction: column; gap: 7px; }
  html .login-card .pw-wrap::before { content: 'Пароль'; font-size: 14px; font-weight: 600; line-height: 17px; color: var(--t-ink-2); }
  html .login-card .pw-wrap .inp { width: 100%; padding-right: 104px; }
  /* «показать» — по центру поля, касание 44 */
  html .login-card .pw-wrap .pw-toggle { top: auto; bottom: 26px; right: 4px; transform: translateY(50%); padding: 13px 12px;
    font-size: 14px; font-weight: 600; line-height: 18px; color: var(--t-blue); }

  /* ошибка — под карточкой; «Войти» — 20 от карточки, а при ошибке ближе к ней */
  html .login-err { margin: 38px 0 0; min-height: 0; text-align: center; font-size: 14px; font-weight: 600;
    line-height: 18px; color: var(--t-bad-ink); }
  html .login-err:empty { display: none; }
  html .login-card .btn.pri.lg { width: 100%; height: 56px; min-height: 56px; margin: 38px 0 0; padding: 0; border: 0;
    border-radius: 28px; display: flex; align-items: center; justify-content: center; background: var(--t-blue-grad);
    color: #fff; font: 700 17px var(--t-font); box-shadow: var(--sh-pri); }
  html .login-err:not(:empty) + .btn.pri.lg { margin-top: 12px; }

  /* «Я водитель» — строкой под кнопкой, касание 44 */
  html .login-driver-link { display: block; margin: 8px 0 0; padding: 0; border: 0; border-radius: 0; background: none;
    font-size: 0; line-height: 44px; text-align: center; text-decoration: none; }
  html .login-driver-link::before { content: 'Я водитель'; font-size: 15px; font-weight: 650; color: var(--t-blue); }
  html .login-driver-link:hover { background: none; }
}