/* ============================================================
   Страницы профессий (/professii/…).
   База — стили лендингов направлений (otsenka-personala.css):
   шапка, герой, кнопки, FAQ и подвал уже там. Здесь только то,
   чего в лендингах нет: карточки критериев с важностью.
   ============================================================ */

.prof-hero{padding:64px 0 10px}
.prof-lead{font-size:17px;line-height:1.6;color:var(--ink2);max-width:72ch;margin-bottom:22px}

/* критерий = название + описание + полоска важности.
   Важность — из O*NET (шкала 1–5), подписана прямо на полоске */
.crit-list{display:grid;gap:12px;margin-top:18px}
.crit{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:14px 20px;align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.crit-name{font-family:'Unbounded',sans-serif;font-size:16px;line-height:1.3;margin:0 0 6px;color:var(--ink)}
.crit-desc{font-size:14px;line-height:1.55;color:var(--ink2);margin:0;max-width:70ch}
.crit-scale{display:flex;flex-direction:column;gap:6px;justify-self:end;min-width:132px}
.crit-scale b{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--pine)}
.crit-bar{height:6px;border-radius:99px;background:var(--pine-soft);overflow:hidden}
.crit-bar i{display:block;height:100%;border-radius:99px;background:var(--pine)}
.crit-scale span{font-size:11px;color:var(--ink3);letter-spacing:.04em;text-transform:uppercase}
.crit-scale .crit-share{font-size:11.5px;letter-spacing:0;text-transform:none}

/* три карточки «что входит» и блок отчёта */
.prof-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:16px}
.prof-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px}
.prof-card b{display:block;font-family:'Unbounded',sans-serif;font-size:15px;color:var(--pine);margin-bottom:6px}
.prof-card span{font-size:13.5px;color:var(--ink2);line-height:1.5;display:block}

.prof-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.prof-links a{font-size:13.5px;font-weight:600;color:var(--ink2);border:1.5px solid var(--line);border-radius:99px;padding:8px 14px;background:var(--surface)}
.prof-links a:hover{border-color:var(--pine);color:var(--pine)}

.prof-cta{margin-top:34px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:26px}
.prof-cta h2{font-family:'Unbounded',sans-serif;font-size:22px;line-height:1.25;margin:0 0 8px}
.prof-cta p{font-size:15px;color:var(--ink2);margin:0 0 16px;max-width:64ch}

/* источник данных — обязательная сноска: цифры из O*NET, не наши измерения */
.prof-source{font-size:12px;color:var(--ink3);margin-top:26px;line-height:1.55;max-width:78ch}

@media (max-width:640px){
  .crit{grid-template-columns:1fr}
  .crit-scale{justify-self:start;min-width:0;width:100%}
  .crit-bar{width:100%}
}

/* строка синонимов профессии: нужна и человеку, и поиску —
   одна профессия в базе живёт под десятком названий */
.prof-syn{font-size:13px;color:var(--ink3);line-height:1.55;max-width:78ch;margin:-4px 0 4px}

/* ---------- выбор профессий (карусель из кабинета, но без входа) ---------- */
.pick{margin-top:34px}
.pick-lead{font-size:15px;color:var(--ink2);max-width:74ch;margin:6px 0 16px}
.pick-box{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px}
.pick-search{display:block;margin-bottom:12px}
.pick-search span{display:block;font-size:12px;font-weight:600;color:var(--ink3);margin-bottom:6px;letter-spacing:.04em;text-transform:uppercase}
.pick-search input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;font-size:15px;background:#fcfbf7;outline:none}
.pick-search input:focus{border-color:var(--pine)}
.pick-list{display:flex;flex-wrap:wrap;gap:8px;max-height:280px;overflow:auto;padding:2px}
.pick-item{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);border-radius:99px;padding:7px 13px;font-size:13.5px;color:var(--ink2);cursor:pointer;background:var(--surface)}
.pick-item input{width:15px;height:15px;accent-color:var(--pine);margin:0}
.pick-item.on{border-color:var(--pine);background:var(--pine-soft);color:var(--pine);font-weight:600}
.pick-item:hover{border-color:var(--pine)}
.pick-empty,.pick-more{font-size:13px;color:var(--ink3);margin:8px 0 0}
.pick-foot{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:space-between;margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
.pick-count{font-size:13.5px;color:var(--ink3)}
.pick-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pick-form input{min-width:170px;flex:1 1 170px;padding:11px 13px;border:1.5px solid var(--line);border-radius:11px;font-size:14px;background:#fcfbf7;outline:none}
.pick-form input:focus{border-color:var(--pine)}
.pick-trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.pick-done{font-size:14px;color:var(--pine);font-weight:600;background:var(--pine-soft);border-radius:12px;padding:12px 14px}
.pick-err{font-size:13px;color:var(--warn);margin:8px 0 0}
@media (max-width:640px){
  .pick-list{max-height:none}
  .pick-form{width:100%}
  .pick-form input,.pick-form .btn{width:100%}
}

/* группа критерия и вклад в индекс: ответ на «что значит прямое/косвенное» */
.crit-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 6px}
.crit-head .crit-name{margin:0}
.crit-dom{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pine);background:var(--pine-soft);border-radius:99px;padding:4px 10px;white-space:nowrap}
.crit-share{display:block;font-size:11.5px;font-weight:700;color:var(--pine);margin-top:2px;white-space:nowrap}
.crit-hind{display:block;font-size:11px;color:var(--warn);margin-top:4px;white-space:normal}

/* легенда «прямое / косвенное» */
.crit-legend{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:16px 0 4px}
.crit-legend>b{display:block;font-family:'Unbounded',sans-serif;font-size:14px;margin-bottom:8px;color:var(--ink)}
.crit-legend ul{list-style:none;display:grid;gap:8px;padding:0;margin:0}
.crit-legend li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--ink2)}
.crit-legend .dot{flex:none;width:9px;height:9px;border-radius:50%;margin-top:6px}
.dot-1{background:#0aa87e}
.dot-2{background:#7cb342}
.dot-3{background:#d8a73a}
.dot-4{background:#b9b6a6}

/* Вводный абзац на страницах профессий идёт во всю ширину карточек: при max-width
   в 74 знака справа оставалась заметная пустота, и текст читался как обрезанный. */
/* .hero p в crumbs.css задаёт 74ch и перебивает одиночный класс — отсюда два класса */
.prof-lead.prof-lead-wide{max-width:none}

/* строка «проверяется вживую» прилипала к последней карточке — даём воздух */
.crit-live{font-size:13px;line-height:1.55;color:var(--ink3);max-width:none;margin:16px 0 0}

/* лента выбранного под списком: поиск фильтрует список, но выбор не пропадает */
.pick-chosen{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.pick-chosen-lab{font-size:12px;font-weight:600;color:var(--ink3);letter-spacing:.04em;text-transform:uppercase;padding-top:6px}
.pick-tags{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.pick-tag{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--pine);background:var(--pine-soft);color:var(--pine);
  border-radius:99px;padding:6px 10px 6px 13px;font-size:13px;font-weight:600;font-family:inherit;cursor:pointer;line-height:1.2}
.pick-tag span{font-size:15px;line-height:1;opacity:.7}
.pick-tag:hover span{opacity:1}
.pick-form input{min-width:210px;flex:1 1 210px}