/* Тест «Пора ли менять проводку?» (/test-provodki/). Токены цветов — из main.css (:root). */
.tp-quiz{padding:clamp(20px,3vw,32px);margin-bottom:12px;scroll-margin-top:90px}
.land-side #zayavka{scroll-margin-top:90px}
.tp-nojs{padding:18px 22px;margin-bottom:12px;font-size:15px}
.tp-nojs a{color:var(--volt-d)}
.js .tp-nojs{display:none}
html:not(.js) .tp-quiz{display:none}
/* Пока скрипт не запустился — только первый вопрос, без мелькания всего списка. */
.js .tp-quiz:not(.tp-on) .tp-step + .tp-step{display:none}

.tp-top{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.tp-count{flex-shrink:0;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.tp-bar{flex:1;border-radius:0;overflow:hidden}
.tp-bar span{display:block;height:100%;width:0;border-radius:0}

.tp-step{border:0;margin:0;padding:0;min-width:0}
.tp-q{display:block;padding:0;font-size:clamp(19px,2.4vw,23px);font-weight:800;line-height:1.25;color:var(--ink);letter-spacing:-.01em;margin-bottom:8px}
.tp-q:focus{outline:0}
.tp-q:focus-visible{outline-offset:4px;border-radius:0}
.tp-n{color:var(--volt-d)}
.tp-hint{font-size:14.5px;color:var(--muted);margin-bottom:18px;line-height:1.55}
.tp-opts{display:grid;gap:10px}
.tp-opt{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:0;background:#fff;cursor:pointer;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.4}
.tp-opt input{flex-shrink:0;width:20px;height:20px;margin:0;accent-color:var(--volt-d)}
.tp-opt:hover{border-color:var(--acc-ink)}
.tp-opt.on{border-color:var(--acc-ink)}

.tp-nav{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px}
.tp-nav .btn[disabled]{opacity:.45;cursor:default}
.tp-err{flex-basis:100%;font-size:14px;font-weight:600;color:var(--warn-ink);margin:0;min-height:1px}

.tp-res:focus{outline:0}
.tp-res-k{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--volt-d);margin-bottom:12px}
.tp-scale{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:10px}
.tp-seg{display:block;padding:10px 6px 9px;text-align:center;font-size:14px;color:var(--muted);background:var(--alt);border-bottom:4px solid}
.tp-seg-1{border-radius:0;border-color:var(--ok)}
.tp-seg-2{border-color:var(--signal)}
.tp-seg-3{border-radius:0;border-color:var(--bad)}
.tp-res[data-level="1"] .tp-seg-1{background:var(--ok-wash);color:var(--ok);border-color:var(--ok)}
.tp-res[data-level="2"] .tp-seg-2{background:var(--warn-wash);color:var(--warn-ink);border-color:var(--signal)}
.tp-res[data-level="3"] .tp-seg-3{background:var(--bad-wash);color:var(--bad);border-color:var(--bad)}
.tp-mark{position:absolute;bottom:-9px;left:0;width:0;height:0;margin-left:-7px;border:7px solid transparent;border-bottom-color:var(--ink);border-top:0}
.tp-score{font-size:14px;color:var(--muted);margin:16px 0 4px}
.tp-score b{color:var(--ink);font-size:18px;font-variant-numeric:tabular-nums}

.tp-out h2{font-size:clamp(22px,2.8vw,28px);margin:14px 0 10px!important}
.tp-out p{margin-bottom:12px;font-size:15.5px}
.tp-res .callout a,.tp-remont a{color:var(--volt-d)}
.tp-price{font-size:15px;color:var(--ink)}
.tp-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.tp-remont{background:var(--alt);border-radius:0;padding:14px 18px;font-size:15px;margin:14px 0}
.tp-why{margin:18px 0 6px}
.tp-why h3{font-size:16px;margin-bottom:8px}
.tp-why ul{margin:0;padding-left:20px;display:grid;gap:6px;font-size:14.5px}
.tp-disc{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin:20px 0 16px}
.tp-disc b{color:var(--ink)}
.tp-act{display:flex;flex-wrap:wrap;gap:8px}

.tp-three .task b{display:block;color:var(--ink);font-size:16px;margin-bottom:6px}
.tp-three .task p{margin:0;font-size:14.5px}
.tp-three .task{border-top:4px solid}
.tp-t1{border-top-color:var(--ok)!important}
.tp-t2{border-top-color:var(--signal)!important}
.tp-t3{border-top-color:var(--bad)!important}

@media (prefers-reduced-motion:no-preference){
  .tp-bar span{transition:width .35s var(--ease)}
  .tp-opt{transition:border-color .2s,background-color .2s,box-shadow .2s}
  .tp-mark{transition:left .6s var(--ease)}
  .tp-quiz.tp-on .tp-step:not([hidden]),.tp-res:not([hidden]){animation:tp-in .35s var(--ease)}
}
@keyframes tp-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (max-width:560px){
  .tp-top{flex-direction:column;align-items:stretch;gap:8px}
  .tp-opt{padding:13px 14px;font-size:15px}
  .tp-seg{font-size:14px;padding:9px 2px 8px}
  .tp-nav .btn,.tp-act .btn,.tp-links .btn{flex:1 1 100%;justify-content:center}
}
/* фирменный вид: деления шкалы — наклонные, варианты — с фаской, рамки внутренней тенью */
.tp-opt,.tp-remont{--c:var(--c-xs);clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c))}
.tp-opt{--c:var(--c-s);border:0;box-shadow:inset 0 0 0 1px var(--steel)}
.tp-opt:hover{box-shadow:inset 0 0 0 2px var(--acc-ink)}
.tp-opt.on{background:var(--acc-wash);box-shadow:inset 0 0 0 2px var(--acc-ink)}
.tp-opt:focus-within{box-shadow:inset 0 0 0 3px var(--acc-ink)}
.tp-remont{--c:var(--c-m)}
.tp-bar{height:10px;padding:2px;background:var(--steel)}
.tp-bar span{background:var(--acc-ink)}
.tp-seg{font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.tp-q:focus-visible{outline:3px solid var(--acc-ink)}