/* ── экран входа · лист 15 «авторизация» ──────────────────────────────────────
   Одна золотая = способ платформы (web→Telegram, iOS→Apple, Android→Google),
   ряд ⅓ из остальных способов + почта, легаль; почта — фазами с 6-значным кодом.
   Грузится ПОСЛЕ app.css и ДО dark.css: правит .login-box (чистый R16 вместо
   кляксы-r-sketch) и добавляет .a-*. Тёмная тема — токенами (--paper2/--marker
   переопределены в dark.css); правки под #login там же при нужде.

   ВАЖНО: --gold — НЕ глобальный токен (живёт только в #profile), поэтому здесь
   он объявлен локально на #login, иначе var(--gold) пуст в обеих темах.
   Скругления — px (в системе нет --rNN). Рисованные рамки — на ::before с
   filter:url(#squiggle) (НЕ #sqg): универсальные гейты base.css (light-fx /
   prefers-reduced-motion → filter:none) гасят их сами (перф-контракт §1). */

#login{ --gold:#D9A832; }

/* Карточка: чистый прямоугольник R16 без поворота (было — r-sketch + rotate). */
.login-box{
  border-radius:16px;
  padding:28px 24px 32px;
  max-width:416px;                 /* десктоп-кап 416 = 52×8 (лист 15) */
  transform:none;
}
.login-box::before{ border-radius:16px; }
@media (max-width:639px){
  .login-box{ padding:24px 18px 28px; }
}

/* Словомарка + красный росчерк 128×8 + таглайн — одно тихое поле под лого. */
.a-mark{
  font-family:'Caveat',cursive; font-weight:700; font-size:34px; line-height:36px;
  text-align:center; color:var(--graphite); letter-spacing:.5px;
}
.a-under{ display:block; width:128px; height:8px; margin:6px auto 0; }
.a-tag{ margin:6px auto 0; font-size:.9rem; color:var(--graphite-soft); text-align:center; }

/* Язык — тот же тихий текст, рамка-affordance 40/R10 (перекрывает app.css). */
.login-box .lang-select{
  margin:12px auto 0; max-width:12rem; padding:8px 32px 8px 14px;
  border-radius:10px; border:1px solid var(--pencil-faint);
}

/* ── фазы A/B/C: crossfade 240 мс, только opacity + translateY(8) (перф ok) ── */
.a-ph{ transition:opacity .24s ease, transform .24s ease; }
.a-ph.out{ opacity:0; transform:translateY(8px); pointer-events:none; }
.a-ph[hidden]{ display:none; }

.a-lead{ margin:18px auto 0; font-size:.95rem; color:var(--graphite-soft); text-align:center; }

