/* Опрос «Что сделаешь ты?» — стили страницы.
 *
 * Значения — из хендоффа дизайна (Figma «NEN style-guide»): фон-лаванда
 * #F1F4FF, карточки белые с внутренней рамкой в 1px вместо тени (теней в
 * системе нет вовсе), радиус 10 у карточек и полей, 6 у тегов, 30 у главной
 * кнопки-пилюли. Эмодзи и сторонних иконок нет.
 *
 * Шрифты берём из общего набора сайта (/fonts/lk/): те же Unbounded и Golos
 * Text уже возит личный кабинет, так что у части детей они окажутся в кеше,
 * а страница не ходит на сторонний CDN. Начертания 700 добавлены рядом.
 */

/* ── Шрифты. Подсеты только cyrillic и latin: остальные тут не прочитают.
      Лицензия обоих — OFL, самохост разрешён. ─────────────────────────── */
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/lk/golos-text-400-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/lk/golos-text-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/lk/golos-text-500-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/lk/golos-text-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/lk/golos-text-700-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Golos Text';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/lk/golos-text-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/lk/unbounded-500-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/lk/unbounded-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/lk/unbounded-600-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/lk/unbounded-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/lk/unbounded-700-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Unbounded';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/lk/unbounded-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --lavender:#F1F4FF;   /* фон страницы */
  --ink:#252F67;        /* заголовки и основной текст */
  --ink-blue:#3D53BF;   /* второстепенный синий */
  --meta:#7C716D;       /* подписи «можно не отвечать» */
  --meta-dark:#494442;  /* блок про данные */
  --pick:#6683FF;       /* выбранный вариант */
  --card-line:#C5D0FF;
  --field-line:#E3DEDB;
  --row-line:#E3DBD7;
  --cta:#FB6326;
  --cta-hover:#FFC5AF;
  --cta-hover-ink:#B93D12;
  --tag-pink:#FFCCDA;
  --tag-pink-ink:#903750;
  --error:#A9323B;
  --cover:#251F23;      /* фон карточки обложки = фон иллюстрации */
  --display:'Unbounded', system-ui, -apple-system, sans-serif;
  --text:'Golos Text', system-ui, -apple-system, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--lavender);color:var(--ink);
  font-family:var(--text);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
}
img{max-width:100%}
a{color:var(--ink-blue);text-decoration:none}
a:hover{color:var(--ink)}
button{font:inherit;border:0;background:none}
:focus-visible{outline:2px solid var(--pick);outline-offset:2px}

/* ── Шапка ─────────────────────────────────────────────────────────────── */
.op-header{width:100%;background:var(--lavender);border-bottom:1px solid var(--card-line)}
.op-header__in{max-width:600px;margin:0 auto;padding:0 20px;height:72px;display:flex;align-items:center;justify-content:center}
/* Логотип — тот же файл, что в шапке сайта (/img/nen_logo_new.svg), и в том же
   размере, что там на мобильных: 89×40. Хендофф предлагал набрать «НЭН»
   шрифтом, но подпись под опросом для детей должна выглядеть ровно так же,
   как на главной, — иначе страница читается как чужая. */
.op-logo{display:block;line-height:0}
.op-logo img{display:block;width:89px;height:40px;object-fit:contain}

/* ── Каркас экранов ────────────────────────────────────────────────────── */
.op-screen{width:100%;max-width:600px;display:none;flex-direction:column}
.op-screen[data-on]{display:flex}
.op-intro{padding:24px 20px 40px;gap:24px}
.op-quiz{padding:0 20px 48px}
.op-done{padding:24px 20px 56px;gap:20px}

