/* styles.css — общий стиль всего продукта HR-Профиль-250.

   Палитра взята из дизайн-системы МОТОСТРАНА (решение владельца, 05.10.2026):
   бумага полевого дневника #f2eadb, чернила #221d17, охра дорожного знака #c2611f,
   тайга #2e4739, ржавчина, латунь. Скругления почти квадратные — бумага, а не пластик.

   Тёмная тема собрана из «тёмной шапки» той же системы (#171614 / #d5c8b5 / #ef9852):
   в оригинале светлая тема единственная, но у нас есть ночной режим, и выдумывать
   для него чужие цвета было бы хуже, чем взять те, что в системе уже есть. */

:root{
  color-scheme: light;
  --surface-1:      #fbf5e9;
  --page:           #f2eadb;
  --text-primary:   #221d17;
  --text-secondary: #4a4137;
  --text-muted:     #7a6e5f;
  --gridline:       #e6dac3;
  --baseline:       #d6c7ac;
  --border:         rgba(34,29,23,0.12);
  --series-1:       #c2611f;
  --series-1-soft:  rgba(194,97,31,0.16);
  --series-2:       #2e4739;
  --chip-low:       #9e3b2e;
  --chip-mid:       #a8842c;
  --chip-high:      #3e5a41;
  --star:           #a8842c;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --surface-1:      #201d18;
    --page:           #171614;
    --text-primary:   #f2eadb;
    --text-secondary: #d5c8b5;
    --text-muted:     #bdae9b;
    --gridline:       #332e26;
    --baseline:       #4a4137;
    --border:         rgba(242,234,219,0.14);
    --series-1:       #ef9852;
    --series-1-soft:  rgba(239,152,82,0.22);
    --series-2:       #7fa88c;
    --chip-low:       #c7584a;
    --chip-mid:       #d2a846;
    --chip-high:      #7fa88c;
    --star:           #d2a846;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --surface-1:      #201d18;
  --page:           #171614;
  --text-primary:   #f2eadb;
  --text-secondary: #d5c8b5;
  --text-muted:     #bdae9b;
  --gridline:       #332e26;
  --baseline:       #4a4137;
  --border:         rgba(242,234,219,0.14);
  --series-1:       #ef9852;
  --series-1-soft:  rgba(239,152,82,0.22);
  --series-2:       #7fa88c;
  --chip-low:       #c7584a;
  --chip-mid:       #d2a846;
  --chip-high:      #7fa88c;
  --star:           #d2a846;
}
*{box-sizing:border-box;}
body{
  margin:0; padding:0;
  background:var(--page);
  color:var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height:1.5;
}
.wrap{ max-width:640px; margin:0 auto; padding:24px 18px 60px; }
.card{
  background:var(--surface-1);
  border:1px solid var(--border);
  border-radius:16px;
  padding:24px;
  margin-bottom:16px;
}
h1{font-size:21px; margin:0 0 8px;}
h2{font-size:18px; margin:0 0 12px;}
h3{font-size:15px; margin:0 0 4px;}
p{color:var(--text-secondary); margin:0 0 12px;}
a{color:var(--series-1);}
.muted{color:var(--text-muted); font-size:13px;}
.error-text{color:var(--chip-low); font-size:13.5px; margin:8px 0 0;}
.disclaimer{
  font-size:13px; color:var(--text-secondary);
  background:var(--page); border:1px solid var(--border);
  border-radius:10px; padding:12px 14px; margin-top:14px;
}
select, input{
  width:100%; font-family:inherit; font-size:15px; padding:12px 14px;
  border-radius:12px; border:1px solid var(--border);
  background:var(--page); color:var(--text-primary); margin-bottom:14px;
}
label.field-label{display:block; font-size:13px; color:var(--text-secondary); margin-bottom:6px; font-weight:600;}
button{ font-family:inherit; font-size:16px; cursor:pointer; border-radius:12px; border:1px solid var(--border); }
.btn-primary{
  display:block; width:100%; padding:14px 18px;
  background:var(--series-1); color:#fff; border:none; font-weight:600;
}
.btn-primary:active{opacity:0.85;}
.btn-primary:disabled{opacity:0.6; cursor:not-allowed;}
.btn-secondary{
  display:block; width:100%; padding:10px 16px;
  background:transparent; color:var(--text-primary); margin-top:10px;
}
.progress-track{ height:6px; border-radius:3px; background:var(--gridline); overflow:hidden; margin-bottom:6px; }
.progress-fill{ height:100%; background:var(--series-1); border-radius:3px; transition:width .15s ease; }
.progress-caption{font-size:12px; color:var(--text-muted); margin-bottom:16px;}
.q-counter{font-size:13px; color:var(--text-muted); margin-bottom:6px;}
.q-text{font-size:19px; font-weight:600; margin:0 0 20px; color:var(--text-primary);}
.ans-grid{display:flex; flex-direction:column; gap:10px;}
.ans-btn{ padding:14px 16px; background:var(--page); color:var(--text-primary); font-weight:500; text-align:left; }
.ans-btn:active{background:var(--series-1-soft);}
.nav-row{display:flex; gap:10px; margin-top:18px;}
.nav-row button{flex:1; padding:10px;}
svg{display:block; margin:0 auto;}
.axis-label{font-size:10.5px; fill:var(--text-secondary);}
.grid-line{stroke:var(--gridline); fill:none;}
.data-poly{fill:var(--series-1-soft); stroke:var(--series-1); stroke-width:2;}
.data-dot{fill:var(--series-1);}
.scale-row{margin-bottom:16px;}
.scale-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; flex-wrap:wrap; gap:4px 8px;}
.scale-name{font-weight:600; font-size:14.5px;}
.scale-score{font-size:13px; color:var(--text-muted); white-space:nowrap;}
.bar-track{height:8px; border-radius:4px; background:var(--gridline); overflow:hidden; margin-bottom:6px;}
/* Десятибалльная шкала: десять ячеек вместо сплошной полосы. */
.bar-cells{display:flex; gap:3px; margin-bottom:6px;}
.bar-cells i{flex:1 1 0; height:11px; border-radius:2px; background:var(--gridline); transition:background .25s ease;}
/* Градация от красного к зелёному — лесенкой сложности маршрута из МОТОСТРАНЫ:
   ржавчина → охра → латунь → хаки → тайга. Ячейка 1 красная, ячейка 10 зелёная.
   Цвет закреплён за ПОЗИЦИЕЙ ячейки, а не за результатом, поэтому высокий балл
   заканчивается зелёным, а низкий так и остаётся красным.
   Цвет здесь — подсказка, а не единственный носитель смысла: рядом всегда стоит
   число. Красный и зелёный — худшая пара для дальтоника, поэтому яркость по шкале
   тоже меняется, и ячейки различимы в оттенках серого. */
