/* ВХОД В ПАНЕЛЬ УПРАВЛЕНИЯ — «Clike Control Center».
 *
 * Разметка — admin_auth_login_markup() (includes/admin/admin_auth.php), поведение —
 * assets/admin-login.js. Экран самостоятельный (bare surface в page_header.php): шапки сайта нет,
 * auth.css пользовательских форм не грузится, поэтому здесь нет ни одного !important.
 *
 * ТЕМА — ТА ЖЕ, ЧТО У АДМИНКИ. Своей палитры у экрана нет: только токены --ds-* из
 * assets/ds/tokens/ds-theme.css, которые флипает <html data-theme>. Значение ставит page_header
 * по cookie dc_theme администратора (тот же тумблер, что в сайдбаре); admin_login разрешён для
 * светлой темы в dc_theme_guest_light_allowed(). Отдельной «системной» темы в проекте нет —
 * по умолчанию тёмная, как у всей админки.
 *
 * Размеры — компактный служебный вход в масштабе админки: карточка ≤ 420, поля и кнопка 42
 * (на телефоне 44 — цель под палец), радиусы 10/16, кегли 12–14 (поле 16 на телефоне — иначе
 * iOS увеличивает страницу при фокусе). Адаптив: desktop-first, 767 / 420 + короткий ландшафт.
 */

body.admin-login-page{background:var(--ds-bg)}

/* ЭКРАН — СОБСТВЕННЫЙ СЛОЙ ВО ВЕСЬ ВИДИМЫЙ ПРОСТОР.
 * Оболочка страниц входа держит body фиксированным, а .wrap и .auth-scroll-pane — узкой колонкой
 * со своими отступами и overflow:hidden. Перебивать эти правила — гонка специфичности; вместо неё
 * экран сам занимает окно и прокручивается внутри себя. Центрирование — margin:auto у карточки:
 * при нехватке высоты (клавиатура, ландшафт) верх не срезается. */
.acl{
  position:fixed;
  inset:0;
  z-index:1;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:
    max(24px, env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-right, 0px))
    max(24px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-left, 0px));
  background:
    radial-gradient(56rem 30rem at 50% -8%, var(--ds-bg-radial), transparent 70%),
    var(--ds-bg);
  color:var(--ds-ink);
  font-family:var(--ds-ui-font, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif);
  font-size:14px;
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  color-scheme:dark;                    /* полосы прокрутки и системные элементы — в цвет темы */
}
:root[data-theme="light"] .acl{color-scheme:light}
.acl *,
.acl *::before,
.acl *::after{box-sizing:border-box}

/* Карточка — поверхность админки: тот же градиент панели, рамка и тень, что у разделов. */
.acl__card{
  position:relative;
  flex:none;
  width:min(420px, 100%);
  margin:auto;
  padding:clamp(20px, 4vw, 28px);
  border-radius:var(--ds-r-16, 16px);
  border:1px solid var(--ds-panel-bd);
  background:var(--ds-panel-grad);
  box-shadow:var(--ds-shadow-2);
  animation:acl-rise .22s ease-out both;
}
@keyframes acl-rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.acl__brand{display:flex;align-items:center;gap:8px;min-width:0;margin:0 0 18px}
.acl__symbol{display:block;flex:none;width:30px;height:30px;color:var(--ds-ink)}
/* Встроенный SVG: «clike» — фирменный градиент, «.ru» — цвет текста темы (currentColor). */
.acl__wordmark{display:block;flex:none;width:83px;height:18px;color:var(--ds-ink)}

.acl__eyebrow{
  margin:0 0 4px;
  font-size:10.5px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ds-muted);
}
.acl__title{
  margin:0;
  font-size:clamp(19px, 4.6vw, 21px);
  line-height:1.25;
  font-weight:650;
  letter-spacing:-.01em;
  text-wrap:balance;
  color:var(--ds-ink);
}
.acl__lead{margin:4px 0 0;font-size:13px;line-height:1.45;color:var(--ds-muted);text-wrap:pretty}

