/* Дверь 0110.
   ══════════════════════════════════════════════════════════════════════════

   ЗДЕСЬ НЕТ СВОЕЙ ПАЛИТРЫ, и это главное правило этого файла.

   Раньше была: свой набор величин с именами `--panel`, `--ink`, `--paper`.
   Пока дверь жила одна, это работало. Потом на ту же страницу приехал кабинет
   со своим набором — и в нём тоже оказался `--panel`. Побеждает тот файл, что
   подключён вторым, поэтому надпись на кнопке Google получила цвет из одного
   набора, а подложку из другого: #16161a на #171614. Кнопка стояла пустой
   коробкой, и никакой ошибки в журнале при этом не было.

   Тот же файл задавал раскладку ВСЕМУ телу страницы (`display: grid;
   place-items: center`). Кабинет заменяет содержимое тела целиком, но правило
   остаётся — и шапка с полосой сжимались по содержимому вместо всей ширины.
   Найдено 27.08.2026, оба раза одной причиной: файл двери распоряжался общим.

   Поэтому теперь: величины берутся из kabinet.css, тело не трогается вовсе, а
   если двери понадобится собственный цвет — его имя начинается с `vhod-`, и
   столкнуться ему не с чем.

   ЧТО ЭТО ЗА ЭКРАН. Сюда приходят не читать, а войти. Значит один столбец, два
   способа войти и ничего больше. Оранжевый ровно один раз — на том действии,
   которое сработает; второй способ рядом нарочно тише. */

/* Только отступ. Раскладка — забота самого экрана, а не тела страницы:
   в теле живёт и кабинет, у которого раскладка своя. */
body { margin: 0; }

.gate {
  display: grid;
  align-content: center;
  min-height: 100dvh;
  max-width: 30rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 6vw, 3rem) clamp(1.125rem, 5vw, 1.5rem);
  text-align: center;
}

/* Знак тот же, что в кабинете, только крупнее: человек должен видеть, что
   дверь и то, что за ней, — один продукт. */
.gate .znak {
  justify-content: center;
  margin-bottom: 0.625rem;
  font-size: 1.75rem;
}
.gate .znak-kletki { width: 3.875rem; height: 1rem; }

.lead {
  margin: 0 0 clamp(1.75rem, 5vw, 2.5rem);
  font-family: var(--tehnika);
  font-size: 0.6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--edva);
}

.body { display: grid; gap: var(--space-4); text-align: start; }

.quiet {
  margin: 0;
  text-align: center;
  font-family: var(--tehnika);
  font-size: 0.75rem;
  letter-spacing: .1em;
  color: var(--edva);
}

/* ──────────────────────────────────────────────────────── карточка */

.card {
  display: grid;
  gap: 0.75rem;
  padding: 1.25rem;
  background: var(--panel);
  border: 1px solid var(--gran);
  border-radius: var(--ugol);
}

.card h2 {
  margin: 0;
  font-family: var(--zagolovok);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
}

.hint {
  margin: 0;
  font-size: 0.8438rem;
  line-height: 1.5;
  color: var(--tishe);
}

/* ───────────────────────────────────────────────────────── кнопки */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 2px;
  padding: 0.8125rem 1.125rem;
  border: 1px solid var(--gran);
  border-radius: 0.625rem;
  background: transparent;
  color: var(--tekst);
  font: 500 var(--text-md)/1 var(--telo);
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}

.button:hover { background: var(--panel-vyshe); border-color: var(--gran-yarche); }
.button:focus-visible { outline: 2px solid var(--ogon); outline-offset: 2px; }
.button:disabled { opacity: .5; cursor: default; }

/* Оранжевый на этой странице один — на том действии, которое сработает.
   Второй способ входа рядом нарочно тише: он не главный и не должен спорить. */
.button-primary {
  border-color: var(--ogon);
  background: var(--ogon);
  color: var(--na-ogne);
  font-weight: 700;
}
.button-primary:hover { border-color: var(--ogon); background: var(--ogon-yarche); }

/* ───────────────────────────────────────────────────────────  поля */

.field { display: grid; gap: var(--space-2); }

/* Подпись поля — но НЕ пояснение под ним: пояснение тоже прямой потомок и
   попало бы под то же правило, став мелкой капслочной строкой. */
.field > span:not(.hint) {
  font-family: var(--tehnika);
  font-size: 0.6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--edva);
}

.field .hint { font-size: var(--text-xs); }

.field input {
  width: 100%;
  padding: 0.75rem 0.8125rem;
  border: 1px solid var(--gran);
  border-radius: 0.625rem;
  background: var(--pole);
  color: var(--tekst);
  font: 400 var(--text-md)/1.3 var(--telo);
}

.field input::placeholder { color: var(--edva); }
.field input:focus { outline: none; border-color: var(--ogon); }
.field input:focus-visible { outline: 2px solid var(--ogon); outline-offset: 2px; }

/* ───────────────────────────────────────────────────────── прочее */

/* Отказ обязан быть заметен и назван. Тихая строчка внизу — это отказ,
   которого не увидели, а значит и не поняли. Цвет тревоги живёт в общей
   палитре: у него две темы, и держать его здесь значило бы забыть про вторую. */
.error {
  margin: 0;
  padding: 0.8125rem 0.9375rem;
  border: 1px solid var(--trevoga);
  border-radius: 0.625rem;
  background: var(--trevoga-tihaya);
  color: var(--trevoga);
  font-size: 0.8438rem;
}

.podval {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  margin-top: clamp(1.5rem, 5vw, 2.125rem);
}

.podval .foot { margin: 0; text-align: start; }
.podval .knopka { flex: none; }

.foot {
  margin: clamp(1.5rem, 5vw, 2.125rem) 0 0;
  text-align: center;
  font-family: var(--tehnika);
  font-size: 0.6875rem;
  letter-spacing: .1em;
  color: var(--edva);
}

@media (prefers-reduced-motion: reduce) {
  .button { transition: none; }
}