/* testbesplatno.ru — страница теста, тип scale-profile.
   Две колонки: контент 65 % / sticky-сайдбар 35 %. Подключать после site.css. */

.tb-testpage{display:grid;grid-template-columns:minmax(0,1fr) 22.5rem;gap:2.5rem;align-items:start;
  padding-top:var(--tb-sp-4)}
@media (max-width:1080px){.tb-testpage{grid-template-columns:minmax(0,1fr);gap:var(--tb-sp-5)}}
.tb-testpage__main{display:flex;flex-direction:column;gap:var(--tb-sp-5);min-width:0}
.tb-testpage__side{position:sticky;top:var(--tb-sp-4);display:flex;flex-direction:column;gap:1.125rem}
@media (max-width:1080px){.tb-testpage__side{position:static;order:2}}

/* ── шапка теста ─────────────────────────────────────────────────────── */
.tb-testhead{display:flex;flex-direction:column;gap:.875rem}
.tb-testhead h1{margin:0;font-size:clamp(2rem,3.4vw,2.875rem);line-height:1.04;letter-spacing:-.025em;text-wrap:balance}
.tb-testhead .tb-lead{margin:0}
/* Интро про саму сущность: крупнее, чернилами, мера 58 символов —
   это первое, что читает человек из поиска. */
.tb-testhead__intro{font-family:var(--tb-font-body);font-size:1.1875rem;line-height:1.6;letter-spacing:-.003em;
  color:var(--tb-ink);max-width:58ch;text-wrap:pretty}
/* Личный лид про сам тест: тише на ступень, мера уже, отбит волосяной линией
   тона — чтобы два абзаца подряд не читались одной простынёй. */
.tb-testhead__lead{font-family:var(--tb-font-body);font-size:1.0625rem;line-height:1.65;color:var(--tb-mute);
  max-width:54ch;text-wrap:pretty;padding-left:1rem;border-left:2px solid color-mix(in oklab,var(--tb-tone) 55%,transparent)}
.tb-testhead__lead em{font-style:normal;color:var(--tb-ink)}
@media (max-width:640px){
  .tb-testhead__intro{font-size:1.0625rem}
  .tb-testhead__lead{font-size:1rem;padding-left:.875rem}
}
.tb-badge{display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;height:1.875rem;
  padding-inline:.75rem;border-radius:999px;color:#fff;font-family:var(--tb-font-mono);font-size:.6875rem;
  letter-spacing:var(--tb-tracking-label);text-transform:uppercase;
  background:linear-gradient(135deg,var(--tb-tone),var(--tb-tone-2))}
.tb-badge .tb-ci,.tb-badge svg{width:14px;height:14px;flex:none}

/* ── превью радара ───────────────────────────────────────────────────── */
.tb-testprev{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:1.75rem;align-items:center;
  background:var(--tb-card);border:1px solid var(--tb-hair);border-radius:var(--tb-radius);
  padding:1.75rem;position:relative;overflow:hidden}
@media (max-width:720px){.tb-testprev{grid-template-columns:minmax(0,1fr);gap:1.25rem;padding:1.25rem}}
/* rose-диаграмма — крупная сама (не мелкий радар сбоку): фигуре 1fr, тексту узкая колонка */
.tb-testprev--rose{grid-template-columns:minmax(0,1fr) minmax(0,17rem);align-items:start}
@media (max-width:720px){.tb-testprev--rose{grid-template-columns:minmax(0,1fr)}}
.tb-testprev::before{content:"";position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--tb-tone),var(--tb-tone-2))}
.tb-radar{width:100%;height:auto;display:block;color:var(--tb-tone)}
.tb-radar__grid polygon{fill:none;stroke:var(--tb-hair);stroke-width:1}
.tb-radar__axis line{stroke:var(--tb-hair);stroke-width:1}
.tb-radar__shape{fill:color-mix(in oklab,var(--tb-tone) 18%,transparent);stroke:var(--tb-tone);stroke-width:2.5;
  stroke-linejoin:round;transform-box:fill-box;transform-origin:center}
.tb-radar__dot{fill:var(--tb-tone);opacity:.75}
.tb-radar__dot.is-lead{opacity:1;r:5.5}
@media (prefers-reduced-motion:no-preference){
  .tb-radar__shape{animation:tb-radar-in .9s cubic-bezier(.2,.9,.25,1) both}
  .tb-radar__dot{animation:tb-dot-in .5s ease both}
  .tb-radar__dot:nth-of-type(2){animation-delay:.42s}
  .tb-radar__dot:nth-of-type(3){animation-delay:.5s}
  .tb-radar__dot:nth-of-type(4){animation-delay:.58s}
  .tb-radar__dot:nth-of-type(5){animation-delay:.66s}
  @keyframes tb-radar-in{from{transform:scale(.35);opacity:0}to{transform:scale(1);opacity:1}}
  @keyframes tb-dot-in{from{opacity:0}}
}
.tb-testprev__side{display:flex;flex-direction:column;gap:.75rem;min-width:0}
.tb-scales{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.625rem;max-width:36rem}
.tb-scales li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem .75rem}
.tb-scales b{font-weight:500;font-size:1.0625rem;line-height:1.2;min-width:0}
.tb-scales em{font-family:var(--tb-font-mono);font-style:normal;font-size:1.0625rem;color:var(--tb-mute);
  font-variant-numeric:tabular-nums}
