/*
  Попапы входа и восстановления пароля (Figma «Авторизация, регистрация V2»).
  Статический дизайн: все размеры в пикселях макета через --dpx (считает auth.js от замороженного
  физического размера окна), тексты в покое рисует SVG — при ctrl+/ctrl− и масштабе Windows ничего не сдвигается.
  Попап 1141×800 макета растягивается по высоте окна (правка клиента: картинка пропорционально по высоте).
*/
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("fonts/roboto-cyrillic-300.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url("fonts/roboto-latin-300.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("fonts/roboto-cyrillic-400.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("fonts/roboto-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --dpx: 1px;
  --k: 1;
  --tz: 1;
  --hairline-w: 1px;
  --stage-left: 0px;
  --stage-top: 0px;
  --c-text: #62560e;
  --c-blue: #0087fc;
  --c-red: #ff0303;
  --c-green: #28c440;
  --c-yellow: #ffdd00;
  --ease: 0.15s ease;
  /* Линия 0,3px макета = один экранный пиксель с прозрачностью 0,245 от цвета (документ «механизм статики», п.13) */
  --hairline: 0.245;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #faf9f2;
}

body {
  font-family: "Roboto", Arial, sans-serif;
  color: var(--c-text);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.is-instant * {
  transition: none !important;
}

.tz-probe {
  position: fixed;
  left: -9999px;
  top: 0;
  display: inline-block;
  font-size: 100px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Сцена попапа: 1141×800 пикселей макета */
.stage {
  position: fixed;
  left: var(--stage-left);
  top: var(--stage-top);
  width: calc(1141 * var(--dpx));
  height: calc(800 * var(--dpx));
}

.stage__photo {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(531 * var(--dpx));
  height: calc(800 * var(--dpx));
  object-fit: cover;
  user-select: none;
}

.stage__panel {
  position: absolute;
  left: calc(531 * var(--dpx));
  top: 0;
  width: calc(610 * var(--dpx));
  height: calc(800 * var(--dpx));
  background: #ffffff;
  box-shadow: inset 0 0 0 max(var(--hairline-w), calc(1 * var(--dpx))) #fed942;
}

/* Содержимое SVG в координатах макета: масштаб группой (точное число), а не viewBox (округление блока) */
.k {
  transform: scale(var(--k));
  transform-origin: 0 0;
}

.stage svg {
  overflow: visible;
}

/* Фон и рамка полей, кнопок и подсказок — цвета состояний в --bg/--bd. Рисует их холст .box-canvas (auth.js):
   скруглённые углы HTML-блоков Chrome растеризует при перерисовке чуть иначе, чем при первой отрисовке. */
@property --bg {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --bd {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

.fld,
.btn,
.hints {
  background: var(--bg);
  box-shadow: inset 0 0 0 var(--hairline-w) var(--bd);
}

.has-boxes .fld,
.has-boxes .btn,
.has-boxes .hints {
  background: none;
  box-shadow: none;
}

.box-canvas {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

/* SVG — невидимая сцена: рисует холст .text-canvas (auth.js) */
.scene {
  opacity: 0;
}

.text-canvas {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  pointer-events: none;
}

/* Статические тексты всей сцены — один SVG в координатах макета */
.svg-text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.svg-text text {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 300;
  white-space: pre;
  fill: var(--c-text);
}

.svg-text .is-select {
  pointer-events: auto;
  user-select: text;
}

.stage__logo {
  position: absolute;
  left: calc(755 * var(--dpx));
  top: calc(45 * var(--dpx));
  width: calc(163 * var(--dpx));
  height: calc(159.8 * var(--dpx));
}

/* ===== Поле ввода: шесть состояний из ТЗ ===== */
.fld {
  position: absolute;
  width: calc(328 * var(--dpx));
  height: calc(50 * var(--dpx));
  border-radius: calc(2 * var(--dpx));
  --bg: #ffffff;
  --bd: rgba(98, 86, 14, calc(0.45 * var(--hairline)));
  transition: --bd var(--ease);
}

.fld__svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.fld__svg text {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 300;
  white-space: pre;
}

.fld__ph {
  font-size: 24px;
  fill: rgba(98, 86, 14, 0.7);
}

.fld__val {
  font-size: 24px;
  fill: var(--c-text);
}

.fld__label {
  fill: rgba(98, 86, 14, 0.6);
  transition: fill var(--ease);
}

.fld__gap {
  fill: #ffffff;
}

.fld__label,
.fld__gap {
  visibility: hidden;
}

.fld.is-focus .fld__label,
.fld.is-focus .fld__gap,
.fld.is-filled .fld__label,
.fld.is-filled .fld__gap {
  visibility: visible;
}

.fld.is-focus .fld__ph,
.fld.is-filled .fld__ph,
.fld.is-focus .fld__val {
  visibility: hidden;
}

/* Родное поле: текст виден только при фокусе (в покое его рисует SVG), кегль ×--tz компенсирует «Только текст» */
.fld__input {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0 50px 0 11px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: "Roboto", Arial, sans-serif;
  font-size: calc(24px * var(--tz));
  font-weight: 300;
  line-height: normal;
  color: transparent;
  caret-color: var(--c-text);
  outline: none;
  transform: scale(var(--k));
  transform-origin: 0 0;
}

.fld.is-focus .fld__input {
  color: var(--c-text);
}

/* Firefox: введённый текст и при фокусе рисует холст (auth.js), у поля остаются курсор и выделение */
.canvas-input .fld.is-focus .fld__input,
.canvas-input .fld__input::selection {
  color: transparent;
}

.canvas-input .fld.is-focus .fld__val {
  visibility: visible;
}

.fld__clear,
.fld__ok {
  position: absolute;
  left: calc(281 * var(--dpx));
  top: calc(10 * var(--dpx));
  width: calc(30 * var(--dpx));
  height: calc(30 * var(--dpx));
  padding: 0;
  border: 0;
  background: none;
}

.fld__clear {
  display: none;
  color: rgba(98, 86, 14, 0.57);
  cursor: pointer;
  transition: color var(--ease);
}

.fld__clear:hover {
  color: rgba(98, 86, 14, 1);
}

.fld__clear svg,
.fld__ok svg {
  display: block;
  width: 100%;
  height: 100%;
}

.fld.is-filled .fld__clear {
  display: block;
}

.fld__ok {
  display: none;
  color: #6b9f48;
}

/* 2–3: в поле нажали — голубая рамка и подпись */
.fld.is-focus {
  --bd: rgba(0, 135, 252, 0.5);
}

.fld.is-focus .fld__label {
  fill: var(--c-blue);
}

/* 5: не прошло проверку — красная рамка и подпись */
.fld.is-error:not(.is-focus) {
  /* красная рамка в макете 0,5px */
  --bd: rgba(255, 3, 3, calc(0.5 / 0.3 * var(--hairline)));
}

.fld.is-error:not(.is-focus) .fld__label {
  fill: var(--c-red);
}

/* 6: проверка пройдена — зелёная рамка и зелёная галочка вместо крестика */
.fld.is-valid {
  --bd: rgba(40, 196, 64, 0.6);
}

.fld.is-valid .fld__clear {
  display: none;
}

.fld.is-valid .fld__ok {
  display: block;
}

/* ===== Кнопка ===== */
.btn {
  position: absolute;
  width: calc(328 * var(--dpx));
  height: calc(50 * var(--dpx));
  padding: 0;
  border: 0;
  border-radius: calc(2 * var(--dpx));
  --bg: var(--c-yellow);
  color: var(--c-text);
  cursor: pointer;
  transition: --bg var(--ease);
}

.btn:hover:not(:disabled) {
  --bg: #eece02;
}

.btn:disabled {
  --bg: rgba(255, 221, 0, 0.4);
  color: rgba(98, 86, 14, 0.4);
  cursor: default;
}

.btn--empty:disabled {
  --bg: rgba(255, 221, 0, 0.3);
  color: var(--c-text);
}

.btn svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.btn svg text {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 24px;
  font-weight: 300;
  fill: currentColor;
}

.btn:focus-visible,
.link:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
}

/* Ссылка «Забыли пароль?» */
.link {
  position: absolute;
  display: block;
  height: calc(28 * var(--dpx));
  color: var(--c-blue);
  cursor: pointer;
}

.link svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.link svg text {
  font-family: "Roboto", Arial, sans-serif;
  font-size: 24px;
  font-weight: 300;
  fill: currentColor;
}

/* Подсказки email под полем */
.hints {
  position: absolute;
  z-index: 5;
  border-radius: calc(2 * var(--dpx));
  --bg: #ffffff;
  --bd: rgba(98, 86, 14, calc(0.45 * var(--hairline)));
  overflow: hidden;
}

.hints[hidden] {
  display: none;
}

.hints__row {
  position: absolute;
  cursor: pointer;
}

.hints__row.is-active {
  --bg: #fff8cc;
  background: var(--bg);
}

.has-boxes .hints__row {
  background: none;
}

.hints__row svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hints__row text {
  font-family: "Roboto", Arial, sans-serif;
  font-weight: 300;
  white-space: pre;
  fill: var(--c-text);
}

.controls {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

/* Логотип ведёт на вход (другого перехода в макете нет) */
.stage__home {
  position: absolute;
  left: calc(755 * var(--dpx));
  top: calc(45 * var(--dpx));
  width: calc(163 * var(--dpx));
  height: calc(159.8 * var(--dpx));
}

.stage__home .stage__logo {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* до загрузки шрифта тексты не показываем — иначе мелькнёт запасной шрифт */
.stage:not(.is-ready) .svg-text,
.stage:not(.is-ready) .controls {
  visibility: hidden;
}