/*
  Экран входа (ADR-0053, ADR-0054, TASK-0075).

  Экран входа — не третий экран домена, а наложение поверх дашборда
  наблюдения: сцена показывается полностью под мягкой дымкой (решение
  владельца, раздел 2.3 предложения). Дашборд наблюдения выбран потому, что
  его состав безопасен при полном показе: сведений жителей и лицевых счетов в
  нём нет.

  Модуль только оформляет окно входа. Состав окна задан владельцем: логотип,
  переключатель темы, кнопка оценки компьютера, выбор организации, логин,
  пароль и подвал с правообладателем.

  Тема оформления берётся из ролей стандарта: значения полной темы приходят из
  dashboard.css, значения темы «Ретро» — из retro.css. Отдельных цветов окно
  входа не заводит.
*/

/* Дымка накрывает сцену и показывает её полностью (решение владельца, раздел
   2.3 предложения). Пока окно активно, сцена под ним — только изображение:
   её взаимодействие исключено браузерным признаком inert на области сцены
   (ui/login.js), а не маскировкой прозрачным слоем. Дымка события не
   перехватывает ради «закрытия» сцены; исключение взаимодействия делает сам
   признак inert. Запрет прокрутки: см. .login-scroll-locked ниже. */
.login-overlay{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;
  background:rgba(2,5,12,.42);
  opacity:0;pointer-events:none;visibility:hidden;
  transition:opacity .3s linear,visibility 0s linear .3s;
  overscroll-behavior:contain;
}
.login-overlay.open{
  opacity:1;visibility:visible;
  transition:opacity .3s linear;
}