.tb-scales i{grid-column:1/-1;height:6px;border-radius:999px;background:var(--tb-hair);overflow:hidden}
.tb-scales i::after{content:"";display:block;height:100%;width:var(--v,50%);border-radius:999px;
  background:linear-gradient(90deg,var(--tb-tone),var(--tb-tone-2))}
.tb-scales li[data-lead] b{font-weight:700}
.tb-scales li[data-lead] em{color:var(--tb-tone)}

/* ── «что вы узнаете» ────────────────────────────────────────────────── */
.tb-learn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.875rem;list-style:none;margin:0;padding:0}
@media (max-width:720px){.tb-learn{grid-template-columns:minmax(0,1fr)}}
.tb-learn li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.875rem;align-items:start;
  background:var(--tb-card);border:1px solid var(--tb-hair);border-radius:14px;padding:1.125rem 1.25rem;
  transition:border-color .16s var(--tb-ease),transform .16s var(--tb-ease)}
.tb-learn li:hover{border-color:var(--tb-tone);transform:translateY(-1px)}
.tb-learn__n{font-family:var(--tb-font-mono);font-size:.75rem;line-height:1.35rem;color:var(--tb-tone);
  width:1.5rem;height:1.5rem;border-radius:7px;text-align:center;
  background:color-mix(in oklab,var(--tb-tone) 14%,transparent)}
.tb-learn h3{margin:0 0 .25rem;font-size:1rem;line-height:1.25}
.tb-learn p{margin:0;font-size:.875rem;line-height:1.55;color:var(--tb-mute)}

/* ── сайдбар ─────────────────────────────────────────────────────────── */
.tb-panel{background:var(--tb-card);border:1px solid var(--tb-hair);border-radius:var(--tb-radius);padding:1.375rem}
/* Счётчики теста — не чипы-фильтры (кликать в них нечего, а выглядели
   так). Числа в грид 2 колонки одинаковой ширины (tabular-nums), тип
   результата — во всю ширину снизу, это главный ориентир по форме. */
.tb-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0 0 1.125rem;padding:0;list-style:none;
  border:1px solid var(--tb-hair);border-radius:12px;overflow:hidden}
.tb-facts li{display:flex;flex-direction:column;gap:.1875rem;
  padding:.75rem .875rem;min-width:0}
.tb-facts li + li{border-left:1px solid var(--tb-hair)}
.tb-facts li b{font-family:var(--tb-font-mono);font-weight:400;font-size:1.375rem;
  line-height:1;color:var(--tb-ink);font-variant-numeric:tabular-nums}
.tb-facts li span{font-size:.8125rem;line-height:1.2;color:var(--tb-mute)}

.tb-facts li[data-kind]{grid-column:1/-1;border-left:0;
  border-top:1px solid var(--tb-hair);flex-direction:row;align-items:center;
  gap:.5625rem;padding:.6875rem .875rem;background:var(--tb-selected-wash)}
.tb-facts li[data-kind] svg{width:18px;height:18px;flex:none;color:var(--tb-tone)}
.tb-facts li[data-kind] span{font-family:var(--tb-font-head);font-weight:600;
  font-size:.9375rem;line-height:1.2;letter-spacing:normal;text-transform:none;
  color:var(--tb-tone)}
.tb-panel__cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.625rem}
.tb-btn--wide{width:100%;justify-content:center}
.tb-btn--ghost{display:inline-flex;align-items:center;justify-content:center;gap:.4375rem;height:var(--tb-tap);
  padding-inline:1rem;border:1px solid var(--tb-hair);border-radius:12px;background:transparent;
  color:var(--tb-ink);font:inherit;font-size:.9375rem;cursor:pointer;text-decoration:none;
  transition:border-color .16s,color .16s}
.tb-btn--ghost:hover{border-color:var(--tb-tone);color:var(--tb-tone)}
.tb-panel__note{margin:.875rem 0 0;font-size:.8125rem;line-height:1.5;color:var(--tb-mute)}
.tb-side__title{margin:0 0 .875rem;font-size:1rem}
.tb-mini{display:flex;flex-direction:column;gap:.75rem}
.tb-minicard{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;align-items:center;
  text-decoration:none;color:inherit;padding:.625rem;border:1px solid var(--tb-hair);border-radius:12px;
  transition:border-color .16s,transform .16s}