/* Один акцент — золотая платформенная кнопка 48/R12. */
.a-pri{
  position:relative; width:100%; height:48px; margin-top:8px;
  border:none; border-radius:12px; background:var(--gold); color:#fff; cursor:pointer;
  font-family:'Caveat',cursive; font-weight:700; font-size:1.2rem;
}
.a-pri::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:12px; filter:url(#squiggle);
}
.a-pri .lbl{ display:flex; align-items:center; justify-content:center; gap:10px; padding:0 16px; min-width:0; }
.a-pri .lbl .tx{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.a-pri .lbl svg{ width:24px; height:24px; flex:none; }
/* Ожидание/успех: точки прыгают, галка прочерчивается (наложены поверх .lbl). */
.a-pri .wt, .a-pri .ok{ position:absolute; inset:0; display:none; align-items:center; justify-content:center; gap:8px; }
.a-pri.busy .lbl, .a-pri.done .lbl{ opacity:0; }
.a-pri.busy .wt{ display:flex; }
.a-pri.done .ok{ display:flex; }
.a-pri .wt i{ width:8px; height:8px; border-radius:50%; background:#fff; animation:lg-hop .6s ease-in-out infinite; }
.a-pri .wt i:nth-child(2){ animation-delay:.12s; }
.a-pri .wt i:nth-child(3){ animation-delay:.24s; }
@keyframes lg-hop{ 0%,100%{ transform:translateY(0);} 40%{ transform:translateY(-8px);} }
.a-pri .ok svg{ width:28px; height:28px; }
.a-pri .ok path{ stroke:#fff; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:30; stroke-dashoffset:30; }
.a-pri.done .ok path{ animation:lg-tick .24s ease forwards; }
@keyframes lg-tick{ to{ stroke-dashoffset:0; } }

/* «или» — тонкий пунктирный разделитель. */
.a-or{ display:flex; align-items:center; gap:10px; height:24px; margin-top:12px;
  color:var(--pencil); font-size:.75rem; }
.a-or::before, .a-or::after{ content:""; flex:1; border-top:1.4px dashed var(--pencil-faint); }

/* Ряд ⅓ — три равные ячейки 48/R12 с line-глифом и подписью (обрезка «…»). */
.a-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:12px; }
.a-alt{
  position:relative; height:48px; border:none; border-radius:12px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:6px; padding:0 8px; min-width:0;
  background:var(--paper2); color:var(--graphite-soft); font-family:'Neucha',cursive; font-size:.82rem;
}
.a-alt::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:12px; filter:url(#squiggle);
}
.a-alt svg{ width:24px; height:24px; flex:none; }
.a-alt .tx{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }

/* Легаль — ≤2 строк, ссылки dashed. */
.a-legal{
  margin-top:18px; font-size:.72rem; color:var(--pencil); text-align:center; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.a-legal .lk{ border-bottom:1.4px dashed var(--pencil); cursor:pointer; }

/* ── фаза B · почта ── */
.a-inpw{ position:relative; height:48px; margin-top:8px; border-radius:12px; background:var(--paper2); }
.a-inpw::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:12px; filter:url(#squiggle);
}
.a-inpw input{
  width:100%; height:100%; border:none; outline:none; background:none;
  padding:0 16px; text-align:center; font-family:'Neucha',cursive; font-size:.95rem; color:var(--graphite);
}
.a-inpw input::placeholder{ font-style:italic; color:var(--pencil); opacity:1; }
.a-inpw.err{ animation:lg-err .36s ease; }             /* опечатка в адресе — вспышка */

/* «← другие способы» — ghost 40/R10. */
.a-back{
  position:relative; width:100%; height:40px; margin-top:12px; border:none; border-radius:10px;
  background:none; cursor:pointer; color:var(--graphite-soft); font-family:'Neucha',cursive; font-size:.88rem;
}
.a-back::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--pencil); border-radius:10px; filter:url(#squiggle);
}

/* ── фаза C · код из письма ── */
.a-sent{ margin-top:18px; font-size:.82rem; color:var(--graphite-soft); text-align:center; }
.a-sent b{ font-family:ui-monospace,Menlo,monospace; font-size:.9em; color:var(--graphite); }
/* 6 ячеек 44×48/R12, цепочка 304 ≤ 343; поверх — один скрытый OTP-input. */
.a-code{ position:relative; display:flex; gap:8px; justify-content:center; margin-top:12px; }
.a-code input{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; border:0; padding:0;
  font-size:16px; /* ≥16 — iOS не зумит (память ios-input-zoom) */
  letter-spacing:0; cursor:pointer;
}
.a-cell{
  position:relative; width:44px; height:48px; border-radius:12px; background:var(--paper2);
  display:flex; align-items:center; justify-content:center;
  font-family:'Caveat',cursive; font-weight:700; font-size:24px; color:var(--graphite);
}
.a-cell::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:2px solid var(--graphite); border-radius:12px; filter:url(#squiggle);
}
.a-cell.on{ background:var(--marker); }               /* заполненная ячейка — маркер */
.a-cell.cur::before{ border-color:var(--gold); }      /* курсор — золотая рамка */
.a-code.err .a-cell{ animation:lg-err .36s ease; }
@keyframes lg-err{ 0%,100%{ transform:translateX(0);} 25%{ transform:translateX(-3px);} 75%{ transform:translateX(3px);} }
.a-hint{ margin-top:8px; font-size:.7rem; color:var(--pencil); text-align:center; }

/* Полоса-таймер 4px + «отправить ещё раз» (спит ghost, пока тикает). */
.a-tstrip{ position:relative; height:4px; margin-top:16px; border-radius:2px; background:var(--pencil-faint); overflow:hidden; }
.a-tfill{ position:absolute; inset:0; background:var(--marker); transform-origin:left; }
.a-res{
  position:relative; width:100%; height:40px; margin-top:8px; border:none; border-radius:10px;
  background:none; cursor:pointer; color:var(--graphite-soft); font-family:'Neucha',cursive; font-size:.88rem;
}
.a-res::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border:1.5px dashed var(--pencil); border-radius:10px; filter:url(#squiggle);
}
.a-res[disabled]{ color:var(--pencil-faint); cursor:default; }
.a-res-n{ font-family:ui-monospace,Menlo,monospace; font-size:.85em; }

/* Dev-вход (только когда сервер в dev-режиме): поле имени + кнопка под лист. */
#login-dev{ display:flex; gap:8px; justify-content:center; margin-top:14px; }

/* Нажатие любой кнопки входа — лёгкое вдавливание. */
#login [data-press]{ transition:transform .09s ease; }
#login [data-press]:active{ transform:scale(.97); }