/* ==========================================================================
   POKER TRAINER — app.css · компоненты поверх tokens.css (дизайн-система)
   Ревизия 2026-07-14 по критике заказчика :
     - главный экран = ДРЕВО (курс -> разделы -> тесты), компактные строки;
     - экран сравнения = левый список категорий рук + 2 превью-матрицы;
     - новые типы вопросов = 2 диапазона сверху + 3 или 6 кнопок.
   tokens.css НЕ трогаем — только добавляем.
   ========================================================================== */

/* ---------- Демо-страницы: статичный топбар/низ (для скринов) ---------- */
.demo-static .topbar,
.demo-static .bottom { position: static; }

/* ======================================================================
   1. ДРЕВОВИДНЫЙ КАТАЛОГ (главный экран)
   Курс -> Раздел -> Тест. Аккордеон на нативных <details> (без JS,
   масштабируется на сотни тестов, строка теста компактная).
   ====================================================================== */
.tree { margin-top: 6px; }

/* Узел КУРСА */
.course {
  background: var(--ink-800);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.course + .course { margin-top: var(--gap); }
.course > summary,
.section > summary { list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.course > summary::-webkit-details-marker,
.section > summary::-webkit-details-marker { display: none; }

.course > summary {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
}
.course .c-ico {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
  background: var(--ink-750); border: 1px solid var(--line);
}
.course .c-body { flex: 1; min-width: 0; }
.course .c-title { font-family: var(--font-display); font-weight: 600; font-size: 16px; line-height: 1.2; }
.course .c-meta { font-family: var(--font-data); font-size: 11px; color: var(--mute); margin-top: 3px; }
.course .chev,
.section .chev { color: var(--mute); font-size: 15px; transition: transform .18s ease; flex: 0 0 auto; }
.course[open] > summary .chev,
.section[open] > summary .chev { transform: rotate(90deg); }

.course[open] > summary { border-bottom: 1px solid var(--line-soft); }

/* Прогресс-бар курса */
.c-progress { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.c-progress .ring {
  font-family: var(--font-data); font-size: 11px; font-weight: 600; color: var(--call);
}

/* Узел РАЗДЕЛА (вложен в курс) */
.section { border-top: 1px solid var(--line-soft); }
.course > .section:first-of-type { border-top: 0; }
.section > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px 11px 16px;
}
.section .s-ico { font-size: 15px; flex: 0 0 auto; }
.section .s-title { flex: 1; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--bone); }
.section .s-count {
  font-family: var(--font-data); font-size: 10.5px; color: var(--mute);
  padding: 2px 7px; border-radius: 999px; background: var(--ink-750); border: 1px solid var(--line-soft);
}
.section[open] > summary { color: var(--bone); }

/* Список тестов внутри раздела */
.tests { padding: 2px 10px 8px; }

/* КОМПАКТНАЯ строка теста (главное требование: не громоздкая карточка) */
.trow {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.trow + .trow { border-top: 1px solid var(--line-soft); border-radius: 0; }
.trow:hover { background: var(--ink-750); border-radius: var(--r-md); }
.trow:active { transform: scale(.995); }
.trow .dot { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--mute-deep); }
.trow.new .dot { background: var(--gold); box-shadow: 0 0 6px rgba(242,193,78,.5); }
.trow .name { flex: 1; min-width: 0; font-size: 14px; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trow .qn { font-family: var(--font-data); font-size: 11px; color: var(--mute); }
.trow .acc { font-family: var(--font-data); font-size: 11px; font-weight: 600; }
.trow .acc.hi { color: var(--call); }
.trow .acc.mid { color: var(--gold); }
.trow .acc.lo { color: var(--raise); }
.trow .go { color: var(--mute); font-size: 15px; }
.trow .tag-new {
  font-family: var(--font-data); font-size: 9px; font-weight: 600; letter-spacing: .08em;
  color: var(--gold); border: 1px solid var(--gold-d); border-radius: 999px; padding: 1px 6px;
  background: rgba(242,193,78,.08); text-transform: uppercase;
}

/* Заглушка «скоро» — курс в разработке (демонстрирует масштаб дерева) */
.course.soon { opacity: .6; }
.course.soon .c-ico { color: var(--mute); }
.badge-soon {
  font-family: var(--font-data); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px;
}

/* ======================================================================
   2. ПАРА ПРЕВЬЮ-МАТРИЦ (2 диапазона сверху) — на всех типах вопросов
   ====================================================================== */
.mx-row { display: flex; gap: 8px; margin-top: 10px; }
.mx-col { flex: 1; min-width: 0; position: relative; }
.mx-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.mx-label {
  font-family: var(--font-data); font-weight: 600; font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase;
}
.mx-col.sb  .mx-label { color: var(--raise); }
.mx-col.btn .mx-label { color: var(--call); }
.mx-zoom {
  width: 18px; height: 18px; border-radius: 5px; border: 1px solid var(--line);
  background: var(--ink-750); color: var(--mute); font-size: 10px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
/* Две матрицы бок о бок в 390px — ячейка узкая, подпись мельче/плотнее.
   Не меняем tokens.css/.matrix--compact (та для одиночной матрицы). */
.mx-row .matrix { font-size: 6.1px; }
.mx-row .matrix .cell .lbl { font-size: 6.1px; letter-spacing: -.06em; }

/* Превью «состав диапазона» — зелёная заливка (референс заказчика IMG_7673),
   но нашим нефритом из дизайн-системы (--call), не чужим цветом. */
.mx-green .cell.is-inrange { background: color-mix(in srgb, var(--call) 46%, var(--ink-800)); }
.mx-green .cell.is-inrange .lbl { color: var(--bone); }

/* ---------- Борд ---------- */
.board-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.board-row .board { gap: 6px; }
.board-row .hint { font-family: var(--font-data); font-size: 10px; color: var(--mute-deep); letter-spacing: .04em; }

/* ======================================================================
   3. ЭКРАН «У КОГО БОЛЬШЕ …»: левый список категорий + правый ответ SB/BTN
   ====================================================================== */
.qsplit { display: flex; gap: 10px; margin-top: 12px; align-items: stretch; }

/* Левая колонка — список категорий рук (Straight / Set / Two pair …) */
.catlist { flex: 0 0 128px; display: flex; flex-direction: column; gap: 6px; }
.cat {
  appearance: none; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 11px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--ink-750); color: var(--bone-dim);
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  transition: border-color .12s, background .12s, color .12s;
}
.cat .rk { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 2px; background: var(--mute-deep); }
.cat.is-active { color: var(--bone); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--ink-750)); }
.cat.is-active .rk { background: var(--gold); }
.cat:hover { background: var(--ink-700); }
.cat.is-muted { opacity: .4; }

/* Правая колонка — крупные ответы SB / BTN */
.answers2 { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ans {
  appearance: none; cursor: pointer; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--ink-750);
  color: var(--bone); font-family: var(--font-display); font-weight: 700; font-size: 20px;
  transition: transform .12s, background .12s, border-color .12s;
}
.ans .who { font-size: 20px; }
.ans .sub { font-family: var(--font-data); font-weight: 500; font-size: 10px; color: var(--mute); }
.ans[data-side="SB"]::before,
.ans[data-side="BTN"]::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; }
.ans[data-side="SB"]::before  { background: var(--raise); }
.ans[data-side="BTN"]::before { background: var(--call); }
.ans:hover { background: var(--ink-700); }
.ans:active { transform: scale(.985); }
.ans.is-selected { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--ink-750)); }
.ans.is-correct { border-color: var(--call); background: color-mix(in srgb, var(--call) 20%, var(--ink-750)); }
.ans.is-wrong { border-color: var(--raise); background: color-mix(in srgb, var(--raise) 16%, var(--ink-750)); }
.ans.is-muted { opacity: .4; }
.ans .mk { position:absolute; top:8px; right:8px; font-family:var(--font-data); font-size:11px; font-weight:700; padding:2px 6px; border-radius:999px; }
.ans.is-correct .mk { background: var(--call); color:#04241C; }
.ans.is-wrong .mk { background: var(--raise); color:#2A0A05; }

/* ======================================================================
   4. СЕТКИ ОТВЕТОВ 3 / 6 КНОПОК (сайз кбета / частота / эквити)
   ====================================================================== */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.grid6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.opt {
  appearance: none; cursor: pointer; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 58px; padding: 10px 6px;
  border-radius: var(--r-md); border: 1px solid var(--line); background: var(--ink-750);
  color: var(--bone); transition: transform .12s, background .12s, border-color .12s;
}
.opt .big { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1; }
.opt .sub { font-family: var(--font-data); font-size: 10px; color: var(--mute); }
.opt:hover { background: var(--ink-700); }
.opt:active { transform: scale(.98); }
.opt:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.opt.is-selected { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--ink-750)); }
.opt.is-correct { border-color: var(--call); background: color-mix(in srgb, var(--call) 20%, var(--ink-750)); }
.opt.is-wrong { border-color: var(--raise); background: color-mix(in srgb, var(--raise) 16%, var(--ink-750)); }
.opt.is-muted { opacity: .4; }
.opt.is-disabled { opacity: .35; pointer-events: none; }
.opt.is-loading { color: transparent; pointer-events: none; }
.opt.is-loading::after {
  content:''; position:absolute; width:18px; height:18px; border-radius:50%;
  border:2px solid var(--line); border-top-color: var(--gold); animation: spin .7s linear infinite;
}
.opt .mk { position:absolute; top:6px; right:7px; font-family:var(--font-data); font-size:10px; font-weight:700; padding:1px 5px; border-radius:999px; }
.opt.is-correct .mk { background: var(--call); color:#04241C; }
.opt.is-wrong .mk { background: var(--raise); color:#2A0A05; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Двойной диапазон-бар (SB vs BTN эквити) ---------- */
.eqbars { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.eqbar .top { display:flex; justify-content:space-between; font-family:var(--font-data); font-size:11px; margin-bottom:4px; }
.eqbar .track { height: 12px; border-radius: 999px; background: var(--ink-750); overflow: hidden; border:1px solid var(--line-soft); }
.eqbar .fill { height: 100%; border-radius: 999px; }
.eqbar.sb  .top .nm { color: var(--raise); }
.eqbar.btn .top .nm { color: var(--call); }
.eqbar.sb  .fill { background: var(--raise); }
.eqbar.btn .fill { background: var(--call); }
.eqbar .val { color: var(--bone); }

/* ======================================================================
   5. ВИТРИНА СОСТОЯНИЙ КНОПОК (UI-kit, требование ТЗ)
   ====================================================================== */
.states-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.state-cap { font-family: var(--font-data); font-size: 9px; letter-spacing:.1em; text-transform:uppercase; color: var(--mute-deep); margin: 0 0 4px; }