.tb-minicard:hover{border-color:var(--tb-tone);transform:translateY(-1px)}
.tb-minicard__cover{width:52px;height:52px;border-radius:10px;flex:none;display:flex;align-items:center;
  justify-content:center;color:#fff;background:linear-gradient(150deg,var(--tb-tone),var(--tb-tone-2))}
.tb-minicard__cover svg{width:24px;height:24px}
.tb-minicard b{display:block;font-family:var(--tb-font-head);font-weight:600;font-size:.9375rem;line-height:1.2}
.tb-minicard span{font-family:var(--tb-font-mono);font-size:.6875rem;color:var(--tb-mute)}

/* водяной знак теста на превью результата: тон раздела, не белый —
   подложка здесь светлая карточка, а не насыщенная обложка */
.tb-testprev > .tb-ti--lg,.tb-testprev > .tb-ci--lg{right:-1.5%;bottom:-6%;height:86%;stroke-width:.9;opacity:.08;color:var(--tb-tone);
  pointer-events:none;z-index:0}
.tb-testprev > *:not(.tb-ti--lg):not(.tb-ci--lg){position:relative;z-index:1}
.tb-badge .tb-ci{width:14px;height:14px}

/* ── список вопросов: свёрнут, первый виден ──────────────────────────── */
.tb-qlist{background:var(--tb-card);border:1px solid var(--tb-hair);border-radius:var(--tb-radius);overflow:hidden}
.tb-qlist__first{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.875rem;padding:1.25rem 1.375rem}
.tb-qlist__n{font-family:var(--tb-font-mono);font-size:.75rem;color:var(--tb-tone);padding-top:.1875rem}
.tb-qlist__q{margin:0 0 .75rem;font-family:var(--tb-font-head);font-weight:600;font-size:1.0625rem;line-height:1.3}
.tb-answers{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}

/* ── цветовое ранжирование (тест Люшера) ─────────────────────────────── */
.tb-colorrank__hint{margin:0 0 1.125rem;color:var(--tb-mute);font-size:.9375rem;line-height:1.55}
.tb-colorrank__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
@media (max-width:560px){.tb-colorrank__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tb-colorrank__swatch{position:relative;aspect-ratio:1/1;border-radius:var(--tb-radius-sm);border:2px solid transparent;
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:.625rem;transition:transform .16s var(--tb-ease),border-color .16s var(--tb-ease)}
.tb-colorrank__swatch:hover{transform:translateY(-2px)}
.tb-colorrank__swatch.is-picked{border-color:#fff}
.tb-colorrank__badge{position:absolute;top:.5rem;right:.5rem;width:1.75rem;height:1.75rem;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;font-family:var(--tb-font-mono);font-size:.875rem;
  display:flex;align-items:center;justify-content:center}
.tb-colorrank__name{font-family:var(--tb-font-mono);font-size:.75rem;color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.6);text-align:center}
.tb-colorrank__result-strip{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.125rem 0}
.tb-colorrank__chip{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.625rem .5rem;
  border-radius:var(--tb-radius-sm);min-width:4.5rem;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.tb-colorrank__chip b{font-family:var(--tb-font-mono);font-size:1rem}
.tb-colorrank__chip span{font-family:var(--tb-font-mono);font-size:.6875rem}
.tb-answers li{display:inline-flex;align-items:center;min-height:2.25rem;padding:.375rem .8125rem;
  border:1px solid var(--tb-hair);border-radius:999px;font-size:.875rem;color:var(--tb-mute)}
.tb-answers li[data-pick]{border-color:var(--tb-tone);color:var(--tb-ink);background:var(--tb-selected-wash)}
.tb-qlist details{border-top:1px solid var(--tb-hair)}
.tb-qlist summary{display:flex;align-items:center;gap:.625rem;padding:1rem 1.375rem;cursor:pointer;
  font-size:.9375rem;color:var(--tb-mute);list-style:none;min-height:var(--tb-tap)}
.tb-qlist summary::-webkit-details-marker{display:none}
.tb-qlist summary::after{content:"";width:8px;height:8px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-left:auto;transition:transform .18s var(--tb-ease)}
.tb-qlist details[open] summary::after{transform:rotate(-135deg)}
.tb-qlist summary:hover{color:var(--tb-ink)}
.tb-qrest{margin:0;padding:0 1.375rem 1.25rem;list-style:none;display:flex;flex-direction:column}
.tb-qrest li{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.5rem;padding:.5625rem 0;
  border-top:1px solid color-mix(in oklab,var(--tb-hair) 55%,transparent);font-size:.9375rem;line-height:1.4}
.tb-qrest li:first-child{border-top:0}
.tb-qrest span{font-family:var(--tb-font-mono);font-size:.75rem;color:var(--tb-mute);font-variant-numeric:tabular-nums}

/* ── «на чём основано»: факт + пометка источника у каждого ───────────── */
.tb-facts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.875rem;margin-top:1.125rem}
@media (max-width:720px){.tb-facts-grid{grid-template-columns:minmax(0,1fr)}}
.tb-fact{background:var(--tb-card);border:1px solid var(--tb-hair);border-radius:14px;padding:1.125rem 1.25rem;
  display:flex;flex-direction:column;gap:.5rem}
.tb-fact__v{font-family:var(--tb-font-mono);font-size:1.5rem;line-height:1;color:var(--tb-tone);
  font-variant-numeric:tabular-nums}
.tb-fact p{margin:0;font-size:.9375rem;line-height:1.5}
.tb-fact__src{display:inline-flex;align-items:center;gap:.375rem;align-self:flex-start;margin-top:.125rem;
  font-family:var(--tb-font-mono);font-size:.6875rem;color:var(--tb-mute);text-decoration:none;
  border:1px solid var(--tb-hair);border-radius:999px;padding:.25rem .5rem}
.tb-fact__src:hover{border-color:var(--tb-tone);color:var(--tb-tone)}

/* ── источники нумерованным списком ─────────────────────────────────── */
.tb-srclist{list-style:none;counter-reset:s;margin:1.125rem 0 0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.tb-srclist li{counter-increment:s;display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:.75rem;
  padding-bottom:.75rem;border-bottom:1px solid var(--tb-hair)}
.tb-srclist li:last-child{border-bottom:0;padding-bottom:0}
.tb-srclist li::before{content:counter(s,decimal-leading-zero);font-family:var(--tb-font-mono);font-size:.75rem;
  color:var(--tb-mute);padding-top:.1875rem}
.tb-srclist a{font-size:.9375rem;line-height:1.4}
.tb-srclist .tb-meta{display:block;margin-top:.25rem}

/* ── FAQ аккордеон ───────────────────────────────────────────────────── */
.tb-faq{margin-top:1.125rem;border:1px solid var(--tb-hair);border-radius:var(--tb-radius);
  background:var(--tb-card);overflow:hidden}
.tb-faq details + details{border-top:1px solid var(--tb-hair)}
.tb-faq summary{display:flex;align-items:center;gap:1rem;padding:1.0625rem 1.375rem;cursor:pointer;
  font-family:var(--tb-font-head);font-weight:600;font-size:1.0625rem;line-height:1.3;list-style:none;min-height:var(--tb-tap)}
.tb-faq summary::-webkit-details-marker{display:none}
.tb-faq summary::after{content:"";flex:none;width:9px;height:9px;border-right:1.6px solid var(--tb-mute);
  border-bottom:1.6px solid var(--tb-mute);transform:rotate(45deg);margin-left:auto;transition:transform .18s var(--tb-ease)}
.tb-faq details[open] summary::after{transform:rotate(-135deg);border-color:var(--tb-tone)}
.tb-faq p{margin:0 1.375rem 1.25rem;max-width:68ch;font-size:.9375rem;line-height:1.6;color:var(--tb-mute)}

/* ── интерпретация шкал ─────────────────────────────────────────────── */
.tb-interp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.875rem;margin-top:1.125rem}
@media (max-width:900px){.tb-interp{grid-template-columns:minmax(0,1fr)}}
.tb-icard{background:var(--tb-card);border:1px solid var(--tb-hair);border-radius:14px;padding:1.25rem 1.375rem;
  display:flex;flex-direction:column;gap:.75rem;position:relative;overflow:hidden}
.tb-icard::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:linear-gradient(180deg,var(--tb-tone),var(--tb-tone-2))}
.tb-icard h3{margin:0;font-size:1.0625rem;line-height:1.25}
.tb-icard__pole{display:grid;grid-template-columns:4.75rem minmax(0,1fr);gap:.625rem;align-items:baseline}
.tb-icard__pole b{font-family:var(--tb-font-mono);font-weight:400;font-size:.6875rem;letter-spacing:var(--tb-tracking-label);
  text-transform:uppercase;color:var(--tb-tone);padding-top:.1875rem}
.tb-icard__pole p{margin:0;font-size:.875rem;line-height:1.55;color:var(--tb-mute)}
.tb-icard__pole[data-low] b{color:var(--tb-mute)}
.tb-icard__pole[data-mid] b{color:var(--tb-mute);opacity:.8}

/* ── CTA-баннер ─────────────────────────────────────────────────────── */
.tb-ctabar{margin-top:var(--tb-sp-7);background:linear-gradient(120deg,var(--tb-tone),var(--tb-tone-2));
  border-radius:var(--tb-radius);padding:2.25rem 2.5rem;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:center;position:relative;overflow:hidden;color:#fff}
@media (max-width:720px){.tb-ctabar{grid-template-columns:minmax(0,1fr);padding:1.5rem}}
.tb-ctabar h2{margin:0 0 .5rem;color:#fff;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.1}
.tb-ctabar p{margin:0;max-width:52ch;color:rgba(255,255,255,.82);font-size:1rem;line-height:1.55}
.tb-ctabar .tb-ti--lg,.tb-ctabar .tb-ci--lg{right:26%;bottom:-24%;height:150%;opacity:.14;color:#fff}
.tb-ctabar__cta{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start;z-index:1}
.tb-ctabar .tb-btn{background:#fff;color:var(--tb-tone-2);border-color:#fff}
.tb-ctabar .tb-btn:hover{background:rgba(255,255,255,.9)}
.tb-ctabar .tb-meta{color:rgba(255,255,255,.75)}
.tb-ctabar > *:not(.tb-ti--lg):not(.tb-ci--lg){position:relative;z-index:1}

/* ── closeness: сходство с типами, топ крупнее остальных ─────────────── */
.tb-close{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:1.75rem;align-items:center}
@media (max-width:720px){.tb-close{grid-template-columns:minmax(0,1fr);gap:1.25rem}}
.tb-close__top{display:flex;flex-direction:column;gap:.625rem;align-items:flex-start}
.tb-close__ring{position:relative;width:100%;max-width:13rem}
.tb-close__ring svg{display:block;width:100%;height:auto;transform:rotate(-90deg)}
.tb-close__ring circle{fill:none;stroke-linecap:round;stroke-width:9}
.tb-close__ring .is-bg{stroke:var(--tb-hair)}
.tb-close__ring .is-val{stroke:var(--tb-tone)}
.tb-close__val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem}
.tb-close__val b{font-family:var(--tb-font-mono);font-weight:400;font-size:1.75rem;line-height:1;color:var(--tb-ink);
  font-variant-numeric:tabular-nums}
.tb-close__val span{font-family:var(--tb-font-mono);font-size:.5625rem;letter-spacing:var(--tb-tracking-label);
  text-transform:uppercase;color:var(--tb-mute)}
.tb-close__name{font-family:var(--tb-font-head);font-weight:700;font-size:1.5rem;line-height:1.1;letter-spacing:-.02em}
.tb-close__rest{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6875rem}
.tb-close__rest li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem .75rem}
.tb-close__rest b{font-weight:500;font-size:.9375rem;line-height:1.2}
.tb-close__rest em{font-family:var(--tb-font-mono);font-style:normal;font-size:.8125rem;color:var(--tb-mute);
  font-variant-numeric:tabular-nums}
.tb-close__rest i{grid-column:1/-1;height:4px;border-radius:999px;background:var(--tb-hair);overflow:hidden}
.tb-close__rest i::after{content:"";display:block;height:100%;width:var(--v,50%);border-radius:999px;
  background:color-mix(in oklab,var(--tb-tone) 70%,transparent)}
.tb-close__rest li[data-lead] i::after{background:linear-gradient(90deg,var(--tb-tone),var(--tb-tone-2))}
@media (prefers-reduced-motion:no-preference){
  .tb-close__ring .is-val{animation:tb-close-in 1.1s cubic-bezier(.2,.9,.25,1) both}
  @keyframes tb-close-in{from{stroke-dashoffset:var(--len)}}
}

/* карточка совпавшего типа: сильная черта и оборотная сторона */
.tb-typecard{background:var(--tb-card);border:1px solid var(--tb-hair);border-radius:var(--tb-radius);
  padding:1.5rem 1.625rem;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.25rem;position:relative;overflow:hidden}

.tb-typecard__cover{width:96px;height:96px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(150deg,var(--tb-tone),var(--tb-tone-2));flex:none}
.tb-typecard__cover svg{width:44px;height:44px}
.tb-typecard h3{margin:0 0 .5rem;font-size:1.375rem;line-height:1.15}
.tb-typecard__body{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:.75rem 1rem;align-items:baseline}
.tb-typecard__body > .tb-label,.tb-typecard__body > h3{grid-column:1/-1;margin:0}
.tb-typecard__pole{display:contents}
.tb-typecard__pole b{font-family:var(--tb-font-mono);font-weight:400;font-size:.6875rem;
  letter-spacing:var(--tb-tracking-label);text-transform:uppercase;color:var(--tb-tone);
  padding-top:.1875rem;text-wrap:balance}
.tb-typecard__pole[data-flip] b{color:var(--tb-mute)}
.tb-typecard__pole p{margin:0;font-size:.9375rem;line-height:1.55;color:var(--tb-mute)}

/* честная пометка про развлекательную типологию */
.tb-honest{display:flex;flex-direction:column;gap:.875rem;background:var(--tb-raise);
  border:1px dashed var(--tb-hair);border-radius:14px;padding:1.25rem 1.5rem;margin-top:1.125rem}
.tb-honest__tag{align-self:flex-start;font-family:var(--tb-font-mono);font-size:.6875rem;
  letter-spacing:var(--tb-tracking-label);text-transform:uppercase;color:var(--tb-tone);
  border:1px solid var(--tb-tone);border-radius:999px;padding:.3125rem .625rem;white-space:nowrap}
.tb-honest p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--tb-mute);max-width:68ch}
.tb-honest p + p{margin-top:.625rem}


/* ── мобильная раскладка 390 ─────────────────────────────────────────────
   Порядок один в один как на десктопе, но панель «начать» переезжает из
   сайдбара в поток сразу под диаграмму, а «Похожие тесты» уезжают вниз
   горизонтальным скроллом. Липкая на телефоне только нижняя кнопка. */
body{timeline-scope:--cta}
.tb-mobonly{display:none}
.tb-herostart{display:none}
@media (max-width:760px){.tb-herostart{display:block;margin:.875rem 0 0}}
@media (max-width:720px){
  .tb-mobonly{display:block}
  .tb-testpage__side .tb-panel:first-child{display:none}  /* панель фактов уже в потоке */
  .tb-testpage__side{gap:0}

  .tb-facts li{padding:.625rem .75rem}
  .tb-facts li[data-kind]{padding:.5625rem .75rem}
  .tb-panel__cta{grid-template-columns:minmax(0,1fr) var(--tb-tap)}
  .tb-panel__cta .tb-btn--ghost{padding-inline:0;width:var(--tb-tap)}
  .tb-panel__cta .tb-btn--ghost span{display:none}       /* «Поделиться» — только иконка */

  /* диаграмма на телефоне: во всю ширину колонки, подписи шкал не режутся,
     легенда и заголовок по центру под ней */
  .tb-close{grid-template-columns:minmax(0,1fr)}
  .tb-close__top{align-items:center;text-align:center;gap:.5rem}
  .tb-close__top .tb-radar{max-width:20rem;width:100%;margin-inline:auto}
  .tb-radar{max-width:20rem;margin-inline:auto}
  .tb-radar__lab{font-size:10px}
  .tb-radar__lab.is-val{font-size:11px}
  .tb-radarkey{justify-content:center}
  .tb-close__name{font-size:1.375rem}

  /* похожие тесты — вертикальный список во всю ширину.
     Горизонтальный скролл прячет вторую и третью карточку за краем,
     названия обрезаются, а попасть пальцем нужно в узкую полосу 90 px. */
  .tb-mini{flex-direction:column;gap:.625rem;overflow:visible}
  .tb-minicard{grid-template-columns:auto minmax(0,1fr);min-height:var(--tb-tap);padding:.625rem .75rem}
  .tb-minicard b{font-size:1rem;line-height:1.25}

  /* липкой нижней кнопки на телефоне нет: «Начать тест» уже стоит в потоке
     под диаграммой, а внизу страницы — CTA-баннер. Третья та же кнопка,
     постоянно занимающая нижние 68 px экрана, только съедала бы текст. */
  .tb-stickybar{display:none}
}
.tb-stickybar{display:none}

/* — типология: радар по шкалам теста с наложенным профилем типа —
   форма результата у typology та же, что в системе: диаграмма, а не индикатор.
   Сплошной контур — ваш профиль, пунктир — профиль ближайшего типа. */
.tb-radar__ref{fill:none;stroke:var(--tb-mute);stroke-width:1.6;stroke-dasharray:4 4;stroke-linejoin:round;opacity:.75}
.tb-radar__lab{font-family:var(--tb-font-mono);font-size:11px;fill:var(--tb-mute);letter-spacing:.04em}
.tb-radar__lab.is-val{fill:var(--tb-ink);font-size:12px}
.tb-radarkey{display:flex;flex-wrap:wrap;gap:.5rem .875rem;margin-top:.625rem;padding:0;list-style:none}
.tb-radarkey li{display:inline-flex;align-items:center;gap:.4375rem;font-size:.8125rem;color:var(--tb-mute)}
.tb-radarkey i{width:16px;height:0;border-top:2px solid var(--tb-tone);flex:none}
.tb-radarkey li[data-ref] i{border-top:2px dashed var(--tb-mute)}

/* карточка типа на телефоне — в конце файла, чтобы перекрыть десктопную сетку */
@media (max-width:640px){
  .tb-typecard{grid-template-columns:minmax(0,1fr);padding:1.25rem}
  .tb-typecard__body{grid-template-columns:minmax(0,1fr);gap:.25rem}
  .tb-typecard__pole b{padding-top:.5rem}
  .tb-typecard__cover{width:72px;height:72px}
  .tb-typecard__cover svg{width:34px;height:34px}
  .tb-icard__pole{grid-template-columns:minmax(0,1fr);gap:.125rem}
  .tb-icard__pole b{padding-top:.375rem}
}

/* ── gauge: одна шкала 0–100, форма результата у knowledge и screening ── */
.tb-gauge{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr);gap:1.75rem;align-items:center}
@media (max-width:720px){.tb-gauge{grid-template-columns:minmax(0,1fr);gap:1.25rem}}
.tb-gauge__dial{position:relative;width:100%;max-width:17rem;margin-inline:auto}
.tb-gauge__dial svg{display:block;width:100%;height:auto;overflow:visible}
.tb-gauge__track{fill:none;stroke:var(--tb-hair);stroke-width:14;stroke-linecap:round}
.tb-gauge__fill{fill:none;stroke:var(--tb-tone);stroke-width:14;stroke-linecap:round}
.tb-gauge__tick{stroke:var(--tb-hair);stroke-width:2}
.tb-gauge__needle{stroke:var(--tb-ink);stroke-width:3;stroke-linecap:round;transform-origin:100px 100px}
.tb-gauge__hub{fill:var(--tb-ink)}
.tb-gauge__cap{font-family:var(--tb-font-mono);font-size:9px;fill:var(--tb-mute);letter-spacing:.06em}
.tb-gauge__val{position:absolute;left:0;right:0;bottom:6%;display:flex;flex-direction:column;align-items:center;gap:.125rem}
.tb-gauge__val b{font-family:var(--tb-font-mono);font-weight:400;font-size:2rem;line-height:1;color:var(--tb-ink);
  font-variant-numeric:tabular-nums}
