/* testbesplatno.ru — экран результата: анимация и знаки. После site.css. */
.tb-res{background:var(--tb-card);border:1px solid var(--tb-hair);border-radius:var(--tb-radius);overflow:hidden;box-shadow:var(--tb-shadow)}
.tb-res__top{height:8px;background:linear-gradient(90deg,var(--tb-tone),var(--tb-tone-2));transform-origin:left;animation:tb-res-top .8s var(--tb-ease)}
.tb-res__body{padding:1.75rem 1.875rem;display:flex;flex-direction:column;gap:1rem}
.tb-res__head{display:flex;flex-direction:column;gap:.75rem;position:relative}
/* Кнопка «Поделиться» у результата — в верхнем правом углу карточки,
   на одной высоте со значком теста, а не под текстом внизу. */
.tb-res__share{position:absolute;top:0;right:0;flex:none;white-space:nowrap;
  display:flex;align-items:center;gap:.375rem;height:2.5rem;padding:0 .875rem;border-radius:999px;
  font-family:var(--tb-font-mono);font-size:.8125rem;
  border:1px solid var(--tb-hair);background:var(--tb-card);color:var(--tb-mute);cursor:pointer;
  transition:color .16s var(--tb-ease),border-color .16s var(--tb-ease)}
.tb-res__share:hover{color:var(--tb-ink);border-color:var(--tb-tone)}
@media (max-width:640px){
  .tb-res__body{padding:1.25rem 1.375rem;gap:.75rem}
  .tb-res__head{gap:.5625rem}
  .tb-seal{width:48px;height:48px}
  .tb-seal .tb-ci,.tb-seal .tb-ti{width:24px;height:24px}
  .tb-res__share{height:2.25rem;padding:0 .75rem;font-size:.75rem}
}
@keyframes tb-res-top{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* печать результата: знак раздела в круге тона — появляется с доводкой */
.tb-seal{width:64px;height:64px;border-radius:50%;background:linear-gradient(150deg,var(--tb-tone),var(--tb-tone-2));display:flex;align-items:center;justify-content:center;color:#fff;flex:none;
  animation:tb-seal-in .7s cubic-bezier(.2,1.5,.35,1) .15s backwards}
.tb-seal .tb-ci,.tb-seal .tb-ti{width:32px;height:32px;stroke-width:1.7}
@keyframes tb-seal-in{from{transform:scale(.4) rotate(-14deg);opacity:0}to{transform:none;opacity:1}}

/* 1 · профиль по шкалам: полосы вырастают по очереди, проценты набегают */
.tb-rscale{display:flex;flex-direction:column;gap:.4375rem}
.tb-rscale__track{height:12px;border-radius:999px;background:var(--tb-paper);overflow:hidden}
.tb-rscale__track i{display:block;height:100%;background:var(--tb-scale,var(--tb-tone));transform-origin:left;animation:tb-grow .9s cubic-bezier(.2,.9,.2,1) backwards}
.tb-rscale:nth-child(2) .tb-rscale__track i{animation-delay:.1s}
.tb-rscale:nth-child(3) .tb-rscale__track i{animation-delay:.2s}
.tb-rscale:nth-child(4) .tb-rscale__track i{animation-delay:.3s}
.tb-rscale:nth-child(5) .tb-rscale__track i{animation-delay:.4s}
.tb-rscale__num{font-family:var(--tb-font-mono);font-size:1.0625rem;color:var(--tb-mute);animation:tb-fade-up .6s var(--tb-ease) .35s backwards}
@keyframes tb-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes tb-fade-up{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* 2 · близость к типам: строки въезжают, лидер подсвечивается */
.tb-rtype{display:flex;align-items:center;gap:.75rem;animation:tb-slide-in .6s var(--tb-ease) backwards}
.tb-rtype:nth-child(2){animation-delay:.08s}
.tb-rtype:nth-child(3){animation-delay:.16s}
.tb-rtype:nth-child(4){animation-delay:.24s}
.tb-rtype__bar{flex:1;height:26px;border-radius:7px;background:var(--tb-paper);overflow:hidden}
.tb-rtype__bar i{display:block;height:100%;background:var(--tb-tone);transform-origin:left;animation:tb-grow 1s cubic-bezier(.2,.9,.2,1) .2s backwards}
.tb-rtype--lead .tb-rtype__bar{box-shadow:0 0 0 2px var(--tb-tone)}
.tb-rtype--lead .tb-ti,.tb-rtype--lead .tb-ci{animation:tb-pulse-lead 1.6s ease-in-out 1.1s 2}
@keyframes tb-slide-in{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes tb-pulse-lead{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}

/* 3 · зона по сумме баллов: счётчик и метка доезжают до своей зоны */
.tb-rzone{position:relative;margin-top:.5rem}
.tb-rzone__bar{display:flex;height:14px;border-radius:999px;overflow:hidden}
.tb-rzone__bar i{flex:1;animation:tb-fade-in .5s var(--tb-ease) backwards}
.tb-rzone__bar i:nth-child(2){animation-delay:.06s}
.tb-rzone__bar i:nth-child(3){animation-delay:.12s}
.tb-rzone__bar i:nth-child(4){animation-delay:.18s}
.tb-rzone__mark{position:absolute;top:-7px;width:4px;height:28px;border-radius:2px;background:var(--tb-ink);box-shadow:0 0 0 3px var(--tb-card);
  animation:tb-settle 1.1s cubic-bezier(.25,1.35,.35,1) .3s backwards}
@keyframes tb-settle{from{left:0!important;opacity:0}40%{opacity:1}to{opacity:1}}
.tb-rcount{font-family:var(--tb-font-mono);font-size:2.75rem;line-height:1;letter-spacing:-.02em;display:inline-flex;overflow:hidden;height:1em}
.tb-rcount i{display:block;animation:tb-roll 1s cubic-bezier(.2,.9,.2,1) .2s backwards;font-style:normal}
@keyframes tb-roll{from{transform:translateY(1em);opacity:0}to{transform:none;opacity:1}}

/* 4 · палитра/набор: плашки раскрываются веером, выбранная выходит вперёд */
.tb-rset{display:flex;gap:.625rem}
.tb-rset span{width:56px;height:56px;border-radius:12px;background:var(--tb-tone);opacity:.45;animation:tb-fan-in .7s cubic-bezier(.2,1.3,.35,1) backwards}
.tb-rset span:nth-child(2){animation-delay:.07s}
.tb-rset span:nth-child(3){animation-delay:.14s}
.tb-rset span:nth-child(4){animation-delay:.21s}
.tb-rset span[data-on]{opacity:1;box-shadow:0 6px 18px rgba(23,24,28,.18)}
@keyframes tb-fan-in{from{transform:translateY(10px) rotate(-8deg);opacity:0}to{transform:none}}

/* повтор анимации по кнопке: тема снимает и возвращает класс .tb-res--play */
.tb-res--play .tb-res__top,.tb-res--play [class*="tb-r"] i,.tb-res--play .tb-seal{animation-play-state:running}

@media (prefers-reduced-motion:reduce){
  .tb-res *,.tb-seal{animation:none!important;opacity:1!important;transform:none!important}
}

/* ── диаграмма результата (дизайн-пакет design_handoff_radar) ───────── */
.testru-radar-block{margin:0;display:flex;flex-direction:column;align-items:center;gap:1.25rem;
  color:var(--tb-ink,#F0F0ED)}
.testru-radar{width:100%;max-width:320px}
@media (max-width:640px){.testru-radar{max-width:260px}}

.testru-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem .625rem;max-width:34rem}
.testru-legend__item{display:inline-flex;align-items:center;gap:.4375rem;font-size:.875rem;line-height:1.2;
  padding:.375rem .6875rem;border:1px solid var(--tb-hair,#2A2D33);border-radius:999px;
  color:var(--tb-mute,#9B9CA3)}
.testru-legend__item::before{content:"";width:8px;height:8px;border-radius:2px;flex:none;
  background:var(--testru-tone,var(--tb-tone,currentColor));opacity:.42}
.testru-legend__item[data-lead]{color:var(--tb-ink,#F0F0ED);border-color:var(--testru-tone,var(--tb-tone))}
.testru-legend__item[data-lead]::before{opacity:1}
.testru-legend b{font-family:var(--tb-font-mono,ui-monospace,monospace);font-weight:400;
  color:var(--testru-tone,var(--tb-tone,currentColor))}
.tb-radar{margin:0 0 1.5rem}

/* ── лепестковая диаграмма (rose): сектор — шкала, радиус — значение ───
   Заменяет паутинку в результате «профиль по шкалам»: форма и цвет сектора
   читаются на глаз даже при небольшом разбросе значений, где полигон
   выходит почти правильным и ничего не сообщает. */
.tb-rose-wrap{margin:0 0 1.5rem}
.tb-rose{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,15rem);gap:1.75rem;align-items:center}
@media (max-width:760px){.tb-rose{grid-template-columns:minmax(0,1fr);gap:1.125rem}}
.tb-rose__fig{margin:0;min-width:0}
.tb-rosepetal{display:block;width:100%;max-width:37rem;aspect-ratio:1/1;height:auto;margin-inline:auto;overflow:visible}
.tb-rosepetal__grid circle{fill:none;stroke:var(--tb-hair);stroke-width:1}
.tb-rosepetal__grid circle.is-edge{stroke:color-mix(in oklab,var(--tb-hair) 70%,var(--tb-ink))}
.tb-rosepetal__hub{fill:var(--tb-ink);opacity:.5}
.tb-rosepetal__w{--h:calc(var(--tb-tone-h) + (var(--i) - (var(--n) - 1) / 2) * 19);
  fill:hsl(var(--h) 64% 58% / .88);stroke:hsl(var(--h) 70% 72%);stroke-width:1.2;
  transition:filter .16s var(--tb-ease)}
.tb-rosepetal__w.is-lead{fill:hsl(var(--h) 78% 60%);stroke:#fff;stroke-width:1.6}
.tb-rose:has(.tb-rosepetal__w[data-i="0"]:hover) .tb-rosepetal__w:not([data-i="0"]),
.tb-rose:has(.tb-legend li[data-i="0"]:hover) .tb-rosepetal__w:not([data-i="0"]){filter:saturate(.45) opacity(.55)}
.tb-rosepetal__w:hover{filter:brightness(1.12)}
.tb-rosepetal__num{font-family:var(--tb-font-mono);font-size:28px;fill:#fff;opacity:.9;
  paint-order:stroke;stroke:color-mix(in oklab,var(--tb-tone-2) 70%,#000);stroke-width:3px}
.tb-rosepetal__num.is-lead{opacity:1;font-size:33px}
.tb-rosepetal__name{font-family:var(--tb-font-head);font-weight:600;font-size:21px;fill:var(--tb-ink)}
.tb-rosepetal__val{font-family:var(--tb-font-mono);font-size:19px;fill:var(--tb-ink);opacity:.72}
.tb-rosepetal__lg.is-lead .tb-rosepetal__name{font-weight:700}
.tb-rosepetal__lg.is-lead .tb-rosepetal__val{fill:var(--tb-tone);opacity:1}
.tb-rosepetal__curve{font-family:var(--tb-font-head);font-weight:600;font-size:22px;fill:var(--tb-ink)}
.tb-rosepetal__curve.is-lead{font-weight:700;fill:var(--tb-tone)}

/* Две SVG на выбор раскладки: десктопная (прямые подписи) и мобильная
   (имена по дуге) — переключает медиа-запрос, не JS, вторая скрыта по
   умолчанию. Один и тот же приём, что у переключения тем на сайте. */
.tb-rosepetal--mob{display:none}
@media (max-width:640px){
  .tb-rose{grid-template-columns:minmax(0,1fr);gap:1rem}
  .tb-rosepetal:not(.tb-rosepetal--mob){display:none}
  .tb-rosepetal--mob{display:block;max-width:none}
}

.tb-rose__side{display:flex;flex-direction:column;gap:.875rem;min-width:0}
.tb-rose__total{display:flex;flex-direction:column;gap:.125rem}
.tb-rose__total b{font-family:var(--tb-font-mono);font-weight:400;font-size:2.25rem;line-height:1;
  color:var(--tb-ink);font-variant-numeric:tabular-nums}
.tb-rose__total span{font-family:var(--tb-font-mono);font-size:.625rem;
  letter-spacing:var(--tb-tracking-label);text-transform:uppercase;color:var(--tb-mute)}
.tb-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.tb-legend li{display:grid;grid-template-columns:1.375rem minmax(0,1fr) auto;gap:.625rem;align-items:baseline;
  padding:.3125rem .5rem;margin-inline:-.5rem;border-radius:8px;font-size:.9375rem;
  transition:background-color .16s var(--tb-ease)}
.tb-legend li:hover{background:var(--tb-raise)}
.tb-legend i[data-num]{--h:calc(var(--tb-tone-h) + (var(--i) - (var(--n) - 1) / 2) * 19);
  width:1.375rem;height:1.375rem;border-radius:7px;background:hsl(var(--h) 64% 58%);
  display:flex;align-items:center;justify-content:center}
.tb-legend i[data-num]::after{content:attr(data-num);font-family:var(--tb-font-mono);font-size:.75rem;color:#fff;opacity:.9}
.tb-legend li[data-lead] i[data-num]{background:hsl(var(--h) 78% 60%);box-shadow:0 0 0 2px color-mix(in oklab,var(--tb-ink) 20%,transparent)}
.tb-legend li[data-lead] b{font-weight:700}
.tb-legend b{font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-legend em{font-family:var(--tb-font-mono);font-style:normal;font-size:.8125rem;color:var(--tb-mute);font-variant-numeric:tabular-nums}
.tb-legend li[data-lead] em{color:var(--tb-tone)}
@media (max-width:640px){
  .tb-legend li{padding:.625rem .5rem;border-radius:10px;background:var(--tb-raise)}
  .tb-legend b{font-size:1rem;white-space:normal}
  .tb-legend em{font-size:.9375rem}
}