/* Статус — одна компактная строка. Тона: info (сессия завершена / вы вышли) и danger (ошибка входа). */
.acl__notice{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:36px;
  margin:14px 0 0;
  padding:8px 12px;
  border:1px solid;
  border-radius:var(--ds-r-10, 10px);
  font-size:13px;
  line-height:1.35;
}
.acl__notice[hidden]{display:none}
.acl__notice-ic{flex:none;width:16px;height:16px;fill:currentColor}
/* Текст ошибки — основным цветом (красный на розовой подложке в светлой теме не дотягивал до 4.5:1);
   красные — значок и рамка. */
.acl__notice--danger{color:var(--ds-ink);background:var(--ds-danger-bg);border-color:var(--ds-danger-bd)}
.acl__notice--danger .acl__notice-ic{color:var(--ds-danger-fg)}
.acl__notice--info{color:var(--ds-ink);background:var(--ds-panel-soft);border-color:var(--ds-panel-bd)}
.acl__notice--info .acl__notice-ic{color:var(--ds-link-brand)}

.acl__form{display:grid;gap:14px;margin:18px 0 0}
.acl__field{display:grid;gap:6px;min-width:0}
/* style.css задаёт всем label отступы и жирность — у формы свои. */
.acl .acl__label{display:block;margin:0;font-size:12px;line-height:1.3;font-weight:500;color:var(--ds-muted)}

/* Поле темнее карточки в тёмной теме и светло-серое в светлой — тот же токен холста страницы.
   Селектор на класс тяжелее базового `:root[data-theme="light"] input` (public-feed-base.css,
   0-2-1), который иначе красил поле белым поверх токена. */
.acl .acl__field .acl__input{
  display:block;
  width:100%;
  height:42px;
  margin:0;
  padding:0 12px;
  font:inherit;
  font-size:14px;
  line-height:1.2;
  color:var(--ds-ink);
  background:var(--ds-bg);
  border:1px solid var(--ds-btn-bd-hover);
  border-radius:var(--ds-r-10, 10px);
  outline:none;
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.acl .acl__input:hover{border-color:var(--ds-muted-2)}
/* Фокус как в каноне полей: оранжевая рамка + мягкое кольцо. --ds-link-brand темнее в светлой теме —
   рамка видна и на светлом поле. */
.acl .acl__input:focus{border-color:var(--ds-link-brand);box-shadow:0 0 0 3px var(--ds-btn-bg-active)}
/* Место под кнопку показа пароля отводит сама поверхность (договор PasswordEyeContractTest). */
.acl .dc-pwf > .acl__input{padding-right:44px}
.acl .dc-pwf{color:var(--ds-muted)}
/* Значок — единственный признак кнопки: общий компонент приглушает его до .55 (2.2–2.7:1), здесь
   он читается (≈5:1 в обеих темах). */
.acl .dc-pwf > .dc-pweye{opacity:.9}
.acl .dc-pwf > .dc-pweye:hover{color:var(--ds-ink);opacity:1}
.acl .dc-pwf > .dc-pweye:focus-visible{outline-color:var(--ds-link-brand)}
/* Автозаполнение Chrome не перекрашивает поле в жёлтое или белое — в обеих темах. */
.acl .acl__input:-webkit-autofill,
.acl .acl__input:-webkit-autofill:hover{
  -webkit-text-fill-color:var(--ds-ink);
  -webkit-box-shadow:0 0 0 1000px var(--ds-bg) inset;
  caret-color:var(--ds-ink);
  transition:background-color 9999s ease-out 0s;
}
.acl .acl__input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ds-ink);
  -webkit-box-shadow:0 0 0 1000px var(--ds-bg) inset, 0 0 0 3px var(--ds-btn-bg-active);
}

