/* MG-Основа — страница входа. Пробный макет: одна большая чёрно-белая фотография,
   на ней маленькое окно входа с написанием «Основа». Выбрано начертание 1 и фон 1 (03.09.2026);
   остальные варианты лежат в assets как архив. Папка вне сторожей core.test.mjs, свои стили здесь. */

:root {
  color-scheme: light;
  --bg: #F5F3F0; --card: #FFFFFF; --line: #DDD9D4;
  --ink: #1B1A19; --ink-2: rgb(27 26 25 / .62); --ink-3: rgb(27 26 25 / .42);
  --blue: #0088FF; --blue-down: #0066CC;
  --font: -apple-system, "SF Pro Text", "Segoe UI", system-ui, Roboto, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --card-w: 360px;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--font); font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--ink);
  font-size: .9375rem; line-height: 1.4; min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; }
p { margin: 0; }

/* --- сцена: фотография во весь экран --- */
.stage {
  position: relative; min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center; padding: 24px;
  overflow: hidden; isolation: isolate;
}
.photo {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  transition: opacity .5s var(--ease);
}
/* лёгкое затемнение краёв, чтобы белое окно не спорило со светлыми местами фото */
.stage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgb(0 0 0 / 0) 40%, rgb(0 0 0 / .28) 100%);
}

/* --- окно входа --- */
.card {
  width: min(var(--card-w), 100%);
  background: var(--card); color: var(--ink);
  border-radius: 20px; padding: 40px 36px 28px;
  box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 30px 60px -24px rgb(0 0 0 / .55);
  display: grid; gap: 14px;
}
.mark {
  width: 100%; height: 96px; object-fit: contain; object-position: center;
  margin: -6px auto 16px;
  transition: opacity .35s var(--ease);
}

.field { display: grid; gap: 6px; }
.field__word {
  font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.field__in {
  width: 100%; height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.field__in:hover { border-color: rgb(27 26 25 / .28); }
.field__in:focus { outline: none; border-color: var(--blue); background: var(--card); box-shadow: 0 0 0 3px rgb(0 136 255 / .18); }

.go {
  height: 46px; margin-top: 10px; border-radius: 12px;
  border: 1px solid rgb(27 26 25 / .28); background: transparent; color: var(--ink);
  font-weight: 500; letter-spacing: .02em; cursor: pointer;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.go:hover { background: var(--bg); border-color: rgb(27 26 25 / .5); }
.go:active { transform: translateY(1px); }
.forgot {
  justify-self: center; font-size: .8125rem; color: var(--ink-3); margin-top: 2px;
  border: 0; background: transparent; padding: 4px 6px; cursor: pointer;
}
.forgot:hover { color: var(--ink-2); }
/* ответ формы: пустой места не занимает */
.say { font-size: .8125rem; line-height: 1.35; color: var(--ink-2); min-height: 0; }
.say:empty { display: none; }
.say--bad { color: #B4161A; }


/* --- телефон --- */
@media (max-width: 480px) {
  .stage { padding: 16px; }
  .card { padding: 32px 24px 22px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo, .mark, .go, .field__in { transition: none; }
}