/* ── Общие кирпичи ─────────────────────────────────────────────────────── */
.op-card{background:#FFFFFF;border-radius:10px;box-shadow:0 0 0 1px var(--card-line) inset;padding:20px;display:flex;flex-direction:column}
.op-tag{display:inline-flex;align-items:center;align-self:flex-start;height:24px;border-radius:6px;padding:5px 10px;font-family:var(--display);font-size:10px;line-height:1.4;font-weight:500}
.op-tag--pink{background:var(--tag-pink);color:var(--tag-pink-ink)}
.op-tag--orange{background:var(--cta);color:#FFFFFF}
.op-tag--calm{background:var(--lavender);color:var(--ink-blue)}
.op-overline{font-family:var(--text);font-size:11px;line-height:1;font-weight:700;color:var(--ink-blue)}
.op-label{font-family:var(--display);font-size:16px;line-height:1.4;font-weight:500;color:var(--ink)}
.op-hint{font-family:var(--text);font-size:13px;line-height:1.5;color:var(--meta)}

/* ── Обложка и вступление ──────────────────────────────────────────────── */
.op-cover{background:var(--cover);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.op-cover__top{padding:20px 20px 0}
.op-cover img{display:block;width:100%;height:auto;margin-top:4px}
.op-h1{margin:0;font-family:var(--display);font-size:34px;line-height:1.2;font-weight:700;color:var(--ink);text-wrap:pretty}
.op-lead{display:flex;flex-direction:column;gap:12px}
.op-lead p{margin:0;text-wrap:pretty}
.op-lead__first{font-family:var(--text);font-size:18px;line-height:1.5;font-weight:500;color:var(--ink)}
.op-lead__second{font-family:var(--text);font-size:16px;line-height:1.5;color:var(--ink-blue)}

/* ── Анкета ────────────────────────────────────────────────────────────── */
.op-form{gap:20px}
.op-field{display:flex;flex-direction:column;gap:8px}
.op-field--chips{gap:12px}
.op-field__head{display:flex;flex-direction:column;gap:2px}
.op-field__title{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.op-chips{display:flex;flex-wrap:wrap;gap:8px}
.op-chip{height:44px;padding:0 16px;border-radius:10px;cursor:pointer;font-family:var(--display);font-size:14px;line-height:1.4;font-weight:500;background:var(--lavender);color:var(--ink-blue);box-shadow:0 0 0 1px var(--card-line) inset;transition:background 90ms ease-out,color 90ms ease-out,box-shadow 90ms ease-out}
.op-chip:hover{box-shadow:0 0 0 1px var(--pick) inset}
.op-chip[aria-pressed="true"]{background:var(--pick);color:#FFFFFF;box-shadow:none}
.op-input{width:100%;height:48px;padding:0 14px;border:0;border-radius:10px;background:#FFFFFF;box-shadow:0 0 0 1px var(--field-line) inset;font-family:var(--text);font-size:16px;line-height:1.5;color:var(--ink);outline-offset:0}
.op-input::placeholder{color:var(--meta)}
/* Пустая почта — единственное, что мешает начать: обводка это и говорит. */
.op-input--needed:placeholder-shown{box-shadow:0 0 0 2px var(--cta) inset}
.op-input[aria-invalid="true"]{box-shadow:0 0 0 1px var(--error) inset}
.op-error{font-family:var(--text);font-size:13px;line-height:1.5;color:var(--error)}
.op-consent{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-family:var(--text);font-size:14px;line-height:1.5;color:var(--ink)}
.op-consent input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--pick);cursor:pointer}

/* ── Кнопка «Начать опрос» ─────────────────────────────────────────────── */
.op-start-wrap{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.op-cta{height:56px;border-radius:30px;padding:0 40px;cursor:pointer;font-family:var(--display);font-size:15px;line-height:1.4;font-weight:500;background:var(--cta);color:#FFFFFF;transition:background 140ms ease-out,color 140ms ease-out,opacity 140ms ease-out}
.op-cta:hover:not(:disabled){background:var(--cta-hover);color:var(--cta-hover-ink)}
.op-cta:disabled{opacity:.45;cursor:default}

/* ── Как мы работаем с данными ─────────────────────────────────────────── */
.op-privacy{display:flex;flex-direction:column;gap:8px;padding-top:4px}
.op-privacy p{margin:0;font-family:var(--text);font-size:13px;line-height:1.5;color:var(--meta-dark);text-wrap:pretty}

/* ── Экран вопроса ─────────────────────────────────────────────────────── */
.op-bar{position:sticky;top:0;background:var(--lavender);padding:16px 0 14px;border-bottom:1px solid var(--card-line);display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:2}
.op-back{height:36px;padding:0 12px 0 8px;border-radius:10px;cursor:pointer;color:var(--ink-blue);font-family:var(--display);font-size:13px;line-height:1.4;font-weight:500}
.op-count{font-family:var(--display);font-size:14px;line-height:1.4;font-weight:500;color:var(--ink)}
.op-qbody{display:flex;flex-direction:column;gap:20px;padding-top:20px}
.op-situation{gap:12px}
.op-situation p{margin:0;font-family:var(--display);font-size:21px;line-height:1.35;font-weight:500;color:var(--ink);text-wrap:pretty}
/* На новом вопросе фокус уезжает на текст ситуации — чтобы озвучка прочитала
   её, а не начало страницы. Рамку при этом не рисуем: элемент не кликается,
   и обводка вокруг абзаца читается как поломка. */
.op-situation p:focus{outline:none}
.op-ask{display:flex;flex-direction:column;gap:10px}
.op-options{display:flex;flex-direction:column;gap:10px;min-height:190px}
.op-opt{display:flex;gap:12px;align-items:center;width:100%;min-height:56px;padding:14px 16px;border-radius:10px;cursor:pointer;text-align:left;font-family:var(--text);font-size:16px;line-height:1.4;font-weight:400;background:#FFFFFF;color:var(--ink);box-shadow:0 0 0 1px var(--card-line) inset;transition:background 90ms ease-out,color 90ms ease-out,box-shadow 90ms ease-out}
.op-opt:hover{background:var(--lavender);box-shadow:0 0 0 1px var(--pick) inset}
.op-opt[aria-pressed="true"]{background:var(--pick);color:#FFFFFF;box-shadow:none}
.op-opt[aria-pressed="true"]:hover{background:var(--pick)}
.op-opt__dot{flex:none;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-size:12px;font-weight:500;background:var(--lavender);color:var(--ink-blue)}
.op-opt[aria-pressed="true"] .op-opt__dot{background:rgba(255,255,255,.22);color:#FFFFFF}
.op-opt__text{flex:1}

/* ── Экран «Спасибо» ───────────────────────────────────────────────────── */
.op-thanks{padding:24px;gap:14px}
.op-h2{margin:0;font-family:var(--display);font-size:28px;line-height:1.3;font-weight:600;color:var(--ink);text-wrap:pretty}
.op-thanks p{margin:0;text-wrap:pretty}
.op-recap{gap:12px}
.op-recap__title{font-family:var(--display);font-size:18px;line-height:1.35;font-weight:600;color:var(--ink)}
.op-recap__list{display:flex;flex-direction:column;gap:12px}
.op-recap__row{display:flex;gap:12px;align-items:flex-start;padding-bottom:12px;border-bottom:1px solid var(--row-line)}
.op-recap__row:last-child{padding-bottom:0;border-bottom:0}
.op-recap__num{flex:none;width:22px;font-family:var(--display);font-size:13px;line-height:1.5;font-weight:500;color:var(--ink-blue)}
.op-recap__pair{display:flex;flex-direction:column;gap:4px}
.op-recap__situation{font-family:var(--text);font-size:13px;line-height:1.5;color:var(--meta)}
.op-recap__answer{font-family:var(--text);font-size:15px;line-height:1.5;font-weight:500;color:var(--ink)}
.op-restart{height:48px;width:224px;max-width:100%;border-radius:10px;cursor:pointer;background:#FFFFFF;color:var(--pick);box-shadow:0 0 0 1px var(--pick) inset;font-family:var(--display);font-size:12px;line-height:1.4;font-weight:500}

/* ── Служебное ─────────────────────────────────────────────────────────── */
.op-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.op-noscript{margin:0;font-family:var(--text);font-size:15px;line-height:1.5;color:var(--ink)}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:0ms !important;animation-duration:0ms !important}
}