/* Оформление инструмента «career-test».
 *
 * Раньше эта таблица лежала строкой в js/tools/career-test.js и вставлялась
 * через createElement('style') — ради этого в Content-Security-Policy
 * держали style-src 'unsafe-inline', то есть разрешали любой инлайновый
 * стиль на всех страницах пяти сайтов. Вынесено 27.07.2026.
 *
 * Файл подключается partial'ом tools.html только на странице своего
 * инструмента и с отпечатком содержимого в адресе (asset-url.html):
 * имя постоянное, кэш недельный.
 */

#tool-career-test{font-family:var(--font-body)}
#tool-career-test .ct-meta{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted);margin:0}
#tool-career-test h2{font-family:var(--font-display);font-size:24px;line-height:1.2;font-weight:700;color:var(--color-ink);margin:8px 0 0}
@media(min-width:640px){
  #tool-career-test h2{font-size:28px}
}
#tool-career-test h3{font-family:var(--font-display);font-size:18px;line-height:1.3;font-weight:600;color:var(--color-ink);margin:0}
#tool-career-test p{font-size:15.5px;line-height:1.65;color:var(--color-ink);margin:10px 0 0}
#tool-career-test .ct-dim{color:var(--color-muted);font-size:14.5px}
#tool-career-test p+h3,#tool-career-test ul+h3{margin-top:24px}
#tool-career-test ul{margin:10px 0 0;padding:0;list-style:none}
#tool-career-test ul li{position:relative;padding-left:18px;font-size:15px;line-height:1.6;margin-top:7px}
#tool-career-test ul li::before{content:"";position:absolute;left:2px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--color-accent)}
#tool-career-test .ct-progress{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
#tool-career-test .ct-count{font-family:var(--font-mono);font-size:12px;color:var(--color-muted);white-space:nowrap}
#tool-career-test .ct-bar{flex:1 1 120px;height:6px;border-radius:99px;background:var(--color-rule);overflow:hidden}
#tool-career-test .ct-bar>span{display:block;height:100%;border-radius:99px;background:var(--color-accent);transition:width .2s ease}
#tool-career-test fieldset{border:0;padding:0;margin:20px 0 0;min-width:0}
#tool-career-test legend{padding:0;font-family:var(--font-display);font-weight:600;color:var(--color-ink);font-size:22px;line-height:1.25;display:block;width:100%}
@media(min-width:640px){
  #tool-career-test legend{font-size:28px}
}
#tool-career-test legend:focus-visible{outline:2px solid var(--color-accent);outline-offset:4px}
#tool-career-test .ct-opts{margin-top:18px;display:grid;gap:8px}
#tool-career-test .ct-opt{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;border:1px solid var(--color-rule);border-radius:10px;background:var(--color-paper);cursor:pointer;font-size:15.5px;line-height:1.35;color:var(--color-ink);transition:border-color .15s,background .15s}
#tool-career-test .ct-opt:hover{border-color:color-mix(in oklab,var(--color-accent) 45%,var(--color-rule))}
#tool-career-test .ct-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
#tool-career-test .ct-key{font-family:var(--font-mono);font-size:12px;flex:0 0 26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;border:1px solid var(--color-rule);color:var(--color-muted);background:var(--color-surface)}
#tool-career-test .ct-opt input:checked~.ct-key{background:var(--color-accent);border-color:var(--color-accent);color:#fff}
#tool-career-test .ct-opt:has(input:checked){border-color:var(--color-accent);background:color-mix(in oklab,var(--color-accent) 6%,white)}
#tool-career-test .ct-opt:has(input:focus-visible){outline:2px solid var(--color-accent);outline-offset:2px}
#tool-career-test .ct-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px}
#tool-career-test button.ct-primary{margin:0;background:var(--color-accent);color:#fff;border:1px solid transparent;border-radius:8px;padding:12px 22px;font-size:15px;font-weight:600;cursor:pointer;font-family:var(--font-body)}
#tool-career-test button.ct-ghost{margin:0;background:var(--color-paper);color:var(--color-ink);border:1px solid var(--color-rule);border-radius:8px;padding:11px 18px;font-size:14.5px;font-weight:500;cursor:pointer;font-family:var(--font-body)}
#tool-career-test button.ct-ghost:hover{border-color:var(--color-accent);color:var(--color-accent);opacity:1}
#tool-career-test button[disabled]{opacity:.45;cursor:not-allowed}
#tool-career-test .ct-hintkeys{font-family:var(--font-mono);font-size:11px;color:var(--color-muted);margin-top:14px;line-height:1.5}
#tool-career-test .ct-block{margin-top:26px;padding-top:24px;border-top:1px solid var(--color-rule)}
#tool-career-test .ct-code{font-family:var(--font-mono);font-size:13px;color:var(--color-muted)}
#tool-career-test .ct-scales{margin-top:18px;display:grid;gap:12px}
#tool-career-test .ct-scale-head{display:flex;justify-content:space-between;gap:12px;font-size:15px;align-items:baseline}
#tool-career-test .ct-scale-name{font-weight:600;color:var(--color-ink)}
#tool-career-test .ct-scale-val{font-family:var(--font-mono);font-size:13px;color:var(--color-muted)}
#tool-career-test .ct-scale-bar{margin-top:5px;height:8px;border-radius:99px;background:var(--color-rule);overflow:hidden}
#tool-career-test .ct-scale-bar>span{display:block;height:100%;border-radius:99px;background:var(--color-accent);transition:width .3s ease}
#tool-career-test .ct-scale.is-top .ct-scale-name{color:var(--color-accent)}
#tool-career-test .ct-scale:not(.is-top) .ct-scale-bar>span{background:color-mix(in oklab,var(--color-accent) 35%,var(--color-rule))}
#tool-career-test .ct-cards{margin-top:16px;display:grid;gap:12px}
@media(min-width:700px){
  #tool-career-test .ct-cards{grid-template-columns:1fr 1fr}
}
#tool-career-test .ct-card{border:1px solid var(--color-rule);border-radius:10px;background:var(--color-paper);padding:16px}
#tool-career-test .ct-sphere{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--color-muted);margin-top:7px;display:block}
#tool-career-test .ct-why{margin-top:9px;font-size:14.5px;line-height:1.55;padding-left:11px;border-left:2px solid var(--color-accent);color:var(--color-ink)}
#tool-career-test .ct-edu{margin-top:9px;font-size:14px;line-height:1.55;color:var(--color-muted)}
#tool-career-test .ct-frame{margin-top:14px;border:1px solid var(--color-rule);border-radius:10px;background:var(--color-paper);padding:16px 18px}
#tool-career-test .ct-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#tool-career-test .ct-share{margin-top:12px;width:100%;font-family:var(--font-mono);font-size:12px;border:1px solid var(--color-rule);border-radius:8px;padding:10px 11px;background:var(--color-paper);color:var(--color-muted)}
@media(max-width:420px){
  #tool-career-test legend{font-size:20px}
  #tool-career-test .ct-btns>button{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
  #tool-career-test *{transition:none!important;animation:none!important}
}
@media print{
  #tool-career-test .ct-noprint{display:none!important}
}