/* Общий вид страниц справочника на сервере (§12): токены цвета, шрифт, отступы, скругления, кнопки, поля, видимый фокус.
   Палитра — цвета сайта палаты (notariat.ru): синяя шапка #234177, золото #f7b500, бордовые заголовки #9c1b38,
   серый фон #f2f2f2, текст #262626; только цвета: ни знаков, ни названия, ни шрифта палаты (R36).
   Тема одна — светлая, как у сайта палаты (решение владельца 16.10.2026): тёмную тему устройства страница не повторяет.
   «only light» и та же метка в <head> страниц — чтобы браузер телефона не затемнял страницу сам (Chrome: «Тёмная тема для сайтов»;
   жалоба владельца 25.10.2026). Движение — motion.css. Стили элементов — только классами (CSP: без атрибута style). */
:root {
  color-scheme: only light;
  --bg: #ffffff;            /* фон ленты и страниц */
  --surface: #f2f2f2;       /* колонка чатов, фон страниц входа */
  --soft: #eaeaea;          /* пузырь вопроса, цитаты, вторичные кнопки */
  --text: #262626;
  --muted: #5c5c5c;         /* подписи, даты, подсказки */
  --line: #d9d9d9;          /* рамки и разделители */
  --accent: #f7b500;        /* золото: метки, рамки, фокус, фон под графитовым текстом — не цвет текста */
  --accent-text: #262626;   /* текст на золоте */
  --brand: #234177;         /* шапка страниц — синяя, как у сайта палаты */
  --brand-text: #ffffff;
  --primary: #234177;       /* главная кнопка */
  --primary-text: #ffffff;
  --link: #234177;
  --heading: #9c1b38;       /* заголовки блоков ответа и разделов */
  --warn: #7a5200;
  --warn-bg: #fff7e0;
  --error: #9c1b38;
  --error-bg: #f9edf0;
  --radius: 8px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin: 0; padding: 16px;
  color: var(--text); background: var(--bg); overflow-wrap: anywhere; }
main { max-width: 640px; margin: 0 auto; }
h1 { font-size: 22px; line-height: 1.3; margin: 8px 0 16px; }
h2 { font-size: 18px; line-height: 1.3; color: var(--heading); }
a { color: var(--link); text-underline-offset: 2px; }
/* Фокус с клавиатуры — золотая рамка 2 px (история 64) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Поля */
form { display: flex; flex-direction: column; gap: 14px; }
label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
label.check { flex-direction: row; align-items: center; gap: 10px; font-weight: 400; }
input:not([type=checkbox]), textarea { font: inherit; font-weight: 400; width: 100%; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); background: var(--bg); }
input[readonly] { background: var(--soft); }
input[type=checkbox] { width: 20px; height: 20px; margin: 0; accent-color: var(--primary); }

/* Кнопки: не ниже 40 px, скругление 8 px; главная — --primary, вторичная — --soft с рамкой, ссылка — без рамки */
button { font: inherit; font-weight: 600; min-height: 40px; padding: 8px 18px; border: 1px solid var(--primary);
  border-radius: var(--radius); color: var(--primary-text); background: var(--primary); cursor: pointer; }
button:disabled { opacity: 0.6; cursor: default; }
button.secondary { color: var(--text); background: var(--soft); border-color: var(--line); }
button.secondary:hover:not(:disabled) { border-color: var(--muted); }
.linklike, button.linklike { min-height: 40px; padding: 8px 4px; border: 0; color: var(--link); background: none; font-weight: 400;
  line-height: 24px; text-decoration: underline; text-underline-offset: 2px; text-align: left; }

/* Сообщения: предупреждение и ошибка — в рамке с полосой слева (--warn / --error), чтобы ошибка не путалась с заголовком */
.message { margin: 0 0 16px; padding: 10px 12px; border-left: 4px solid var(--warn); border-radius: var(--radius);
  color: var(--text); background: var(--warn-bg); }
.error { color: var(--error); margin: 0; }
form .error { padding: 10px 12px; border-left: 4px solid var(--error); border-radius: var(--radius); background: var(--error-bg); }
.hint { color: var(--muted); font-size: 14px; margin-top: 16px; }
[hidden] { display: none !important; }

/* Вход, приглашение, «только для владельца» (§13): карточка по центру на фоне --surface, золотая полоса сверху */
body.entry { min-height: 100vh; background: var(--surface); }
.card { max-width: 420px; margin: 8vh auto 0; padding: 24px; border: 1px solid var(--line); border-top: 4px solid var(--accent);
  border-radius: 12px; background: var(--bg); }
.card h1 { margin-top: 0; }
.card .hint { margin-bottom: 0; }
/* Анкета нового нотариуса на странице приглашения — те же отступы, что у полей формы; длинная галочка — флажок у первой строки */
.form-part { display: flex; flex-direction: column; gap: 14px; }
.form-part h2 { margin: 0; }
.card.doc { max-width: 720px; }   /* согласие на обработку данных — длинный текст */
label.check.long { align-items: flex-start; }
label.check.long input { margin-top: 2px; flex: none; }