.tb-gauge__val span{font-family:var(--tb-font-mono);font-size:.5625rem;letter-spacing:var(--tb-tracking-label);
  text-transform:uppercase;color:var(--tb-mute)}
@media (prefers-reduced-motion:no-preference){
  .tb-gauge__needle{animation:tb-needle 1.2s cubic-bezier(.25,1.2,.35,1) both}
  @keyframes tb-needle{from{transform:rotate(-84deg)}}
}
.tb-zones{list-style:none;margin:.875rem 0 0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.tb-zones li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.75rem;align-items:baseline;
  padding:.5rem .75rem;border:1px solid var(--tb-hair);border-radius:10px;font-size:.9375rem}
.tb-zones li[data-on]{border-color:var(--tb-tone);background:var(--tb-selected-wash)}
.tb-zones em{font-family:var(--tb-font-mono);font-style:normal;font-size:.75rem;color:var(--tb-mute);
  font-variant-numeric:tabular-nums}
.tb-zones i{width:10px;height:10px;border-radius:3px;background:var(--tb-hair)}
.tb-zones li[data-on] i{background:var(--tb-tone)}

/* ── тиры по итогу: карточка на каждый диапазон ─────────────────────── */
.tb-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.875rem;margin-top:1.125rem}
@media (max-width:900px){.tb-tiers{grid-template-columns:minmax(0,1fr)}}
.tb-tier{background:var(--tb-card);border:1px solid var(--tb-hair);border-radius:14px;padding:1.25rem;
  display:flex;flex-direction:column;gap:.5rem}
