/* Шаг модуля направления в test.html (assets/test-items.js): слева материалы, справа условие и ответ.
   На узком экране у кейса вопрос идёт первым, у коротких наборов - текст или таблица. */
body.item-active .container { max-width: 1240px; }
body.item-active #questionContainer .question { padding: 0; border: 0; background: none; box-shadow: none; }
.ti-workspace { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 12px; align-items: start; margin-bottom: 16px; }
.ti-workspace.ti-no-materials { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.ti-pane { background: #fff; border: 1px solid #dde2eb; border-radius: 14px; min-width: 0; padding: 14px 18px 16px; }
.ti-materials { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto; }
.ti-materials-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.ti-eyebrow { margin: 0; font-size: 13px; font-weight: 700; color: #6848d9; text-transform: uppercase; letter-spacing: .04em; }
.ti-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ti-tab { appearance: none; border: 1px solid #d6dcea; background: #f7f8fc; color: #141722; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; width: auto; margin: 0; min-height: 34px; display: inline-flex; align-items: center; gap: 6px; }
.ti-tab[aria-selected="true"] { background: #315fd4; border-color: #315fd4; color: #fff; }
.ti-tab:focus-visible, .ti-rank-btn:focus-visible { outline: 3px solid #9db4f0; outline-offset: 2px; }
.ti-new { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; background: #ffe7c2; color: #7a4a00; border-radius: 999px; padding: 1px 7px; }
.ti-tab[aria-selected="true"] .ti-new { background: #fff; color: #315fd4; }
.ti-exhibit h3 { margin: 4px 0 10px; font-size: 17px; line-height: 1.35; }
.ti-text { margin: 0 0 10px; line-height: 1.55; white-space: pre-line; }
.ti-note { margin: 8px 0 0; font-size: 14px; color: #5f6878; line-height: 1.45; }
.ti-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.ti-table { border-collapse: collapse; font-size: 14px; min-width: 100%; }
table.ti-table th, table.ti-table td { padding: 7px 10px; border-bottom: 1px solid #edf0f5; text-align: left; vertical-align: top; }
table.ti-table thead th { background: #f7f8fc; font-weight: 700; font-size: 13px; color: #3c4353; }
table.ti-table tbody th { font-weight: 600; }
table.ti-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ti-chart { margin: 0; }
.ti-chart svg { width: 100%; height: auto; display: block; }
.ti-grid { stroke: #e6e9f0; stroke-width: 1; }
.ti-axis-label { font: 13px system-ui, sans-serif; fill: #5f6878; }
.ti-pie-legend { font-size: 14px; fill: #141722; }
.ti-value { font: 600 12px system-ui, sans-serif; fill: #141722; }
.ti-on-bar, .ti-pie-label { font: 700 13px system-ui, sans-serif; fill: #fff; }
.ti-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 6px 0 0; padding: 0; font-size: 14px; }
.ti-legend li { display: inline-flex; align-items: center; gap: 6px; }
.ti-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.ti-step h2.ti-question { margin: 6px 0 8px; font-size: 19px; line-height: 1.4; }
.ti-intro { margin: 6px 0 4px; padding: 8px 12px; background: #f7f8fc; border-radius: 10px; font-size: 14px; color: #3c4353; line-height: 1.45; }
.ti-context { margin: 0 0 8px; line-height: 1.5; color: #3c4353; }
.ti-type { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: #5f6878; }
.ti-choices { border: 0; margin: 0; padding: 0; min-width: 0; }
.ti-option { display: flex; gap: 10px; align-items: flex-start; }
.ti-option input { margin-top: 3px; flex: none; }
.ti-option input:disabled + span { color: #9aa3b3; }
.ti-counter { margin: 8px 0 0; font-size: 14px; color: #5f6878; }
table.ti-grid-answer { border-collapse: collapse; width: 100%; font-size: 15px; }
table.ti-grid-answer th, table.ti-grid-answer td { border-bottom: 1px solid #edf0f5; padding: 9px 6px; text-align: center; vertical-align: middle; }
table.ti-grid-answer thead th { font-size: 13px; color: #5f6878; font-weight: 700; }
table.ti-grid-answer .ti-grid-opt { text-align: left; font-weight: 500; line-height: 1.45; }
table.ti-grid-answer thead .ti-grid-opt { font-weight: 700; }
table.ti-grid-answer input { width: 20px; height: 20px; margin: 0; cursor: pointer; }
table.ti-statements thead th:not(.ti-grid-opt) { width: 84px; }
.ti-cell { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; min-width: 36px; min-height: 36px; }
/* Подпись варианта в ячейке видна только на телефоне: на широком экране её даёт заголовок столбца. */
.ti-cell-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ti-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
.ti-rank-row { display: flex; align-items: center; gap: 10px; border: 1px solid #dde2eb; border-radius: 12px; padding: 8px 10px; background: #fff; cursor: grab; }
/* Перестановка: карточка едет на новое место, соседние сдвигаются (FLIP в assets/test-items.js). Перемещённая
   карточка на время движения приподнята и подсвечена, чтобы глаз не терял её среди сдвигающихся. */
.ti-rank-row { position: relative; transition: transform .38s cubic-bezier(.4, 0, .2, 1), box-shadow .38s ease, border-color .38s ease, background-color .38s ease; will-change: transform; }
.ti-rank-row.ti-rank-moved { z-index: 2; border-color: #9db4f0; background: #f4f7ff; box-shadow: 0 10px 26px rgba(49, 95, 212, .22); }
/* Карточка в руке: поверх остальных, с глубокой тенью; положение, наклон и увеличение ведёт скрипт покадрово,
   поэтому перехода у transform нет. Отпущенная садится в ячейку с лёгким доводом. */
.ti-rank-row.ti-rank-held { z-index: 3; cursor: grabbing; border-color: #7f9be8; background: #fff; box-shadow: 0 18px 38px rgba(20, 23, 34, .2), 0 4px 10px rgba(49, 95, 212, .16); user-select: none; -webkit-user-select: none; }
.ti-rank-row.ti-rank-drop { z-index: 3; transition: transform .34s cubic-bezier(.2, 1.25, .35, 1), box-shadow .34s ease, border-color .34s ease, background-color .34s ease; }
.ti-rank-grip { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 38px; margin-left: -4px; margin-right: -4px; border-radius: 8px; cursor: grab; touch-action: none; }
.ti-rank-grip::before { content: ""; width: 14px; height: 22px; background: radial-gradient(circle, #a3adc4 1.5px, transparent 1.8px) 0 0 / 7px 7.33px; }
.ti-rank-held .ti-rank-grip { cursor: grabbing; }
@media (prefers-reduced-motion: reduce) { .ti-rank-row, .ti-rank-row.ti-rank-drop { transition: none; } }
.ti-rank-place { flex: none; width: 28px; height: 28px; border-radius: 50%; background: #eef2fd; color: #315fd4; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.ti-rank-text { flex: 1; line-height: 1.4; }
.ti-rank-controls { display: flex; gap: 4px; flex: none; }
.ti-rank-btn { appearance: none; border: 1px solid #d6dcea; background: #f7f8fc; border-radius: 8px; width: 38px; height: 38px; font-size: 18px; line-height: 1; cursor: pointer; margin: 0; padding: 0; color: #141722; }
.ti-rank-btn:disabled { opacity: .35; cursor: default; }
.ti-hint { margin: 0 0 10px; font-size: 14px; color: #5f6878; }
.ti-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ti-network-wrap { max-width: 100%; overflow-x: auto; }
.ti-network { display: block; width: 100%; min-width: 460px; height: auto; }
@media (max-width: 860px) {
  .ti-workspace { grid-template-columns: minmax(0, 1fr); }
  .ti-materials { position: static; max-height: none; }
  /* Кейс: сначала вопрос, под ним материалы - иначе до вопроса листать через все таблицы. */
  .ti-step-first .ti-step { order: -1; }
  .ti-pane { padding: 12px 12px 14px; }
  /* Таблица ответа становится карточками: текст на всю ширину, под ним кнопки с подписями. */
  table.ti-grid-answer, table.ti-grid-answer tbody, table.ti-grid-answer tr, table.ti-grid-answer th, table.ti-grid-answer td { display: block; width: auto; }
  table.ti-grid-answer thead { display: none; }
  table.ti-grid-answer tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 12px 0; border-bottom: 1px solid #edf0f5; }
  table.ti-statements tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  table.ti-grid-answer th.ti-grid-opt { grid-column: 1 / -1; border: 0; padding: 0 0 4px; }
  table.ti-grid-answer td { border: 0; padding: 0; }
  .ti-cell { display: flex; gap: 6px; width: 100%; min-height: 44px; padding: 4px 6px; border: 1px solid #d6dcea; border-radius: 10px; background: #f7f8fc; font-size: 13px; font-weight: 600; text-align: center; line-height: 1.2; box-sizing: border-box; }
  .ti-cell:has(input:checked) { border-color: #315fd4; background: #eef2fd; color: #1f3f9a; }
  .ti-cell { flex-direction: column; gap: 4px; padding: 6px 4px; font-size: 12px; }
  .ti-cell input { width: 18px; height: 18px; flex: none; }
  .ti-step .ti-table-wrap { overflow-x: visible; }
  .ti-cell-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .ti-step h2.ti-question { font-size: 17px; }
}