/* Собирается scripts/build-journal.js из public/tokens.css и public/components.css (стиль RESI); вручную не править. */
/* RESI — токены дизайн-системы (файл 55, раздел 2). Подключается на всех страницах первым.
   Шрифты — с нашего сервера (public/fonts, лицензии OFL рядом), без внешних запросов. */

@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/Inter-Regular.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/Inter-Medium.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/Inter-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/Inter-Bold.woff2") format("woff2")}

:root{
  --bg:#F7F7F5;          /* фон страницы */
  --surface:#FFFFFF;     /* лист отчёта, поля, текстовый блок */
  --ink:#15212B;         /* основной текст */
  --muted:#4B5563;       /* вторичный текст */
  --navy:#1A3A52;        /* заголовки, кнопка, ссылки, активный шаг */
  --amber:#B45309;       /* только маркер шкалы, ▲ и подпись над заголовком */
  --line:#D9DDE1;        /* разделители */
  --line-strong:#6B7280; /* границы полей и вариантов ответа (>=3:1) */
  --seg:#C5CCD3;         /* невыбранные сегменты шкалы */
  --ok:#216E4A; --err:#B42318;
  --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --radius:2px; --radius-ctl:4px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px; --sp-22:88px;
  --w-page:1160px; --w-read:720px; --w-form:680px; --ctl-h:48px;
  /* состояния кнопки: темнее на 8% (раздел 7) */
  --navy-hover:color-mix(in srgb,var(--navy) 92%,#000);
  --navy-active:color-mix(in srgb,var(--navy) 84%,#000);
  color-scheme:light;
}

/* RESI — компоненты (файл 55, разделы 4, 6, 7): основа текста, ссылки, кнопки, поля, фокус, знак RESI.
   Подключается после tokens.css и до стилей страницы. Раскладка страниц — в style.css / landing.css. */

/* атрибут hidden сильнее любого display у компонентов (иначе скрытые кнопки видны) */
[hidden]{display:none!important}
*,*::before,*::after{box-sizing:border-box}
body{font-family:var(--font-ui);color:var(--ink);background:var(--bg);font-size:16px;line-height:1.55;-webkit-text-size-adjust:100%}
.t-mono{font-family:var(--font-mono);font-size:14px;text-transform:uppercase;letter-spacing:.02em;color:var(--muted)}

/* ссылки */
a{color:var(--navy);text-underline-offset:3px}
a:hover{color:var(--navy-hover)}
.link-action{color:var(--navy);font-weight:600;text-decoration:underline;text-underline-offset:5px}

/* фокус с клавиатуры: контур 2 px navy + зазор 2 px */
:focus-visible{outline:2px solid var(--navy);outline-offset:2px}

/* кнопки: основная — navy; вторичная — граница navy; ссылка-действие — подчёркнутый текст */
.btn,.btn-main,.btn-alt{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ctl-h);padding:0 28px;
  border:1.5px solid var(--navy);border-radius:var(--radius);background:var(--navy);color:#fff;
  font:600 16px/1.2 var(--font-ui);text-decoration:none;text-align:center;cursor:pointer}
.btn:hover,.btn-main:hover{background:var(--navy-hover);border-color:var(--navy-hover);color:#fff}
.btn:active,.btn-main:active{background:var(--navy-active);border-color:var(--navy-active)}
.btn.secondary,.btn-alt{background:transparent;color:var(--navy)}
.btn.secondary:hover,.btn-alt:hover{background:transparent;color:var(--navy-hover);border-color:var(--navy-hover)}
.btn.secondary:active,.btn-alt:active{color:var(--navy-active);border-color:var(--navy-active)}
.btn.link{min-height:auto;padding:0;border:0;background:none;color:var(--navy);text-decoration:underline;text-underline-offset:5px}
.btn.link:hover{background:none;color:var(--navy-hover)}
/* отключено: читается, граница --line-strong, текст --muted */
.btn:disabled,.btn[aria-disabled="true"]{background:var(--surface);border-color:var(--line-strong);color:var(--muted);cursor:not-allowed;opacity:1}
.btn.link:disabled{background:none;border:0}

/* поля ввода: высота 48, граница --line-strong, белый фон, радиус 4 */
input[type=text],input[type=email],input[type=date],select{min-height:var(--ctl-h)}
input[type=text],input[type=email],input[type=date],select,textarea{width:100%;padding:11px 12px;border:1px solid var(--line-strong);border-radius:var(--radius-ctl);
  background:var(--surface);color:var(--ink);font:16px/1.4 var(--font-ui)}
input[type=text]:focus-visible,input[type=email]:focus-visible,input[type=date]:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
/* ошибка: граница --err + текст под полем со значком (не только цвет) */
.field-invalid input,.field-invalid select,.field-invalid textarea,[aria-invalid="true"]{border-color:var(--err)}
.error:not(:empty){color:var(--err);display:flex;gap:8px;align-items:flex-start}
.error:not(:empty)::before{content:"";flex:none;width:16px;height:16px;margin-top:.2em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='none' stroke='%23B42318' stroke-width='1.6'/%3E%3Cpath d='M8 4v5' stroke='%23B42318' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11.6' r='1.1' fill='%23B42318'/%3E%3C/svg%3E") no-repeat center/16px}
.okmsg:not(:empty){color:var(--ok)}

/* знак RESI: слово (Inter 700, 24 px, navy) + мини-шкала справа: пять сегментов 13×6, зазор 3, выбран третий, ▲ (SVG) под ним */
.brand{display:inline-flex;align-items:center;gap:14px;color:var(--navy);text-decoration:none;font:700 24px/1 var(--font-ui);letter-spacing:.02em}
.brand:hover{color:var(--navy)}
.brand-mark{display:inline-flex;flex-direction:column;align-items:center;gap:3px}
.brand-segs{display:flex;gap:3px}
.brand-segs i{display:block;width:13px;height:6px;background:var(--seg)}
.brand-segs i.on{background:var(--amber)}
.brand-tri{display:block;width:8px;height:6px;fill:var(--amber)}
/* монохромная версия: всё navy, выбранный сегмент заполнен */
.brand.mono-mark .brand-segs i{background:none;box-shadow:inset 0 0 0 1px var(--navy)}
.brand.mono-mark .brand-segs i.on{background:var(--navy)}
.brand.mono-mark .brand-tri{fill:var(--navy)}
@media print{.brand-segs i,.brand-tri{-webkit-print-color-adjust:exact;print-color-adjust:exact}}