.tb-tier[data-on]{border-color:var(--tb-tone);box-shadow:var(--tb-shadow)}
.tb-tier__range{font-family:var(--tb-font-mono);font-size:1.25rem;line-height:1;color:var(--tb-tone);
  font-variant-numeric:tabular-nums}
.tb-tier h3{margin:0;font-size:1.0625rem;line-height:1.25}
.tb-tier p{margin:0;font-size:.875rem;line-height:1.55;color:var(--tb-mute)}

/* ── разбор расхождений: вопрос, ваш ответ, верный ответ, норма ──────── */
.tb-misses{display:flex;flex-direction:column;gap:.75rem;margin-top:1.125rem}
.tb-miss{background:var(--tb-card);border:1px solid var(--tb-hair);border-radius:14px;padding:1.125rem 1.25rem;
  display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.25rem .75rem}
.tb-miss__n{font-family:var(--tb-font-mono);font-size:.75rem;color:var(--tb-mute);padding-top:.25rem}
.tb-miss__q{margin:0;font-family:var(--tb-font-head);font-weight:600;font-size:1rem;line-height:1.3}
.tb-miss__rows{grid-column:2;display:flex;flex-direction:column;gap:.375rem;margin-top:.5rem}
.tb-miss__row{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:.75rem;align-items:baseline;
  font-size:.9375rem;line-height:1.45}
