/* Оформление анкеты. Токены те же, что в прототипе интерфейса:
   тёмно-синий #232E50, зелёный #9AC551. Текст на зелёных кнопках
   тёмно-синий, а не белый: белый даёт контраст 2.1:1 и не читается на солнце. */
:root{
  --navy:#232E50; --navy-700:#2B3860; --navy-500:#3B4A78;
  --green:#9AC551; --green-600:#87B443; --green-100:#EDF4E0;
  --bg:#F3F5F7; --grey:#D5D9DC; --ink:#1A2033; --muted:#606A80; --line:#E3E7EC;
  --danger:#D6453D; --r-s:10px; --r-m:16px; --r-l:24px; --r-xl:32px;
  --sh-1:0 1px 2px rgba(26,32,51,.06), 0 2px 8px rgba(26,32,51,.06);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.55 'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
h1,h3{margin:0; line-height:1.2; font-weight:800; letter-spacing:-.01em}
p{margin:0}
.in{max-width:760px; margin:0 auto; padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.req{color:var(--danger)}
:focus-visible{outline:3px solid var(--green); outline-offset:2px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}

/* ---------- шапка ---------- */
.survey-hero{background:var(--navy); color:#fff; padding:38px 0 32px; border-radius:0 0 var(--r-xl) var(--r-xl)}
.survey-hero .eyebrow{
  display:inline-block; font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--green); border:1px solid rgba(154,197,81,.4); border-radius:999px; padding:5px 13px; margin-bottom:16px;
}
.survey-hero h1{font-size:clamp(23px,3.4vw,34px); text-transform:uppercase}
.survey-hero p{margin-top:13px; color:#C6CCDC; font-size:15px; max-width:56ch}
.survey-hero .facts{display:flex; gap:20px; flex-wrap:wrap; margin-top:20px; font-size:13px; color:#C6CCDC}

/* ---------- прогресс ---------- */
.progress-wrap{position:sticky; top:0; z-index:20; background:var(--bg); padding:14px 0 12px}
.progress-row{display:flex; justify-content:space-between; font-size:12.5px; font-weight:700; color:var(--muted); margin-bottom:7px}
.bar{height:7px; background:var(--grey); border-radius:999px; overflow:hidden}
.bar i{display:block; height:100%; width:0; background:var(--green); border-radius:999px; transition:width .3s}

/* ---------- вопросы ---------- */
.survey{max-width:760px; margin:0 auto; padding:8px 20px 80px}
.toperr{background:#FBE9E8; border:1px solid var(--danger); color:var(--danger);
  border-radius:var(--r-m); padding:14px 18px; margin-bottom:14px; font-size:14px}
.q{background:#fff; border:1.5px solid var(--line); border-radius:var(--r-l);
   padding:24px 26px; margin-bottom:14px; scroll-margin-top:110px}
.q.invalid{border-color:var(--danger)}
.q.done .q-num{background:var(--green); color:var(--navy)}
.q-head{display:flex; gap:12px; margin-bottom:16px}
.q-num{width:28px; height:28px; border-radius:9px; background:var(--bg); color:var(--muted);
  display:grid; place-items:center; font-size:13px; font-weight:800; flex:none}
.q h3{font-size:16.5px; font-weight:700; line-height:1.35}
.hint{font-size:12.5px; color:var(--muted); margin-top:6px}
.hint.center{text-align:center; margin-top:12px}
.err{color:var(--danger); font-size:12.5px; font-weight:600; margin-top:8px}

/* выбор вариантов */
.opts{display:flex; flex-direction:column; gap:8px}
.opt{display:flex; align-items:center; gap:12px; padding:12px 15px; border:1.5px solid var(--line);
  border-radius:var(--r-s); cursor:pointer; font-size:14.5px; transition:.15s}
.opt:hover{border-color:var(--navy-500); background:var(--bg)}
.opt input{width:20px; height:20px; accent-color:var(--navy); flex:none; margin:0}
.opt:has(input:checked){border-color:var(--navy); background:var(--green-100)}
.other-input, textarea, .dropdown, input[type=number]{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--r-s);
  background:var(--bg); font:inherit; font-size:14px;
}
textarea{resize:vertical}
.other-input:focus, textarea:focus, .dropdown:focus, input[type=number]:focus{
  background:#fff; border-color:var(--navy); outline:none}
.other-input[disabled]{opacity:.55}
.numrow{display:flex; align-items:center; gap:10px}
.numrow input{max-width:220px}
.numrow .unit{font-size:14px; color:var(--muted)}

/* шкала */
.scale{display:flex; gap:8px}
.scale label{flex:1; display:grid; place-items:center; padding:14px 0; border:1.5px solid var(--line);
  border-radius:var(--r-s); font-weight:700; cursor:pointer; transition:.15s}
.scale label:hover{border-color:var(--navy-500)}
.scale input{position:absolute; opacity:0; width:0}
.scale label:has(input:checked){background:var(--navy); border-color:var(--navy); color:#fff}
.scale-ends{display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); margin-top:8px}

/* карточки с изображениями */
.imgs{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px}
.imgcard{display:flex; flex-direction:column; border:1.5px solid var(--line); border-radius:var(--r-m);
  overflow:hidden; cursor:pointer; transition:.15s; background:#fff}
.imgcard:hover{border-color:var(--navy-500)}
.imgcard:has(input:checked){border-color:var(--navy); box-shadow:0 0 0 3px rgba(35,46,80,.12)}
.imgcard input{position:absolute; opacity:0; width:0}
.imgcard img{width:100%; aspect-ratio:4/3; object-fit:cover; display:block; background:var(--bg)}
.imgcard-empty{display:grid; place-items:center; aspect-ratio:4/3; background:var(--bg);
  color:var(--muted); font-size:12.5px; text-align:center; padding:10px}
.imgcard-label{padding:11px 13px; font-size:13.5px; font-weight:600}
.imgcard:has(input:checked) .imgcard-label{background:var(--green-100)}

/* матрица */
.matrix{overflow-x:auto}
.matrix table{border-collapse:collapse; width:100%; font-size:13.5px; min-width:420px}
.matrix th, .matrix td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:center}
.matrix thead th{font-size:12px; font-weight:700; color:var(--muted); vertical-align:bottom}
.matrix tbody th{text-align:left; font-weight:600; min-width:150px}
.matrix tbody tr:hover{background:var(--bg)}
.matrix input{width:20px; height:20px; accent-color:var(--navy); margin:0}
.matrix-stack{display:none}
.matrix-sub + .matrix-sub{margin-top:14px}
.matrix-sub-title{font-size:14px; font-weight:700; margin-bottom:8px}

/* карта в вопросе */
.qmap{height:320px; border-radius:var(--r-m); overflow:hidden; border:1.5px solid var(--line); background:var(--grey)}
.qmap-hint{margin-top:8px}
.qmap .maplibregl-canvas{cursor:crosshair}

/* отправка */
.survey-submit{background:#fff; border:1.5px solid var(--line); border-radius:var(--r-l); padding:24px 26px; margin-top:20px}
.check{display:flex; gap:11px; align-items:flex-start; font-size:13.5px; color:var(--muted); line-height:1.45; margin-bottom:16px}
.check input{width:20px; height:20px; margin:1px 0 0; accent-color:var(--navy); flex:none}
/* кнопка отправки: селектор привязан к блоку отправки — иначе правило
   перекрашивало и растягивало обычные кнопки страницы (например, «Все
   проекты» в шапке публичной части). */
.survey-submit .btn{width:100%; padding:16px 30px; border:0; border-radius:999px; background:var(--green);
  color:var(--navy); font:inherit; font-size:15px; font-weight:700; letter-spacing:.02em;
  cursor:pointer; box-shadow:0 2px 0 var(--green-600)}
.survey-submit .btn:hover{background:#A6CE62}
.survey-submit .btn:active{transform:translateY(1px)}

/* полоса предпросмотра в админке */
.preview-bar{background:var(--navy); color:#fff; font-size:13.5px; padding:12px 0}
.preview-bar a{color:var(--green); margin-left:10px}
.preview-result{padding:14px 0; font-size:14px}
.preview-result.good{background:var(--green-100); color:#2F5A0C}
.preview-result.bad{background:#FBE9E8; color:#8C2F29}
.preview-result ul{margin:10px 0 0; padding-left:20px}
.preview-result li{margin-bottom:4px}

@media (max-width:760px){
  .survey-hero{padding:26px 0 24px; border-radius:0 0 var(--r-l) var(--r-l)}
  .q{padding:20px 18px}
  .survey-submit{padding:20px 18px}
  /* Таблица 6×5 в 390 пикселей не помещается — те же данные показываем
     стопкой подвопросов, это единственный способ сохранить матрицу на телефоне. */
  .matrix{display:none}
  .matrix-stack{display:block}
  .qmap{height:260px}
  /* 16px — чтобы iOS Safari не зумил при фокусе на поле */
  .other-input, textarea, .dropdown, input[type=number]{font-size:16px}
}