.bar-cells i:nth-child(1).on {background:#9e3b2e;}
.bar-cells i:nth-child(2).on {background:#a84f2c;}
.bar-cells i:nth-child(3).on {background:#b96a2a;}
.bar-cells i:nth-child(4).on {background:#ad7a2b;}
.bar-cells i:nth-child(5).on {background:#a8842c;}
.bar-cells i:nth-child(6).on {background:#96883a;}
.bar-cells i:nth-child(7).on {background:#7e8a4e;}
.bar-cells i:nth-child(8).on {background:#6d8352;}
.bar-cells i:nth-child(9).on {background:#5b7a5e;}
.bar-cells i:nth-child(10).on{background:#3e5a41;}

/* Мотиваторы и ценности красно-зелёной шкалой НЕ красим. Там высокий балл не
   «лучше» низкого: человек, которого двигают деньги, не хуже того, кого двигает
   мастерство — это разные люди под разные работы. Красный на такой шкале читался
   бы как приговор, которого мы не выносим. */
.bar-cells.motiv i.on{background:var(--series-2);}
.bar-fill{height:100%; border-radius:4px; background:var(--series-1);}
.bar-fill.motiv{background:var(--series-2);}
.chip{ display:inline-block; font-size:11px; font-weight:600; padding:2px 8px; border-radius:20px; color:#fff; }
.chip-low{background:var(--chip-low);}
.chip-mid{background:var(--chip-mid); color:#3a2a00;}
.chip-high{background:var(--chip-high);}
.star-badge{ font-size:11px; font-weight:700; color:var(--star); white-space:nowrap; }
.interp{font-size:13.5px; color:var(--text-secondary); margin:0;}
.section-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; background:var(--series-1);
  color:#fff; font-weight:700; font-size:13px; margin-bottom:10px;
}
.spectrum-labels{display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-muted); margin-bottom:4px;}
.spectrum-track{ position:relative; height:8px; border-radius:4px; background:var(--gridline); margin-bottom:6px; }
.spectrum-dot{ position:absolute; top:-4px; width:16px; height:16px; border-radius:50%; background:var(--series-1); border:2px solid var(--surface-1); transform:translateX(-50%); }
[hidden]{display:none !important;}

/* --- Дополнительные компоненты, специфичные для платформы (не было в прототипе) --- */
.top-nav{display:flex; justify-content:space-between; align-items:center; padding:14px 18px; max-width:640px; margin:0 auto;}
.top-nav .brand{font-weight:700; text-decoration:none; color:var(--text-primary);}
.top-nav .nav-actions a, .top-nav .nav-actions button{margin-left:10px; font-size:13px;}
.pricing-grid{display:flex; gap:14px; flex-wrap:wrap;}
.price-card{flex:1; min-width:220px; display:flex; flex-direction:column; gap:0;}
.price-card h3{margin-bottom:2px;}
.price-card .muted{flex:1 1 auto;}
.price-card .btn-primary{margin-top:14px;}
.price-value{font-size:28px; font-weight:700; margin:6px 0 10px; line-height:1.15;}
.price-value small{display:block; font-size:12px; color:var(--text-muted); font-weight:500; letter-spacing:0.02em; margin-top:2px;}
.session-row{display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--border);}
.session-row:last-child{border-bottom:none;}
.status-badge{font-size:11px; padding:2px 8px; border-radius:20px; background:var(--gridline); color:var(--text-secondary);}
.status-badge.completed{background:var(--chip-high); color:#fff;}
.status-badge.in_progress{background:var(--chip-mid); color:#3a2a00;}

@media print{
  .no-print{display:none !important;}
  body{background:#fff;}
  /* Карточки печатаем без рамок и разрешаем им переноситься между страницами:
     раньше стоял page-break-inside:avoid на всей карточке, и длинный блок
     (например, все 35 шкал) целиком прыгал на следующий лист — отчёт раздувался
     на 8 страниц с пустотами в полстраницы. Теперь неразрывными остаются только
     мелкие смысловые единицы: строка шкалы, заголовок с началом текста, список. */
  .card{border:none; padding:0; background:none; box-shadow:none;
        break-inside:auto; page-break-inside:auto; margin-bottom:14px;}
  .scale-row, .list-row, .session-row, .disclaimer, .price-card{
        break-inside:avoid; page-break-inside:avoid;}
  h1,h2,h3{break-after:avoid; page-break-after:avoid;}
  svg{break-inside:avoid; page-break-inside:avoid;}
  a[href]{text-decoration:none; color:inherit;}
}

/* Чекбокс согласия на обработку персональных данных */
.consent{display:flex; align-items:flex-start; gap:10px; margin:14px 0 4px; font-size:13px; color:var(--text-secondary); line-height:1.45; cursor:pointer;}
.consent input{margin:2px 0 0; width:16px; height:16px; flex:none; accent-color:var(--series-1);}
.consent a{color:var(--series-1);}

/* Правовые страницы (политика, оферта) */
.legal h1{margin-bottom:4px;}
.legal h2{font-size:16px; margin:22px 0 8px;}
.legal p, .legal li{font-size:14px; color:var(--text-secondary); line-height:1.6;}
.legal ul{padding-left:20px; margin:0 0 12px;}
.legal .stub{border-left:3px solid var(--chip-mid); background:var(--page); padding:10px 14px; border-radius:0 8px 8px 0; margin:14px 0; font-size:13.5px;}
.site-footer{max-width:640px; margin:0 auto; padding:0 18px 40px; font-size:12.5px; color:var(--text-muted); display:flex; gap:14px; flex-wrap:wrap;}
.site-footer a{color:var(--text-muted);}

/* Строка списка (купленные отчёты) — та же геометрия, что у .session-row */
.list-row{display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--gridline);}
.list-row:last-child{border-bottom:none;}
.list-row a{white-space:nowrap; color:var(--series-1);}

/* Пакет с лучшей ценой за токен на лендинге. Подсвечиваем именно его, а не
   «популярный»: выдуманная популярность в витрине из четырёх позиций
   никого не обманет, а честная математика работает. */
.price-card.price-best { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }