/* testbesplatno.ru — компоненты. Подключать после tokens.css */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tb-paper);color:var(--tb-ink);font-family:var(--tb-font-body);font-size:var(--tb-fs-body);line-height:var(--tb-lh-body);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--tb-font-head);margin:0;text-wrap:pretty}
h1{font-weight:800;font-size:var(--tb-fs-h1);line-height:var(--tb-lh-h1);letter-spacing:var(--tb-tracking-tight)}
h2{font-weight:700;font-size:var(--tb-fs-h2);line-height:var(--tb-lh-h2);letter-spacing:var(--tb-tracking-head)}
h3{font-weight:600;font-size:var(--tb-fs-h3);line-height:var(--tb-lh-h3);letter-spacing:var(--tb-tracking-head)}
p{margin:0}
a{color:inherit;text-decoration:none}
a:hover{color:var(--tb-intellect)}
:focus-visible{outline:2px solid var(--tb-tone);outline-offset:3px;border-radius:4px}
img{max-width:100%;display:block}

/* ── каркас ───────────────────────────────────────────── */
.tb-wrap{max-width:var(--tb-content);margin:0 auto;padding-inline:var(--tb-gutter)}
.tb-stack{display:flex;flex-direction:column;gap:var(--tb-sp-4)}
.tb-section{margin-top:var(--tb-sp-8)}
.tb-prose{max-width:74ch;display:flex;flex-direction:column;gap:var(--tb-sp-3)}
.tb-prose p{font-size:var(--tb-fs-body);line-height:var(--tb-lh-body)}
.tb-prose h2{margin-top:var(--tb-sp-3)}
.tb-prose ul{margin:0;padding-left:1.375rem;display:flex;flex-direction:column;gap:.625rem}
.tb-narrow{max-width:68ch;margin-inline:auto}   /* текстовые страницы: строка ≤70 симв. */
.tb-pull{border-left:3px solid var(--tb-tone);padding:.375rem 0 .375rem 1.25rem;font-family:var(--tb-font-head);font-weight:600;font-size:1.375rem;line-height:1.35;letter-spacing:var(--tb-tracking-head)}
.tb-note{background:var(--tb-card);border:1px solid var(--tb-hair);border-radius:var(--tb-radius);padding:var(--tb-sp-4) var(--tb-sp-4);display:flex;flex-direction:column;gap:.375rem}

