/* Страница входа. Общее (страница, шапка, подвал) в public-v2.css.
   Кукла стоит за карточкой и выглядывает из-за её края; позы переключает login-page.js. */

.lg-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 4vw;
  align-items: center;
  min-height: calc(100vh - 200px);
  min-height: calc(100svh - 200px);
  padding: 8px max(var(--pad), env(safe-area-inset-right, 0px)) 24px max(var(--pad), env(safe-area-inset-left, 0px));
}

/* слева: большой заголовок и нить из фото, которая «входит» в карточку */
.lg-hero { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 24px; min-height: 420px; }
.lg-hero h1 { font-size: clamp(48px, 7.2vw, 108px); line-height: 0.95; }
.lg-note { font-size: clamp(17px, 1.6vw, 22px); color: var(--text-secondary); max-width: 520px; }
/* нить в потоке под текстом, уходит к левому краю экрана и входит в карточку */
.lg-thread-wrap { position: relative; height: 24px; margin: 8px 0 0 calc(-1 * var(--pad)); width: calc(100% + var(--pad) + 4vw + 40px); }
.lg-thread { position: absolute; left: 0; top: 50%; width: 100%; max-width: none; height: auto; transform: translateY(-50%); mix-blend-mode: lighten; pointer-events: none; }

/* справа: кукла за карточкой */
.lg-side { position: relative; z-index: 1; padding-top: 236px; }
.doll { position: absolute; left: 50%; top: 0; width: 190px; margin-left: -95px; aspect-ratio: 278 / 521; pointer-events: none; }
.doll-stage { position: relative; width: 100%; height: 100%; transform-origin: 50% 100%; animation: doll-sway 5s ease-in-out infinite; }
.doll img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.16s ease; }
.doll img.is-on { opacity: 1; }
@keyframes doll-sway { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }

.lg-card {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border-radius: var(--radius-panel);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lg-card h2 { font-size: 34px; line-height: 1.05; letter-spacing: -0.02em; }
.lg-lead { color: var(--text-secondary); }
.lg-inset { background: var(--surface-2); border-radius: var(--radius-inset); padding: 12px 16px; font-size: var(--font-body); line-height: 1.4; }

.lg-form { display: flex; flex-direction: column; gap: 14px; }
.lg-field { display: flex; flex-direction: column; gap: 6px; }
.lg-field label { font-size: var(--font-small); color: var(--text-secondary); }
.lg-field input, .lg-password input {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border: 0;
  border-radius: var(--radius-inset);
  background: var(--surface-2);
  color: var(--text-primary);
  font: inherit;
  font-size: 17px;
}
.lg-field input:focus, .lg-password input:focus { outline: 2px solid var(--lime); outline-offset: 0; }
/* автозаполнение браузера не должно красить поля в светлый цвет */
.lg-field input, .lg-password input { color-scheme: dark; }
.lg-field input:-webkit-autofill, .lg-password input:-webkit-autofill { -webkit-text-fill-color: var(--text-primary); caret-color: var(--text-primary); box-shadow: 0 0 0 100px var(--surface-2) inset; transition: background-color 9999s ease-out; }
.lg-password { position: relative; }
.lg-password input { padding-right: 104px; }
.lg-password button {
  position: absolute;
  right: 6px;
  top: 6px;
  height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: var(--font-small);
  cursor: pointer;
}
.lg-password button:hover { color: var(--text-primary); }

.lg-consents { margin: 0; padding: 16px; border: 0; border-radius: var(--radius-card); background: var(--surface-2); display: flex; flex-direction: column; gap: 12px; }
.lg-consents legend { padding: 0; font-size: 16px; font-weight: var(--weight-medium); float: left; width: 100%; margin-bottom: 8px; }
.lg-consents p { clear: both; font-size: var(--font-small); color: var(--text-secondary); }
.lg-consent { display: flex; gap: 12px; align-items: flex-start; font-size: var(--font-small); line-height: 1.4; cursor: pointer; }
.lg-consent input {
  flex: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin: 0;
  border-radius: 7px;
  background: var(--bg);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.lg-consent input:checked { background: var(--lime); }
.lg-consent input:checked::after { content: ""; width: 10px; height: 6px; border: solid var(--accent-ink); border-width: 0 0 2.4px 2.4px; transform: translateY(-1px) rotate(-45deg); }
.lg-consent a { color: var(--text-primary); text-underline-offset: 3px; }

.lg-error { color: var(--danger); font-size: var(--font-small); }
.lg-submit { width: 100%; }
.lg-submit:disabled { opacity: var(--opacity-off); cursor: default; }
.lg-hint { font-size: var(--font-meta); color: var(--text-muted); }
.lg-support { font-size: var(--font-small); color: var(--text-secondary); text-underline-offset: 3px; }

@media (max-width: 899px) {
  .lg-shell { grid-template-columns: 1fr; gap: 0; min-height: 0; }
  .lg-hero { min-height: 0; gap: 10px; padding-bottom: 8px; }
  .lg-hero h1 { font-size: 36px; }
  .lg-note, .lg-thread-wrap { display: none; }
  .lg-side { padding-top: 168px; }
  .doll { width: 150px; margin-left: -75px; }
  .lg-card { padding: 22px; gap: 12px; }
  .lg-card h2 { font-size: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .doll-stage { animation: none; }
  .doll img { transition: none; }
}