/* =============================================
   ТЕСТ НА КРИТИЧЕСКОЕ МЫШЛЕНИЕ (/test-na-kriticheskoe-myshlenie) — классы ct-*
   Подключается только на странице теста (<link> во вьюхе). Общие классы (.tl-*, .lt-*, .ey-*, .play-card, .opt-btn)
   берутся из style.css; здесь — «карточки источников» (чат, реклама, новость, правило, данные), графики и таблицы,
   варианты с буквами, экран результата с разбором ответов и блоки лендинга.
   ============================================= */

/* ---------- карточка задания ---------- */
.ct-card { text-align: left; }
.ct-count { font: 700 12px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ct-q { margin-top: 18px; font: 700 clamp(17px, 2.3vw, 21px)/1.3 var(--font-head); color: var(--dark); letter-spacing: -.01em; }

/* ---------- «источник»: чат, реклама, новость, правило ---------- */
.ct-case { margin-top: 12px; padding: 14px 16px 16px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--dark); text-align: left; }
.ct-src { display: flex; align-items: center; gap: 8px; font: 700 12px var(--font-head); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ct-src__ic { width: 18px; height: 18px; flex: none; color: var(--teal-deep); }
.ct-lines { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.ct-quote { margin: 0; font-size: 16.5px; line-height: 1.55; color: var(--dark); }
.ct-msg { max-width: 92%; align-self: flex-start; }
.ct-msg--b { align-self: flex-end; }
.ct-msg__who { font: 700 13px var(--font-head); color: var(--teal-deep); margin: 0 0 4px 4px; }
.ct-msg--b .ct-msg__who { color: var(--rust); text-align: right; margin: 0 4px 4px 0; }
.ct-msg__txt { background: var(--bg); border: 1px solid var(--line); border-radius: 4px 16px 16px 16px; padding: 10px 14px; font-size: 16px; line-height: 1.5; }
.ct-msg--b .ct-msg__txt { background: var(--dark); border-color: var(--dark); color: var(--cream); border-radius: 16px 4px 16px 16px; }
/* реклама — пунктирная «плашка» */
.ct-case--ad { border: 2px dashed rgba(251, 114, 95, .55); background: #fff; }
.ct-case--ad .ct-src { color: var(--rust); }
.ct-case--ad .ct-src__ic { color: var(--coral); }
.ct-case--ad .ct-quote { font: 600 17px/1.5 var(--font-body); }
/* новость — заголовок */
.ct-case--news .ct-quote { font: 700 clamp(16.5px, 2.2vw, 19px)/1.4 var(--font-head); letter-spacing: -.01em; }
.ct-case--news { border-top: 4px solid var(--dark); }
/* пост / отзыв / отчёт */
.ct-case--post .ct-src__ic, .ct-case--review .ct-src__ic { color: var(--coral); }
.ct-case--report { background: var(--bg); }
/* правила и факты */
.ct-case--rule { background: var(--bg); border-left: 4px solid var(--teal); }
.ct-rules { margin-top: 10px; }
.ct-rules p { margin: 0 0 8px; font-size: 16px; line-height: 1.5; }
.ct-rules p:last-child { margin-bottom: 0; }
.ct-rules .ct-rules__item { margin: 0 0 4px 12px; padding-left: 10px; border-left: 2px solid var(--line-strong); }
/* данные: карточка — сам график */
.ct-case.ct-case--data { padding: 0; border: none; background: none; }
.ct-case--data > .ct-src { display: none; }

/* ---------- графики и таблицы ---------- */
.ct-chart { margin-top: 4px; padding: 14px 14px 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); }
.ct-chart__t { font: 700 15px/1.3 var(--font-head); color: var(--dark); }
.ct-chart__q { margin-top: 6px; font-size: 14.5px; color: var(--ink-soft); font-style: italic; }
.ct-chart__n { margin-top: 8px; font-size: 13px; color: var(--muted); }
.ct-svg { display: block; width: 100%; max-width: 380px; height: auto; margin: 8px auto 0; }
.ct-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.ct-table th { font: 700 11.5px/1.3 var(--font-head); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--line-strong); vertical-align: bottom; }
.ct-table td { padding: 8px; border-bottom: 1px solid var(--line); color: var(--dark); }
.ct-table .num { text-align: right; }
.ct-table tr:last-child td { border-bottom: 0; }
.ct-table .ct-tfoot td { border-top: 2px solid var(--line-strong); background: var(--bg); }
.ct-hbars { margin-top: 10px; display: flex; flex-direction: column; gap: 9px; }
.ct-hbar { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(70px, 1fr) 58px; align-items: center; gap: 10px; }
.ct-hbar__l { font-size: 14.5px; line-height: 1.3; color: var(--dark); }
.ct-hbar__b { height: 12px; background: var(--bg-alt); border-radius: 999px; overflow: hidden; }
.ct-hbar__b i { display: block; height: 100%; background: var(--teal); border-radius: 999px; }
.ct-hbar__v { font: 700 14.5px var(--font-head); color: var(--dark); text-align: right; white-space: nowrap; }
/* вывод, который надо проверить */
.ct-claim { margin-top: 12px; padding: 12px 16px 14px; background: var(--dark); color: var(--cream); border-radius: var(--radius-md); }
.ct-claim__l { display: inline-block; font: 700 11px var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.ct-claim p { margin: 4px 0 0; font: 600 16.5px/1.45 var(--font-body); }

/* ---------- варианты ответа ---------- */
.ct-opts { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 14px; }
.ct-opts--f { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ct-opts--v { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opt-btn.ct-opt { display: flex; align-items: flex-start; gap: 12px; min-height: 56px; padding: 13px 16px; text-align: left; font: 500 15.5px/1.45 var(--font-body); color: var(--dark); background: #fff; border-radius: 14px; -webkit-tap-highlight-color: transparent; }
.opt-btn.ct-opt:hover { transform: none; border-color: var(--dark); }
.ct-let { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; border: 2px solid var(--line-strong); font: 700 13px var(--font-head); color: var(--ink-soft); margin-top: -2px; transition: background .15s, color .15s, border-color .15s; }
.ct-opt__t { min-width: 0; overflow-wrap: anywhere; }
.ct-opt__t b { display: block; font: 700 15.5px/1.3 var(--font-head); color: var(--dark); }
.ct-opt__d { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); }
.ct-opts--v .opt-btn.ct-opt { flex-direction: column; gap: 8px; }
.opt-btn.ct-opt.is-sel { border-color: var(--dark); background: rgba(32, 33, 63, .06); box-shadow: 0 0 0 3px rgba(32, 33, 63, .08); }
.opt-btn.ct-opt.is-sel .ct-let { background: var(--dark); border-color: var(--dark); color: var(--cream); }
.opt-btn.ct-opt:disabled { cursor: default; }
.opt-btn.ct-opt:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.ct-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; margin-top: 18px; }
.ct-hint { font-size: 13.5px; color: var(--muted); }
.play-btn.ct-next { min-height: 48px; padding: 13px 26px; margin-left: auto; }
.play-btn.ct-next:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- результат ---------- */
.ct-result .lt-eyebrow .iq-ic { width: 14px; height: 14px; vertical-align: -.15em; }
.ct-level { display: inline-block; margin-top: 12px; padding: 7px 16px; border-radius: 999px; font: 700 15px var(--font-head); }
.ct-level--5, .ct-level--4 { background: rgba(45, 178, 188, .18); color: var(--teal-deep); }
.ct-level--3 { background: var(--bg-alt); color: var(--dark); }
.ct-level--2, .ct-level--1 { background: rgba(251, 114, 95, .16); color: var(--rust); }
.ct-result .ey-interp + .ey-interp { margin-top: 10px; }
.ct-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
/* сработавшие ловушки — по разделам, внутри одинаковые плитки */
.ct-traps { display: grid; gap: 14px; }
.ct-traps__sec { margin-bottom: 6px; font: 700 12px var(--font-head); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ct-traps__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ct-trap { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 7px 11px; border-radius: 12px; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--coral); text-decoration: none; color: var(--dark); transition: border-color .15s; }
.ct-trap:hover { border-color: var(--coral); }
.ct-trap b { font: 700 13px/1.2 var(--font-head); color: var(--rust); }
.ct-trap span { margin-top: 2px; font-size: 13px; line-height: 1.3; color: var(--dark); overflow-wrap: anywhere; }

/* разбор ответов; одна ширина колонки у блоков результата и у разбора */
.ct-result .ey-block { max-width: 640px; }
.ct-review { max-width: 640px; margin: 34px auto 0; padding-top: 24px; border-top: 1px solid var(--line); text-align: left; }
/* свёрнутый разбор (IQREVIEW.collapsible, 27.09): рамку и отступ даёт сама плашка .iqr--fold */
.ct-review--fold { padding-top: 0; border-top: 0; }
.ct-review--fold > .iqr { margin-top: 0; }
.iqr--fold .ct-toggle { background: #fff; border: 1px solid var(--line); }
.ct-review__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.ct-review__title { margin: 0; font: 700 clamp(20px, 2.6vw, 24px) var(--font-head); letter-spacing: -.02em; }
.ct-toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--bg-alt); gap: 2px; max-width: 100%; }
.ct-toggle button { min-height: 44px; padding: 8px 14px; border: none; border-radius: 999px; background: transparent; color: var(--ink-soft); font: 600 13.5px var(--font-body); cursor: pointer; white-space: nowrap; }
.ct-toggle button.is-on { background: #fff; color: var(--dark); box-shadow: 0 4px 10px rgba(32, 33, 63, .1); }
.ct-toggle button:disabled { opacity: .5; cursor: default; }
.ct-rev { margin-top: 14px; padding: 16px; background: rgba(255, 255, 255, .8); border: 1px solid var(--line); border-left: 5px solid var(--teal); border-radius: var(--radius-md); scroll-margin-top: 90px; }
.ct-rev.is-bad { border-left-color: var(--coral); }
.ct-only-bad .ct-rev.is-ok { display: none; }
.ct-rev__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ct-rev__n { font: 700 15px var(--font-head); color: var(--dark); }
.ct-rev__sec { font-size: 13px; color: var(--muted); }
.ct-rev__st { margin-left: auto; padding: 3px 10px; border-radius: 999px; font: 700 11.5px var(--font-head); letter-spacing: .04em; background: rgba(45, 178, 188, .18); color: var(--teal-deep); }
.ct-rev.is-bad .ct-rev__st { background: rgba(251, 114, 95, .16); color: var(--rust); }
.ct-rev .ct-case { margin-top: 10px; }
.ct-rev .ct-quote, .ct-rev .ct-msg__txt, .ct-rev .ct-rules p { font-size: 15px; }
.ct-rev__q { margin-top: 12px; font: 700 15.5px/1.35 var(--font-head); color: var(--dark); }
.ct-rev__ans { display: grid; gap: 8px; margin-top: 10px; }
.ct-ans { padding: 9px 12px; border-radius: 12px; font-size: 15px; line-height: 1.45; color: var(--dark); }
.ct-ans span { display: block; font: 700 11px var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.ct-ans--mine { background: rgba(251, 114, 95, .1); }
.ct-ans--right { background: rgba(45, 178, 188, .13); }
.ct-rev__why, .ct-rev__miss { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }
.ct-rev__why b, .ct-rev__miss b { color: var(--dark); }
.ct-rev__miss { padding: 10px 12px; border-radius: 12px; background: rgba(251, 114, 95, .07); }
.ct-rev__more { margin-top: 8px; }
.ct-rev__more summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--teal-deep); font: 600 14px var(--font-body); list-style: none; }
.ct-rev__more summary::-webkit-details-marker { display: none; }
.ct-rev__more summary::before { content: '+'; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 999px; border: 1.5px solid currentColor; font: 700 13px/1 var(--font-head); }
.ct-rev__more[open] summary::before { content: '−'; }
.ct-rev__more ul { margin: 2px 0 0; padding-left: 18px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.ct-rev__more li + li { margin-top: 6px; }
.ct-rev__more li b { color: var(--dark); }

/* ---------- лендинг ---------- */
.ct-hero { --tl-glow: rgba(251, 114, 95, .12); }
.ct-art { padding: clamp(14px, 1.8vw, 20px); }
.tl-demo__task .ct-case { margin-top: 0; }
.tl-demo__task .ct-opts .opt-btn.tl-ok { border-color: var(--teal-deep); background: rgba(45, 178, 188, .14); }
.tl-demo__task .ct-opts .opt-btn.tl-no { border-color: var(--coral); background: rgba(251, 114, 95, .1); }
/* объяснение примера — под вариантами (на телефоне иначе оказывалось выше карточки, за краем экрана) */
.tl-demo__task .ct-demo-res { min-height: 0; margin: 14px 0 0; scroll-margin-bottom: 16px; }
.tl-demo__task .ct-demo-res:empty { margin: 0; }
.ct-fal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.ct-fal { padding: 18px 18px 16px; background: rgba(255, 255, 255, .8); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.ct-fal h3 { margin: 0; font: 700 17px/1.25 var(--font-head); color: var(--dark); }
.ct-fal__ex { margin: 10px 0 0; padding-left: 12px; border-left: 3px solid var(--coral); font-size: 15px; line-height: 1.5; color: var(--dark); }
.ct-fal__why { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }
.ct-fal__why b { color: var(--teal-deep); }

/* низкие телефоны: кнопка «Начать тест» на 12–16 px выше сгиба (общий отступ давал 9 px) */
@media (max-width: 767px) and (max-height: 720px) { .ct-hero .tl-hero__cta { padding-bottom: 27px; } }

/* ---------- адаптив ---------- */
@media (max-width: 999px) { .ct-fal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .ct-opts--f { grid-template-columns: 1fr; }
    .ct-opts--v { grid-template-columns: 1fr; }
    .ct-opts--v .opt-btn.ct-opt { flex-direction: row; gap: 12px; }
}
@media (max-width: 560px) {
    .ct-fal-grid { grid-template-columns: 1fr; }
    .lt-live .ct-card { padding: 18px 12px 18px; }
    .ct-case { padding: 12px 12px 14px; }
    .ct-msg { max-width: 100%; }
    .ct-chart { padding: 12px 6px 10px; }
    .ct-chart__t, .ct-chart__q, .ct-chart__n { padding-inline: 4px; }
    /* графики: на узком экране viewBox ужимается — подписи крупнее, чтобы оставаться ≥ 11 px */
    .ct-svg { margin-top: 6px; }
    .ct-svg .ct-tk { font-size: 16px; }
    .ct-svg .ct-tv { font-size: 18px; }
    .ct-svg .ct-tl { font-size: 17px; }
    .ct-svg .ct-te { font-size: 17px; }
    .ct-svg .ct-tp { font-size: 15.5px; }
    .ct-traps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ct-trap { padding: 7px 9px; }
    .ct-hbar { grid-template-columns: minmax(0, 1fr) 52px; grid-template-areas: 'l l' 'b v'; row-gap: 4px; }
    .ct-hbar__l { grid-area: l; }
    .ct-hbar__b { grid-area: b; }
    .ct-hbar__v { grid-area: v; }
    .ct-table { font-size: 14px; }
    .ct-table th { font-size: 11.5px; letter-spacing: .02em; padding: 6px 5px; }
    .ct-table td { padding: 7px 5px; }
    .ct-actions { flex-direction: column-reverse; align-items: stretch; }
    .play-btn.ct-next { width: 100%; margin-left: 0; }
    .ct-hint { text-align: center; }
    .lt-live .ct-result.play-card { padding-left: 12px; padding-right: 12px; }
    .ct-rev { padding: 14px 8px; border-left-width: 4px; }
    .ct-rev .ct-chart { padding: 10px 2px 8px; }
    /* в разборе график ещё уже — подписи ещё немного крупнее (≥ 10 px на 320) */
    .ct-rev .ct-svg .ct-tk { font-size: 17px; }
    .ct-rev .ct-svg .ct-tv { font-size: 19px; }
    .ct-rev .ct-svg .ct-tl, .ct-rev .ct-svg .ct-te { font-size: 18px; }
    .ct-rev .ct-svg .ct-tp { font-size: 16.5px; }
    .ct-review__top { flex-direction: column; align-items: stretch; }
    .ct-toggle { display: flex; }
    .ct-toggle button { flex: 1 1 0; min-width: 0; padding: 6px 8px; font-size: 13px; line-height: 1.2; white-space: normal; }
}
/* «Выйти из теста» в шапке раннера — палец должен попадать уверенно */
#criticaltest .iq-exit { display: inline-flex; align-items: center; min-height: 44px; }

.ct-result .lt-retake { min-height: 44px; padding: 10px 18px; }

/* блок «4 раздела» на планшетах/ноутбуках 768–1099 px: 2 × 2 вместо 3 + 1 (общее правило .tl-cards--4 даёт 3 колонки) */
@media (min-width: 768px) and (max-width: 1099px) { .tl-cards.ct-cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* заголовок «Верных из 20» в таблице уровней — в одну строку */
.tl-table th.ct-nowrap { white-space: nowrap; }