/* ── шапка, спектральная полоса, подвал ───────────────── */
.tb-header{background:var(--tb-card);border-bottom:1px solid var(--tb-hair);position:sticky;top:0;z-index:20}
.tb-header__row{max-width:var(--tb-content);margin:0 auto;padding-inline:var(--tb-gutter);height:72px;display:flex;align-items:center;gap:2.5rem}
.tb-logo{display:flex;align-items:center;gap:.625rem;flex:none}
.tb-logo__mark{display:flex;align-items:flex-end;gap:2.5px;height:24px;flex:none}
.tb-logo__mark i{display:block;width:3.5px;border-radius:1px}
.tb-logo__mark i:nth-child(1){height:38%;background:var(--tb-relations)}
.tb-logo__mark i:nth-child(2){height:58%;background:var(--tb-fun)}
.tb-logo__mark i:nth-child(3){height:76%;background:var(--tb-health)}
.tb-logo__mark i:nth-child(4){height:100%;background:var(--tb-intellect)}
.tb-logo__mark i:nth-child(5){height:82%;background:var(--tb-personality)}
.tb-logo__mark i:nth-child(6){height:60%;background:var(--tb-psyche)}
.tb-logo__word{font-family:var(--tb-font-head);font-weight:700;font-size:1.25rem;letter-spacing:-.03em;line-height:1}
.tb-logo__word span{font-weight:500;color:var(--tb-mute)}
.tb-nav{display:flex;align-items:center;gap:1.625rem;font-size:var(--tb-fs-ui);font-weight:500}
.tb-nav a{display:flex;align-items:center;gap:.5rem;min-height:var(--tb-hit)}
.tb-nav a[aria-current="page"]{font-weight:600}
.tb-nav__dot{width:8px;height:8px;border-radius:50%;flex:none}
.tb-nav__all{color:var(--tb-mute)}
.tb-spectrum{display:flex;height:3px}
.tb-spectrum i{flex:1;opacity:.28}
.tb-spectrum i[data-active]{flex:1.6;opacity:1}
.tb-burger{width:38px;height:38px;border:1px solid var(--tb-hair);border-radius:11px;background:var(--tb-field);display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;margin-left:auto}
.tb-burger i{width:16px;height:1.6px;background:var(--tb-ink)}
.tb-footer{background:var(--tb-card);border-top:1px solid var(--tb-hair);margin-top:var(--tb-sp-9)}
.tb-footer__cols{max-width:var(--tb-content);margin:0 auto;padding:var(--tb-sp-7) var(--tb-gutter) var(--tb-sp-5);display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
.tb-footer__col{display:flex;flex-direction:column;gap:.625rem;font-size:var(--tb-fs-ui)}
.tb-footer__bottom{max-width:var(--tb-content);margin:0 auto;padding:0 var(--tb-gutter) var(--tb-sp-6)}
.tb-footer__bottom > div{border-top:1px solid var(--tb-hair);padding-top:1.125rem;display:flex;gap:1.625rem;flex-wrap:wrap;align-items:baseline}
.tb-disclaimer{font-size:.8125rem;line-height:1.6;color:var(--tb-mute);max-width:78ch}
.tb-disclaimer b{font-family:var(--tb-font-mono);font-weight:400;color:var(--tb-ink)}

/* ── типовые мелочи ───────────────────────────────────── */
.tb-meta,.tb-label{font-family:var(--tb-font-mono)}
.tb-meta{font-size:var(--tb-fs-meta);color:var(--tb-mute)}
.tb-label{font-size:var(--tb-fs-label);letter-spacing:var(--tb-tracking-label);text-transform:uppercase;color:var(--tb-mute)}
.tb-label--tone{color:var(--tb-tone)}
.tb-crumbs{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:var(--tb-mute)}
.tb-crumbs [aria-current]{color:var(--tb-ink)}
.tb-lead{font-size:var(--tb-fs-lead);line-height:var(--tb-lh-lead);color:var(--tb-mute);max-width:70ch}

/* ── кнопки ───────────────────────────────────────────── */
.tb-btn{min-height:var(--tb-tap);padding-inline:1.75rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:var(--tb-radius-sm);background:var(--tb-ink);color:var(--tb-paper);font-family:var(--tb-font-head);font-weight:600;font-size:1rem;cursor:pointer;transition:transform .12s var(--tb-ease),opacity .12s}
.tb-btn:hover{opacity:.9}
.tb-btn:active{transform:translateY(1px)}
.tb-btn[disabled],.tb-btn[aria-disabled="true"]{background:var(--tb-hair);color:var(--tb-mute);pointer-events:none}
.tb-btn--ghost{background:var(--tb-card);color:var(--tb-ink);border-color:var(--tb-hair)}
.tb-btn--ghost:hover{border-color:var(--tb-ink);opacity:1}
.tb-btn--block{width:100%}

/* ── поиск ────────────────────────────────────────────── */
.tb-search{display:flex;align-items:center;gap:.875rem;height:64px;padding:0 .5rem 0 1.25rem;border:1px solid var(--tb-hair);border-radius:var(--tb-radius);background:var(--tb-field);box-shadow:var(--tb-shadow)}
.tb-search:focus-within{border-color:var(--tb-ink);box-shadow:var(--tb-shadow-hover)}
.tb-search__icon{width:17px;height:17px;border:1.8px solid var(--tb-mute);border-radius:50%;flex:none}
.tb-search input{flex:1;min-width:0;border:0;background:none;color:var(--tb-ink);font:inherit;font-size:1.125rem;outline:none}
.tb-search input::placeholder{color:var(--tb-mute)}
.tb-search__clear{width:var(--tb-hit);height:var(--tb-hit);border:0;background:none;color:var(--tb-mute);cursor:pointer}
.tb-search--sm{height:40px;min-width:230px;border-radius:var(--tb-radius-sm);box-shadow:none;padding-inline:.875rem}
.tb-search--sm input{font-size:var(--tb-fs-ui)}

/* ── чипы разделов ────────────────────────────────────── */
.tb-chips{display:flex;gap:.625rem;flex-wrap:wrap}
.tb-chip{min-height:36px;padding:0 .9375rem;display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--tb-hair);border-radius:999px;background:var(--tb-card);font-size:var(--tb-fs-ui);font-weight:500}
.tb-chip:hover{border-color:var(--tb-ink);color:inherit}
.tb-chip[aria-pressed="true"]{border-color:var(--tb-tone);background:var(--tb-selected-wash)}
.tb-chip i{width:8px;height:8px;border-radius:50%;background:var(--tb-tone);flex:none}

/* ── обложка и знак раздела (спец. см. marks.css) ─────── */
.tb-cover{position:relative;overflow:hidden;background:linear-gradient(150deg,var(--tb-tone),var(--tb-tone-2));container-type:size}

/* ── карточки ─────────────────────────────────────────── */
.tb-card{background:var(--tb-card);border:1px solid var(--tb-hair);border-radius:var(--tb-radius);overflow:hidden;display:flex;flex-direction:column}
.tb-card--raise{box-shadow:var(--tb-shadow)}
.tb-card--dashed{border-style:dashed}
.tb-card__body{padding:var(--tb-sp-4) 1.375rem 1.375rem;display:flex;flex-direction:column;gap:.5625rem}
a.tb-card,.tb-card--link{transition:box-shadow .16s var(--tb-ease),transform .16s var(--tb-ease),border-color .16s}
a.tb-card:hover,.tb-card--link:hover{box-shadow:var(--tb-shadow-hover);transform:translateY(-2px);border-color:var(--tb-tone);color:inherit}
a.tb-card:active,.tb-card--link:active{transform:none}
.tb-card__title{font-family:var(--tb-font-head);font-weight:600;font-size:var(--tb-fs-h3);line-height:1.15;letter-spacing:var(--tb-tracking-head)}
.tb-card__desc{font-size:var(--tb-fs-ui);color:var(--tb-mute)}
.tb-grid{display:grid;gap:1.375rem}
.tb-grid--3{grid-template-columns:repeat(3,1fr)}
.tb-grid--4{grid-template-columns:repeat(4,1fr);gap:1.25rem}
.tb-grid--6{grid-template-columns:repeat(6,1fr);gap:.75rem}
.tb-testcard .tb-cover{height:170px}
.tb-tile .tb-cover{height:92px}
.tb-hub .tb-cover{height:140px}

/* ── плашка-герой ─────────────────────────────────────── */
.tb-hero{display:grid;grid-template-columns:400px 1fr;background:var(--tb-card);border:1px solid var(--tb-hair);border-radius:var(--tb-radius);overflow:hidden;box-shadow:var(--tb-shadow)}
.tb-hero .tb-cover{min-height:300px;height:100%}
.tb-hero__body{padding:2.5rem 2.75rem;display:flex;flex-direction:column;gap:1rem;justify-content:center}
.tb-hero__title{font-family:var(--tb-font-head);font-weight:700;font-size:2.5rem;line-height:1.05;letter-spacing:var(--tb-tracking-tight);max-width:22ch}
.tb-hero__cta{display:flex;align-items:center;gap:1.25rem;margin-top:.375rem;flex-wrap:wrap}