.tb-miss__row b{font-family:var(--tb-font-mono);font-weight:400;font-size:.6875rem;
  letter-spacing:var(--tb-tracking-label);text-transform:uppercase;color:var(--tb-mute)}
.tb-miss__row[data-wrong] span{color:var(--tb-mute);text-decoration:line-through;text-decoration-thickness:1px}
.tb-miss__row[data-right] b{color:var(--tb-tone)}
.tb-miss__src{grid-column:2;margin-top:.625rem}
@media (max-width:640px){
  .tb-miss{grid-template-columns:minmax(0,1fr)}
  .tb-miss__rows,.tb-miss__src{grid-column:1}
  .tb-miss__row{grid-template-columns:minmax(0,1fr);gap:.125rem}
}

/* ── карточка зоны: спокойный тон, без алерта ───────────────────────── */
.tb-zonecard{background:var(--tb-card);border:1px solid var(--tb-hair);border-radius:var(--tb-radius);
  padding:1.5rem 1.625rem;display:flex;flex-direction:column;gap:.75rem;position:relative;overflow:hidden}
.tb-zonecard::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:linear-gradient(180deg,var(--tb-tone),var(--tb-tone-2))}
.tb-zonecard h3{margin:0;font-size:1.25rem;line-height:1.2}
.tb-zonecard p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--tb-mute);max-width:68ch}
.tb-zonecard__soft{margin-top:.25rem;padding:1rem 1.125rem;border:1px solid var(--tb-hair);border-radius:12px;
  background:var(--tb-raise)}