.login-sheet{
  width:min(408px,100%);
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  /* Панель возвращает себе события: сама дымка событий не берёт, а закрытое
     окно целиком скрыто признаком visibility и кликов не перехватывает. */
  pointer-events:auto;
  background:var(--card-bg);
  border:1px solid var(--line-2);
  display:grid;grid-template-rows:auto 1fr auto;
}
.login-head{
  padding:15px 18px 12px;
  border-bottom:1px solid var(--line);
}
.login-logo{
  font-family:var(--font-display);font-size:27px;font-weight:500;
  line-height:1;letter-spacing:-.5px;margin:0;
  background:linear-gradient(180deg,#fff,#c9d6e8 55%,#7d8ea6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.login-sub{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:3.4px;
  color:var(--muted);text-transform:uppercase;margin-top:7px;
}

.login-body{padding:14px 18px 16px;display:flex;flex-direction:column;gap:11px}

/* Переключатель темы: два положения, как назвал владелец. */
.theme-switch{
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--line-2);
}
.theme-switch button{
  all:unset;cursor:pointer;text-align:center;padding:10px 8px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--muted);
}
.theme-switch button.on{background:var(--gold);color:#03070e}
.theme-switch button:focus-visible{outline:2px solid var(--gold-2);outline-offset:-2px}

.login-action{
  all:unset;cursor:pointer;text-align:center;padding:11px 16px;
  border:1px solid var(--line-2);color:var(--ink-2);
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:1.6px;
  text-transform:uppercase;
}
.login-action:hover,.login-action:focus-visible{
  color:#fff;border-color:var(--gold-2);outline:none;
}
.login-action.primary{
  color:var(--gold-2);border-color:rgba(240,201,135,.5);
}
.login-action.primary:hover{color:#fff;border-color:var(--gold-2)}

.login-sheet label{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:2.4px;
  color:var(--muted);text-transform:uppercase;
}
.login-sheet input,.login-sheet select{
  padding:9px 12px;border:1px solid var(--line-2);
  background:rgba(4,9,20,.85);color:var(--ink);
  font-family:var(--font-mono);font-size:12.5px;
}
.login-sheet input:focus,.login-sheet select:focus{
  outline:none;border-color:var(--gold-2);
}
.login-sheet .ofield{display:flex;flex-direction:column;gap:6px}

.login-note{
  font-family:var(--font-mono);font-size:10px;color:var(--muted);
  line-height:1.6;margin:0;
}

/* Сообщение окна входа. Единое сообщение не раскрывает, существует ли
   учётная запись: это требование к формулировкам, а не украшение. */
.login-msg{
  padding:10px 12px;border-left:4px solid var(--amber);
  font-size:11.5px;color:var(--ink-2);line-height:1.6;
}
.login-msg.warn{border-left:0;border:1px dashed var(--amber)}
.login-msg[hidden]{display:none}

/* Результат оценки компьютера: итог словами, признаки, оговорка и кнопки. */
.device-result{
  border:1px solid var(--line);padding:12px 14px;
  display:flex;flex-direction:column;gap:9px;
}
.device-result[hidden]{display:none}
.device-result .dr-title{
  font-family:var(--font-display);font-size:19px;color:#fff;line-height:1.2;
}
.device-result .dr-summary{font-size:11.5px;color:var(--ink-2);line-height:1.6;margin:0}
.device-result .dr-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.device-result .dr-list li{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-2)}
.device-result .dr-why{font-family:var(--font-mono);font-size:10px;color:var(--muted);line-height:1.6;margin:0}
.device-result .dr-buttons{display:flex;flex-wrap:wrap;gap:9px}

.login-foot{
  padding:11px 18px;
  border-top:1px solid var(--line);
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:9.5px;color:var(--muted);letter-spacing:.5px;
}
.copyright-sign{
  width:18px;height:18px;flex-shrink:0;display:grid;place-items:center;
  border:1px solid var(--line-2);border-radius:50%;color:var(--ink-2);
  font-family:var(--font-display);font-size:11px;line-height:1;
}

/* Кнопка возврата к окну входа: окно входа — состояние экрана домена, а не
   отдельная страница. Кнопка живёт в подвале и не должна менять его высоту:
   подчёркивание выполнено текстом, а не рамкой, и отступы не добавляются —
   иначе подвал сдвинул бы сцену и дал бы наложение карточек. */
.login-open{
  all:unset;cursor:pointer;font-family:var(--font-mono);font-size:9.5px;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--ink-2);
  text-decoration:underline;text-underline-offset:2px;
}
.login-open:hover,.login-open:focus-visible{color:#fff;outline:none}

/* ------------------------------------------------------------------
   Сцена под окном — только изображение

   Исключение взаимодействия обеспечивает браузерный признак inert, который
   ставит на сцену ui/login.js: сцена и все её потомки выпадают из нажатий и
   из обхода фокусом, поэтому карточка не может открыть раздел. Это не
   маскировка: прозрачный слой ничего не «закрывает», а сама сцена перестаёт
   быть интерактивной. Свойства ниже — запасной путь для браузеров без inert
   и прямое исключение указателя.
   ------------------------------------------------------------------ */
.stage[inert]{pointer-events:none}
.login-backdrop{pointer-events:none;user-select:none}

/* Прокрутка фонового содержимого под окном запрещена: страница не должна
   уезжать за окном, пока окно активно. */
html.login-scroll-locked,html.login-scroll-locked body{overflow:hidden;overscroll-behavior:none}

/* Технические подробности проверки оборудования: по умолчанию свёрнуты и
   малозаметны, открываются по ссылке «подробнее». */
.device-result .dr-details{border-top:1px solid var(--line);padding-top:8px}
.device-result .dr-details summary{
  cursor:pointer;list-style:none;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--muted);
  text-decoration:underline;text-underline-offset:2px;
}
.device-result .dr-details summary::-webkit-details-marker{display:none}
.device-result .dr-details summary:hover,
.device-result .dr-details summary:focus-visible{color:var(--ink-2);outline:none}
.device-result .dr-details[open] summary{margin-bottom:8px}
.device-result .dr-details .dr-list,
.device-result .dr-details .dr-why{margin-top:8px}

/* Системная настройка уменьшенного движения: появление окна без перехода. */
@media (prefers-reduced-motion: reduce){
  .login-overlay{transition:none}
}