/* ── экран вопросов ───────────────────────────────────── */
.tb-quizbar{background:var(--tb-card);border-bottom:1px solid var(--tb-hair);position:sticky;top:0;z-index:15}
.tb-quizbar__row{max-width:var(--tb-content);margin:0 auto;padding:1.125rem var(--tb-gutter) 1rem;display:flex;flex-direction:column;gap:.625rem}
.tb-progress{height:6px;border-radius:999px;background:var(--tb-paper);overflow:hidden}
.tb-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--tb-tone),var(--tb-tone-2));transition:width .3s var(--tb-ease)}
.tb-quiz{max-width:860px;margin:0 auto;padding-top:var(--tb-sp-6);display:flex;flex-direction:column;gap:1.125rem}
.tb-q{background:var(--tb-card);border:1px solid var(--tb-hair);border-radius:var(--tb-radius);padding:var(--tb-sp-5) 1.75rem;display:flex;flex-direction:column;gap:1rem}
.tb-q__head{display:flex;align-items:baseline;gap:.875rem}
.tb-q__text{font-family:var(--tb-font-head);font-weight:600;font-size:1.4375rem;line-height:1.25;letter-spacing:var(--tb-tracking-head);max-width:56ch}
.tb-answers{display:flex;flex-direction:column;gap:.5rem}
.tb-answer{min-height:var(--tb-tap);display:flex;align-items:center;gap:.875rem;padding:0 1.125rem;border:1px solid var(--tb-hair);border-radius:var(--tb-radius-sm);background:var(--tb-card);font-size:1rem;cursor:pointer;text-align:left;transition:border-color .12s,background .12s}
.tb-answer:hover{border-color:var(--tb-tone)}
.tb-answer__dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--tb-hair);display:flex;align-items:center;justify-content:center;flex:none}
.tb-answer__dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--tb-tone);opacity:0}
.tb-answer[aria-checked="true"]{border-color:var(--tb-tone);background:var(--tb-selected-wash);font-weight:500}
.tb-answer[aria-checked="true"] .tb-answer__dot{border-color:var(--tb-tone)}
.tb-answer[aria-checked="true"] .tb-answer__dot::after{opacity:1}
.tb-quiz__foot{display:flex;align-items:center;gap:1.25rem;margin-top:.375rem;flex-wrap:wrap}
.tb-quiz__hint{font-size:var(--tb-fs-ui);color:var(--tb-mute)}

/* ── результат ────────────────────────────────────────── */
.tb-result{background:var(--tb-card);border:1px solid var(--tb-hair);border-radius:var(--tb-radius);overflow:hidden;box-shadow:var(--tb-shadow)}
.tb-result__ribbon{height:8px;background:linear-gradient(90deg,var(--tb-tone),var(--tb-tone-2))}
.tb-result__body{padding:2rem 2.125rem}
.tb-scales{display:grid;grid-template-columns:1fr 1fr;gap:1.625rem 2.125rem;margin-top:1.75rem}
.tb-scale{display:flex;flex-direction:column;gap:.5rem}
.tb-scale__row{display:flex;align-items:baseline;justify-content:space-between;font-size:var(--tb-fs-ui);font-weight:500}
.tb-scale__track{height:12px;border-radius:999px;background:var(--tb-paper);overflow:hidden;position:relative}
.tb-scale__track i{display:block;height:100%;background:var(--tb-scale-color,var(--tb-tone))}
.tb-scale__track::after{content:"";position:absolute;left:50%;top:-3px;width:1px;height:18px;background:var(--tb-hair)}
.tb-scale__poles{display:flex;justify-content:space-between;font-family:var(--tb-font-mono);font-size:var(--tb-fs-label);color:var(--tb-mute)}
.tb-zone{display:flex;height:14px;border-radius:999px;overflow:hidden}
.tb-zone i{flex:1}
.tb-zone__marker{position:absolute;top:-7px;width:4px;height:28px;border-radius:2px;background:var(--tb-ink);box-shadow:0 0 0 3px var(--tb-card)}
.tb-leads{display:flex;gap:1.375rem;margin-top:1.875rem;padding-top:1.625rem;border-top:1px solid var(--tb-hair);flex-wrap:wrap}
.tb-leads > div{flex:1 1 300px;display:flex;flex-direction:column;gap:.5rem}

/* кризисный блок: заметный, но не алерт */
.tb-crisis{background:var(--tb-card);border:1px solid var(--tb-hair);border-left:4px solid var(--tb-psyche);border-radius:var(--tb-radius);padding:1.5rem 1.75rem;display:flex;gap:1.25rem;align-items:flex-start}
.tb-crisis__mark{width:40px;height:40px;border-radius:var(--tb-radius-xs);flex:none}
.tb-crisis__phone{font-family:var(--tb-font-mono);font-size:1.375rem;letter-spacing:-.01em}

/* ── поиск: результаты ────────────────────────────────── */
.tb-results{display:flex;flex-direction:column;gap:.75rem}
.tb-result-row{display:grid;grid-template-columns:104px 1fr auto;gap:1.375rem;align-items:center;background:var(--tb-card);border:1px solid var(--tb-hair);border-radius:var(--tb-radius);padding:.875rem;overflow:hidden}
.tb-result-row:hover{border-color:var(--tb-tone);box-shadow:var(--tb-shadow);color:inherit}
.tb-result-row .tb-cover{height:76px;border-radius:var(--tb-radius-xs)}
.tb-type{font-family:var(--tb-font-mono);font-size:.625rem;letter-spacing:var(--tb-tracking-label);color:var(--tb-mute);border:1px solid var(--tb-hair);border-radius:6px;padding:3px 7px}