.tb-zonecard__soft p{color:var(--tb-ink);font-size:.9375rem}
.tb-zonecard__soft .tb-meta{display:block;margin-top:.5rem;color:var(--tb-mute)}

/* ---------------------------------------------------------------
   Справочный слой страницы теста (Testru_Guide). Блоки выводятся
   только у тестов с полем guide, поэтому пустых отступов не будет.
   --------------------------------------------------------------- */

/* Выжимка под шапкой: ответ до всякой прокрутки. */
.tb-short{
  margin:var(--tb-sp-4) 0 0;padding:1rem 1.125rem;
  background:var(--tb-card);border:1px solid var(--tb-line);
  border-left:3px solid var(--tb-tone);border-radius:var(--tb-r-2);
}
.tb-short__tag{
  display:block;margin-bottom:.375rem;color:var(--tb-tone);
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
}
.tb-short p{margin:0;font-size:1.0625rem;line-height:1.6}

/* Оглавление: список якорей, а не «навигация» ради навигации. */
.tb-toc{margin:var(--tb-sp-4) 0 0;padding:1rem 1.125rem;background:var(--tb-card);
  border:1px solid var(--tb-line);border-radius:var(--tb-r-2)}
.tb-toc>b{display:block;margin-bottom:.5rem;font-size:.8125rem;color:var(--tb-mute);
  letter-spacing:.06em;text-transform:uppercase}