/* Текст подсказки — основным цветом (оранжевый 12px в светлой теме не дотягивал до 4.5:1), значок — бренд. */
.acl__caps{display:flex;align-items:center;gap:6px;margin:0;font-size:12px;line-height:1.3;color:var(--ds-ink)}
.acl__caps[hidden]{display:none}
.acl__caps svg{flex:none;width:14px;height:14px;fill:var(--ds-link-brand)}

/* Основное действие админки: заливка бренда без градиента, текст — --ds-primary-ink
   (белый в тёмной теме, тёмный в светлой — канон кнопок). */
.acl .acl__submit{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:42px;
  margin:4px 0 0;
  padding:0 16px;
  border:0;
  border-radius:var(--ds-r-10, 10px);
  cursor:pointer;
  font:inherit;
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--ds-primary-ink);
  background:var(--ds-brand-1);
  box-shadow:none;
  -webkit-tap-highlight-color:transparent;
  transition:filter .15s ease;
}
.acl .acl__submit:hover{filter:brightness(1.06)}
.acl .acl__submit:active{filter:brightness(.94)}
.acl .acl__submit:focus-visible{outline:2px solid var(--ds-link-brand);outline-offset:2px}
.acl .acl__submit[disabled]{cursor:progress}
.acl__submit-label{transition:opacity .12s ease}
.acl__spinner{
  position:absolute;
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid currentColor;
  border-right-color:transparent;
  opacity:0;
}
.acl__submit.is-busy .acl__submit-label{opacity:0}
.acl__submit.is-busy .acl__spinner{opacity:1;animation:acl-spin .7s linear infinite}
@keyframes acl-spin{to{transform:rotate(360deg)}}

/* Служебная строка — метаданные, не содержание. */
.acl__foot{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:5px;
  margin:16px 0 0;
  font-size:11.5px;
  line-height:1.4;
  color:var(--ds-muted);
  text-align:center;
}
.acl__foot svg{flex:none;width:12px;height:12px;fill:currentColor}

/* Телефон и планшет в портрете: карточка ближе к верху — клавиатура не закрывает кнопку;
   до краёв экрана по 12px. */
@media (max-width:767px){
  .acl{
    padding:
      max(clamp(16px, 6vh, 48px), env(safe-area-inset-top, 0px))
      max(12px, env(safe-area-inset-right, 0px))
      max(16px, env(safe-area-inset-bottom, 0px))
      max(12px, env(safe-area-inset-left, 0px));
  }
  .acl__card{margin:0 auto auto;padding:20px}
  .acl .acl__field .acl__input,
  .acl .acl__submit{height:44px}
  .acl .acl__field .acl__input{font-size:16px}
}

/* Сенсорный экран шире 767 (телефон в ландшафте, планшет): те же 44 под палец и 16px в поле —
   иначе iOS увеличивает страницу при фокусе. */
@media (pointer:coarse){
  .acl .acl__field .acl__input{height:44px;font-size:16px}
  .acl .acl__submit{height:44px}
}

@media (max-width:420px){
  .acl__card{border-radius:var(--ds-r-14, 14px)}
  .acl__foot{font-size:11px}
}

/* Телефон в ландшафте: высоты мало — без подзаголовка, зазоры плотнее, цели под палец 44. */
@media (orientation:landscape) and (max-height:560px){
  .acl{padding-top:max(12px, env(safe-area-inset-top, 0px));padding-bottom:12px}
  .acl__card{margin:0 auto auto;padding:16px 20px}
  .acl__brand{margin-bottom:10px}
  .acl__lead{display:none}
  .acl__form{gap:10px;margin-top:12px}
  .acl .acl__field .acl__input,
  .acl .acl__submit{height:44px}
  .acl__foot{margin-top:10px}
}

@media (prefers-reduced-motion:reduce){
  .acl__card{animation:none}
  .acl .acl__input,
  .acl .acl__submit,
  .acl__submit-label{transition:none}
  .acl__submit.is-busy .acl__spinner{animation-duration:1.6s}
}