/* ── FAQ ──────────────────────────────────────────────── */
.tb-faq{background:var(--tb-card);border:1px solid var(--tb-hair);border-radius:var(--tb-radius);overflow:hidden;max-width:860px}
.tb-faq details{border-bottom:1px solid var(--tb-hair)}
.tb-faq details:last-child{border-bottom:0}
.tb-faq summary{list-style:none;cursor:pointer;padding:1.25rem 1.625rem;min-height:var(--tb-hit);display:flex;align-items:center;justify-content:space-between;gap:1.25rem;font-family:var(--tb-font-head);font-weight:600;font-size:1.0625rem}
.tb-faq summary::-webkit-details-marker{display:none}
.tb-faq summary::after{content:"";width:13px;height:13px;border-right:2px solid var(--tb-mute);border-bottom:2px solid var(--tb-mute);transform:rotate(45deg);flex:none;margin-right:6px;transition:transform .18s var(--tb-ease)}
.tb-faq details[open] summary::after{transform:rotate(-135deg)}
.tb-faq__answer{padding:0 1.625rem 1.25rem;font-size:var(--tb-fs-ui);line-height:1.6;color:var(--tb-mute);max-width:74ch}

/* ── источники, пустые состояния ──────────────────────── */
.tb-sources{background:var(--tb-card);border:1px solid var(--tb-hair);border-radius:var(--tb-radius);padding:1.625rem 1.75rem;display:flex;flex-direction:column;gap:.875rem}
.tb-source{display:flex;gap:.875rem;align-items:baseline;border-bottom:1px solid var(--tb-hair);padding-bottom:.75rem}
.tb-source:last-of-type{border-bottom:0;padding-bottom:0}
.tb-empty{border:1px dashed var(--tb-hair);border-radius:var(--tb-radius);background:var(--tb-card);padding:2.125rem 2rem;display:flex;align-items:center;gap:1.625rem;flex-wrap:wrap}
.tb-disclaimer-box{border:1px dashed var(--tb-hair);border-radius:var(--tb-radius);padding:1.375rem 1.625rem;font-size:var(--tb-fs-ui);line-height:1.65;color:var(--tb-mute);max-width:82ch}

/* ── мобильная раскладка ──────────────────────────────── */
@media (max-width:960px){
  :root{--tb-fs-h1:2.5rem;--tb-fs-h2:1.5rem;--tb-content:100%}
  .tb-grid--3,.tb-grid--4{grid-template-columns:1fr 1fr}
  .tb-grid--6{grid-template-columns:1fr 1fr 1fr}
  .tb-hero{grid-template-columns:1fr}
  .tb-hero .tb-cover{min-height:180px}
  .tb-hero__body{padding:1.25rem}
  .tb-scales{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--tb-fs-h1:2.125rem;--tb-fs-lead:1rem;--tb-gutter:1rem}
  .tb-nav{display:none}                      /* уходит в бургер-панель */
  .tb-burger{display:flex}
  .tb-header__row{height:60px;gap:.75rem}
  .tb-grid--3,.tb-grid--4{grid-template-columns:1fr}
  .tb-grid--6{grid-template-columns:1fr 1fr}
  .tb-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--tb-gutter)*-1);padding-inline:var(--tb-gutter)}
  .tb-chips::-webkit-scrollbar{display:none}
  .tb-search{height:54px;font-size:1rem}
  .tb-search .tb-btn{display:none}           /* поиск отправляется с клавиатуры */
  .tb-result-row{grid-template-columns:72px 1fr;row-gap:.5rem}
  .tb-result-row .tb-meta{grid-column:2}
  .tb-footer__cols{grid-template-columns:1fr;gap:1.5rem}
  .tb-quiz__foot{position:sticky;bottom:0;background:var(--tb-paper);padding-block:.75rem;flex-direction:column;align-items:stretch}
  .tb-q{padding:1.125rem}
  .tb-q__text{font-size:1.25rem}
  .tb-result__body{padding:1.25rem}
  .tb-crisis{flex-direction:column;gap:.875rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}