.tb-toc ol{margin:0;padding:0;list-style:none;display:grid;gap:.375rem}
@media (min-width:720px){.tb-toc ol{grid-template-columns:1fr 1fr;gap:.375rem 1.5rem}}
.tb-toc li{counter-increment:tb-toc}
.tb-toc a{color:var(--tb-ink);text-decoration:none;font-size:.9375rem;
  display:inline-flex;gap:.5rem;align-items:baseline}
.tb-toc a::before{content:counter(tb-toc,decimal-leading-zero);color:var(--tb-tone);
  font-family:var(--tb-mono,ui-monospace,monospace);font-size:.8125rem}
.tb-toc a:hover,.tb-toc a:focus-visible{color:var(--tb-tone);text-decoration:underline}
.tb-toc ol{counter-reset:tb-toc}

/* «Кому пригодится» — карточки по сегментам. */
.tb-who{display:grid;gap:.875rem;margin-top:1.125rem}
@media (min-width:720px){.tb-who{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}}
.tb-who__card{padding:1rem 1.125rem;background:var(--tb-card);
  border:1px solid var(--tb-line);border-radius:var(--tb-r-2)}
.tb-who__card h3{margin:0 0 .375rem;font-size:1rem}
.tb-who__card p{margin:0;color:var(--tb-mute);font-size:.9375rem;line-height:1.55}

/* «Какие темы проверяют» — нумерованные строки. */
.tb-topics{display:grid;gap:.75rem;margin-top:1.125rem}
.tb-topics__row{display:grid;grid-template-columns:2.25rem 1fr;gap:.75rem;
  padding:.875rem 1rem;background:var(--tb-card);border:1px solid var(--tb-line);
  border-radius:var(--tb-r-2)}
.tb-topics__n{color:var(--tb-tone);font-family:var(--tb-mono,ui-monospace,monospace);
  font-size:.875rem;padding-top:.125rem}
.tb-topics__row h3{margin:0 0 .25rem;font-size:1rem}
.tb-topics__row p{margin:0;color:var(--tb-mute);font-size:.9375rem;line-height:1.55}

/* Частые ошибки и чек-лист: маркеры несут смысл, не украшают. */
.tb-mistakes,.tb-check{margin:1.125rem 0 0;padding:0;list-style:none;display:grid;gap:.625rem}
.tb-mistakes li,.tb-check li{
  position:relative;padding:.75rem 1rem .75rem 2.5rem;
  background:var(--tb-card);border:1px solid var(--tb-line);border-radius:var(--tb-r-2);
  font-size:.9375rem;line-height:1.55;
}
.tb-mistakes li::before{content:'';position:absolute;left:1rem;top:1.05rem;
  width:.625rem;height:.625rem;border-radius:50%;
  border:2px solid var(--tb-tone);opacity:.85}
.tb-check li::before{content:'';position:absolute;left:1rem;top:1rem;
  width:.5rem;height:.75rem;border:solid var(--tb-tone);border-width:0 2px 2px 0;
  transform:rotate(45deg)}

/* Пошаговый алгоритм. */
.tb-steps{margin:1.125rem 0 0;padding:0;list-style:none;display:grid;gap:.75rem;counter-reset:tb-step}
.tb-steps li{counter-increment:tb-step;position:relative;
  padding:1rem 1.125rem 1rem 3rem;background:var(--tb-card);
  border:1px solid var(--tb-line);border-radius:var(--tb-r-2)}
.tb-steps li::before{content:counter(tb-step);position:absolute;left:1rem;top:1rem;
  width:1.375rem;height:1.375rem;display:grid;place-items:center;border-radius:50%;
  background:var(--tb-tone);color:#fff;font-size:.75rem;font-weight:600}
.tb-steps h3{margin:0 0 .25rem;font-size:1rem}
.tb-steps p{margin:0;color:var(--tb-mute);font-size:.9375rem;line-height:1.55}

/* Границы применимости — та же рамка, что у дисклеймера, но с текстом. */
.tb-prose--frame{padding:1rem 1.125rem;background:var(--tb-card);
  border:1px solid var(--tb-line);border-radius:var(--tb-r-2)}
.tb-prose--frame p{margin:0 0 .625rem}
.tb-prose--frame p:last-child{margin-bottom:0}