/* Общее для трёх экранов Редакции: палитра, шрифты, шапка, поля, ошибки.
   Палитра — лендинга (§7 договора), один в один с stranicy.py:SHABLON:
   фон #FAF8F2, текст #12141B, акцент #FF3420, ссылки #1D4FD8, рамки #E6E8EE,
   «бумага» #F3F1EA. Второго набора цветов не заводим: редактор показывает
   настоящую страницу рядом, и разъехавшиеся оттенки читались бы как дефект. */

:root {
  --fon: #FAF8F2;
  --tekst: #12141B;
  --akcent: #FF3420;
  --ssylka: #1D4FD8;
  --ramka: #E6E8EE;
  --bumaga: #F3F1EA;
  --tusklo: #5A6072;
  --belyy: #fff;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--fon);
  color: var(--tekst);
  font: 400 16px/1.6 'Onest', sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ssylka); }
a:hover { color: var(--akcent); }

/* ── шапка ───────────────────────────────────────────────────────────────── */

.shapka {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 22px;
  background: var(--belyy);
  border-bottom: 1px solid var(--ramka);
  flex: 0 0 auto;
}

.logo {
  font: 800 19px 'Unbounded', sans-serif;
  color: var(--tekst);
  text-decoration: none;
  white-space: nowrap;
}
.logo b { color: var(--akcent); }
.logo:hover { color: var(--tekst); }

.shapka__imya {
  font: 700 12px 'Unbounded', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tusklo);
  padding-left: 14px;
  border-left: 1px solid var(--ramka);
  white-space: nowrap;
}

.shapka__spravo { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.shapka__kto { font-size: 14px; color: var(--tusklo); }

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

.knopka {
  font: 700 15px 'Onest', sans-serif;
  padding: 10px 22px;
  border-radius: 999px;
  border: 2px solid var(--tekst);
  background: var(--belyy);
  color: var(--tekst);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-block;
  line-height: 1.2;
}
.knopka:hover { background: var(--bumaga); color: var(--tekst); }
.knopka:disabled { opacity: .45; cursor: default; }
.knopka:disabled:hover { background: var(--belyy); }

.knopka--glavnaya { background: var(--akcent); border-color: var(--akcent); color: var(--belyy); }
.knopka--glavnaya:hover { background: #E32A18; border-color: #E32A18; color: var(--belyy); }
.knopka--glavnaya:disabled:hover { background: var(--akcent); }

.knopka--tihaya {
  border: 0;
  background: none;
  padding: 8px 10px;
  font-weight: 600;
  color: var(--tusklo);
  font-size: 14px;
}
.knopka--tihaya:hover { background: var(--bumaga); color: var(--tekst); }

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

.pole {
  width: 100%;
  font: 400 16px/1.5 'Onest', sans-serif;
  color: var(--tekst);
  background: var(--belyy);
  border: 2px solid var(--ramka);
  border-radius: 12px;
  padding: 11px 14px;
}
.pole:focus { outline: 0; border-color: var(--tekst); }
.pole[readonly] { background: var(--bumaga); color: var(--tusklo); }

.podpis {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 5px;
}
.namek { font-size: 13px; line-height: 1.45; color: var(--tusklo); margin: 5px 0 0; }

/* ── сообщения ───────────────────────────────────────────────────────────── */

/* ⚠️ Текст сюда кладётся ровно тот, что прислал сервер в поле "oshibka".
   Своего «что-то пошло не так» поверх него не пишем: человек, который сейчас
   публикует на индексируемый домен, должен видеть настоящую причину. */
.soobshchenie {
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 15px;
  line-height: 1.45;
  margin: 0 0 16px;
}
.soobshchenie[hidden] { display: none; }
.soobshchenie--beda { background: #FFEDEA; border: 1px solid var(--akcent); color: #8E1B0C; }
.soobshchenie--tolk { background: var(--bumaga); border: 1px solid var(--ramka); color: var(--tekst); }

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