/* testbesplatno.ru — карточка теста с диаграммой: превью результата на обложке.
   Подключать после site.css / marks.css. */

/* Эталон обложки: одна крупная диаграмма (.tb-dp--big) + один вывод — имя лидера
   и его процент. Списка шкал на обложке нет: число осей уже равно числу пунктов. */

/* ══ обложка ═══════════════════════════════════════════════════════════ */
/* высота обложки одинаковая при любом числе пунктов — плитка не рвётся */
.tb-testcard--dia .tb-cover{container-type:inline-size;container-name:cover;height:auto;min-height:226px;padding:1rem 1.125rem 1.125rem;display:flex;flex-direction:column;gap:.625rem}
.tb-testcard--dia .tb-cover .tb-mark,
.tb-testcard--dia .tb-cover .tb-ci--lg,
.tb-testcard--dia .tb-cover .tb-icon--cover{opacity:.1}

.tb-dp{position:relative;z-index:2;display:flex;flex-direction:column;gap:.625rem;color:#fff;min-width:0;flex:1}
.tb-dp__cap{font-family:var(--tb-font-mono);font-size:.625rem;line-height:1;letter-spacing:var(--tb-tracking-label);
  text-transform:uppercase;color:rgba(255,255,255,.62)}
.tb-dp__body{display:block;min-width:0}

/* — крупная диаграмма без списка: основной вариант обложки — */
.tb-dp--big{gap:0}
.tb-dp--big .tb-dp__body{display:flex;align-items:center;gap:1rem;min-width:0;margin-top:.875rem}
/* размеры тянутся от ширины самой карточки (cqw): в три колонки на 1440 и в одну
   на 390 обложка выглядит одинаково — экранные медиазапросы тут не помогают,
   ширина колонки в обоих случаях почти одна и та же */
.tb-dp--big .tb-petal{position:static;width:clamp(112px,38cqw,152px);height:clamp(112px,38cqw,152px);
  margin:-.25rem 0 -.25rem -.5rem}
.tb-dp--big .tb-petal__grid{stroke-width:.7;stroke:rgba(255,255,255,.28)}
.tb-dp--big .tb-petal__w{stroke-width:1}
.tb-dp__who{display:flex;flex-direction:column;gap:.375rem;min-width:0;flex:1}
.tb-dp__whoname{font-family:var(--tb-font-head);font-weight:700;font-size:clamp(1.125rem,5.6cqw,1.5rem);
  line-height:1.2;letter-spacing:-.015em;
  overflow-wrap:anywhere;hyphens:auto;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tb-dp__whoval{font-family:var(--tb-font-mono);font-size:clamp(.75rem,2.6cqw,.9375rem);color:rgba(255,255,255,.8);white-space:nowrap}
/* — базовая геометрия диаграммы — */
.tb-petal{width:148px;height:148px;flex:none;overflow:visible}
.tb-petal__grid{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.2}
.tb-petal__axis{stroke:rgba(255,255,255,.22);stroke-width:1.2}
.tb-petal__shape{fill:rgba(255,255,255,.32);stroke:#fff;stroke-width:2.4;stroke-linejoin:round;
  transform-box:fill-box;transform-origin:center}
.tb-petal__dot{fill:rgba(255,255,255,.7)}
.tb-petal__dot.is-lead{fill:#fff}
.tb-petal__w{fill:rgba(255,255,255,.55);stroke:#fff;stroke-width:1}
.tb-petal__w.is-lead{fill:rgba(255,255,255,.85)}
.tb-petal__hub{fill:#fff}

/* — форма «зона по сумме баллов»: вместо списка — счёт и шкала — */
.tb-dp--score{justify-content:flex-start}
.tb-dp--score .tb-dp__body{margin-top:.75rem}
.tb-dp--score .tb-dp__zone{margin-top:.625rem}
.tb-dp__score{font-family:var(--tb-font-mono);font-size:2rem;line-height:1;letter-spacing:-.02em}
.tb-dp__zone{display:flex;height:6px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.22);margin-top:.5rem}
.tb-dp__zone i{flex:1;border-right:1px solid rgba(0,0,0,.18)}
.tb-dp__zone i:last-child{border-right:0}
.tb-dp__zones-cap{display:flex;justify-content:space-between;gap:.375rem;margin-top:.4375rem;
  font-family:var(--tb-font-mono);font-size:.5625rem;line-height:1.25;color:rgba(255,255,255,.62)}
.tb-dp__zones-cap span{flex:1;min-width:0}
.tb-dp__zones-cap span:nth-child(2){text-align:center}
.tb-dp__zones-cap span:last-child{text-align:right}
.tb-dp__zone i[data-on]{background:#fff}

/* ══ тело карточки: название в две строки, мета без дублей ══════════════ */
.tb-testcard--dia .tb-card__title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tb-testcard--dia .tb-card__desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tb-testcard--dia .tb-card__body{margin-top:auto}

/* ══ анимация: при наведении сектора вырастают по очереди веером ════════ */
.tb-petal__w{transform-box:fill-box;transform-origin:center;transform:scale(1)}
:is(a,.tb-card):is(:hover,:focus-visible) .tb-petal__w{animation:tb-dp-wedge .5s var(--tb-ease) backwards}
:is(a,.tb-card):is(:hover,:focus-visible) .tb-petal__w:nth-of-type(2){animation-delay:.05s}
:is(a,.tb-card):is(:hover,:focus-visible) .tb-petal__w:nth-of-type(3){animation-delay:.1s}
:is(a,.tb-card):is(:hover,:focus-visible) .tb-petal__w:nth-of-type(4){animation-delay:.15s}
:is(a,.tb-card):is(:hover,:focus-visible) .tb-petal__w:nth-of-type(5){animation-delay:.2s}
:is(a,.tb-card):is(:hover,:focus-visible) .tb-petal__w:nth-of-type(6){animation-delay:.25s}
@keyframes tb-dp-wedge{from{transform:scale(.5);opacity:.4}to{transform:scale(1);opacity:1}}

/* ══ телефон ═══════════════════════════════════════════════════════════ */
@media (max-width:640px){
  .tb-testcard--dia .tb-cover{min-height:0}
  .tb-testcard--dia .tb-cover{min-height:196px}
}
@media (prefers-reduced-motion:reduce){.tb-petal__w{animation:none!important}}

/* ══ диаграмма и легенда в результате — см. radar.js / radar.css ════════ */
.tb-facts{border:1px solid var(--tb-hair);border-radius:var(--tb-radius);overflow:hidden;background:var(--tb-card)}
.tb-facts__row{display:grid;grid-template-columns:14rem 1fr;gap:1rem;padding:.9375rem 1.375rem;border-top:1px solid var(--tb-hair);align-items:baseline}
.tb-facts__row:first-child{border-top:0}
.tb-facts__row dt{font-family:var(--tb-font-mono);font-size:var(--tb-fs-label);letter-spacing:var(--tb-tracking-label);text-transform:uppercase;color:var(--tb-mute)}
.tb-facts__row dd{margin:0;font-size:var(--tb-fs-ui)}
.tb-facts__row dd .tb-meta{font-size:1rem;color:var(--tb-ink)}
@media (max-width:640px){.tb-facts__row{grid-template-columns:1fr;gap:.25rem}}
.tb-outcome{display:flex;gap:1.375rem;align-items:center;padding:1.25rem 1.375rem;border:1px solid var(--tb-hair);border-radius:var(--tb-radius);background:var(--tb-card)}
@media (max-width:640px){.tb-outcome{flex-direction:column;align-items:flex-start}}