/* «Практическое обучение» — вкладка кабинета (09.09.2026).
 *
 * Одна вкладка = одно занятие «порешать», поэтому у всех её частей общий язык:
 * карточка 16px с волосяной рамкой и тенью shadcn (набор 21st.dev, как у
 * островов), иконка Streamline в цветной подложке, приглушённое описание,
 * счётчики чипами, тонкая полоса прогресса. Никаких зелёных кнопок во всю
 * ширину — кликается вся плитка целиком.
 *
 * Разметку дают: practice_tile.js (плитки), trainer.js (разделы предметов),
 * cabinet.js (карточка дня, клинические инструменты), desktop_split.js
 * (сетка и заголовки групп).
 */

.cab-practice-hub {
  --pt-radius: 16px;
  --pt-border: rgba(15, 23, 42, 0.08);
  --pt-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  --pt-shadow-hover: 0 10px 26px rgba(15, 23, 42, 0.09);
  --pt-muted: #64748b;
}

/* ── Заголовки групп внутри вкладки ─────────────────────────────────── */
.cab-practice-group { margin-top: 22px; }
.cab-practice-group:first-of-type { margin-top: 0; }

.cab-practice-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 2px 10px;
}

.cab-practice-group-title {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--pt-muted);
}

.cab-practice-group-note {
  font-size: 0.75rem;
  color: var(--pt-muted);
  opacity: 0.85;
}

/* Группы внутри вкладки разделяет воздух, а не линия: до 09.09.2026 блоки
   лежали в hub'е плоско и их приходилось резать разделителями
   (desktop_split.css, «Без контейнеров»). Теперь каждый блок — карточка,
   и линия поверх карточки читается как артефакт. */
body.cab-desk-split-on .cab-practice-hub > * + * {
  border-top: 0;
  padding-top: 0;
}

.cab-practice-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Сетка плиток ───────────────────────────────────────────────────── */
.cab-practice-tiles {
  display: grid;
  /* 300px, а не 272: на 1920 колонок становилось пять и шестая плитка
     оставалась одна во втором ряду. */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.cab-practice-tiles > * { min-width: 0; }
/* Блок-обёртка каждого входа (#ecgTrainerBlock и т.д.) — просто ячейка. */
.cab-practice-tiles > div > .pt-tile { height: 100%; }

/* ── Плитка ─────────────────────────────────────────────────────────── */
.pt-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 16px 16px 14px;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius, 16px);
  background: var(--surface);
  box-shadow: var(--pt-shadow, 0 1px 2px rgba(15, 23, 42, 0.05));
  overflow: hidden;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
              border-color 0.18s var(--ease);
}

/* Мягкое цветное свечение в углу — как в bento-карточках 21st.dev. */
.pt-tile::before {
  content: "";
  position: absolute;
  right: -46px;
  top: -46px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--pt-tint-soft, rgba(13, 148, 136, 0.12));
  opacity: 0.75;
  pointer-events: none;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease);
}

.pt-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--pt-shadow-hover, 0 10px 26px rgba(15, 23, 42, 0.09));
  border-color: var(--pt-tint, var(--accent));
}
.pt-tile:hover::before { transform: scale(1.25); opacity: 1; }

.pt-tile:focus-within {
  border-color: var(--pt-tint, var(--accent));
  box-shadow: 0 0 0 3px var(--pt-tint-soft, var(--accent-soft));
}

@media (prefers-reduced-motion: reduce) {
  .pt-tile, .pt-tile::before { transition: none; }
  .pt-tile:hover { transform: none; }
}

/* Растянутая ссылка: кликается вся плитка, вторичная ссылка лежит выше. */
.pt-tile-hit { position: static; }
.pt-tile-hit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 1;
}
.pt-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.pt-tile-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}

.pt-tile-ico {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--pt-tint-soft, rgba(13, 148, 136, 0.12));
  color: var(--pt-tint, var(--accent));
  --sl-accent: var(--pt-tint, var(--accent));
}
.pt-tile-ico .sl-icon { width: 24px; height: 24px; }

.pt-tile-go {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--pt-tint, var(--accent));
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.pt-tile-go .sl-icon { width: 15px; height: 15px; }
.pt-tile:hover .pt-tile-go { opacity: 1; transform: translateX(0); }

.pt-tile-title {
  position: relative;
  z-index: 2;
  margin: 3px 0 0;
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text);
  pointer-events: none;
}

.pt-tile-desc {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  pointer-events: none;
}

.pt-tile-chips {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
  pointer-events: none;
}

.pt-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--pt-tint, var(--accent));
  background: var(--pt-tint-soft, rgba(13, 148, 136, 0.12));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pt-chip-quiet {
  color: var(--pt-muted, #64748b);
  background: rgba(15, 23, 42, 0.05);
}

.pt-tile-bar {
  position: relative;
  z-index: 2;
  height: 4px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.07);
  overflow: hidden;
  margin-top: 2px;
}
.pt-tile-bar > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--pt-tint, var(--accent));
  min-width: 3px;
}

.pt-tile-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
}

.pt-tile-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 9px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pt-tint, var(--accent));
  background: var(--pt-tint-soft, rgba(13, 148, 136, 0.12));
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
  pointer-events: none;
  white-space: nowrap;
}
.pt-tile:hover .pt-tile-cta {
  background: var(--pt-tint, var(--accent));
  color: #fff;
}

.pt-tile-alt {
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
}
.pt-tile-alt:hover { color: var(--pt-tint, var(--accent)); }
.pt-tile-alt .sl-icon { width: 12px; height: 12px; }

/* Начатая лента: точка у иконки, чтобы взглядом отделить «уже решаю». */
.pt-tile.is-started .pt-tile-ico::after {
  content: "";
  position: absolute;
  margin: -30px 0 0 30px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--pt-tint, var(--accent));
  border: 2px solid var(--surface);
}

/* Тренажёр по разделам (#trainerBlock) переверстан в своём файле — trainer.css. */

/* ── Карточка дня (#factflashTodayBlock) ────────────────────────────── */
.factflash-today-card {
  background: linear-gradient(135deg, rgba(13, 148, 136, 0.09), rgba(129, 140, 248, 0.09)), var(--surface);
}
.factflash-today-card > h2,
.factflash-today-card .card-fold-head h2 {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
/* Иконка вместо буллита: маска на отдельный файл спрайта, цвет — акцент. */
.factflash-today-card h2::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  background: var(--accent);
  -webkit-mask: url("/static/icons/streamline/bulb.svg?v=2026-09-09b") center / contain no-repeat;
  mask: url("/static/icons/streamline/bulb.svg?v=2026-09-09b") center / contain no-repeat;
}

.factflash-today-hero {
  margin: -4px 0 12px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.factflash-today-face {
  background: var(--surface);
  border: 1px solid var(--pt-border, rgba(15, 23, 42, 0.08));
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--pt-shadow, 0 1px 2px rgba(15, 23, 42, 0.05));
}

.factflash-today-crumb {
  margin: 0 0 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  text-transform: uppercase;
}

.factflash-today-question {
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 550;
  color: var(--text);
}

.factflash-today-hint {
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  padding-left: 11px;
  border-left: 2px solid var(--accent-soft);
}

.factflash-today-answer {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(13, 148, 136, 0.07);
  border: 1px solid rgba(13, 148, 136, 0.16);
  font-size: 0.875rem;
  line-height: 1.5;
}
.factflash-today-context { margin-top: 8px; font-size: 0.8125rem; color: var(--text-secondary); }

.factflash-today-reveal {
  margin-top: 14px;
  padding: 9px 18px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s var(--ease);
}
.factflash-today-reveal:hover { background: var(--accent-hover); }

.factflash-today-grade { display: flex; gap: 8px; margin-top: 14px; }
.factflash-today-btn {
  flex: 1 1 auto;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease), color 0.15s var(--ease);
}
.factflash-today-btn-forgot { color: #b45309; }
.factflash-today-btn-forgot:hover { border-color: #b45309; background: rgba(180, 83, 9, 0.08); }
.factflash-today-btn-remember { color: #15803d; }
.factflash-today-btn-remember:hover { border-color: #15803d; background: rgba(21, 128, 61, 0.08); }
.factflash-today-btn:disabled { opacity: 0.55; cursor: default; }

/* Счётчик — точки, а не строка «Карточка 2 из 5». */
.factflash-today-counter {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 12px 0 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.ff-dots { display: inline-flex; gap: 5px; }
.ff-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.14);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.ff-dot.is-done { background: var(--accent); opacity: 0.45; }
.ff-dot.is-current { background: var(--accent); transform: scale(1.35); }

.factflash-today-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 2px;
}
.factflash-today-empty-icon {
  width: 34px; height: 34px;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(21, 128, 61, 0.14);
  color: #15803d;
}
.factflash-today-empty p { margin: 0; font-size: 0.875rem; color: var(--text-secondary); }

/* ── Клинические инструменты (#clinicalToolsBlock) ──────────────────── */
.clinical-tools-inner { display: flex; flex-direction: column; gap: 12px; }
.clinical-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 12px;
}
.clinical-tools-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.ct-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  border: 1px solid var(--pt-border, rgba(15, 23, 42, 0.08));
  background: var(--surface);
  color: var(--text);
  font-size: 0.8125rem;
  text-decoration: none;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease),
              transform 0.15s var(--ease);
}
.ct-chip:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
  transform: translateY(-1px);
}
.ct-chip .sl-icon { width: 16px; height: 16px; color: var(--accent); }

/* ── Вкладка целиком ────────────────────────────────────────────────── */
.cab-practice-hub > .cab-practice-group > .card,
.cab-practice-hub > .card { margin-bottom: 0; }

/* Ниже 1200px групп нет (desktop_split выключен) — плитки идут лентой,
   и каждая занимает всю ширину: там это и правильно. */
@media (max-width: 1199px) {
  .pt-tile { border-radius: 14px; }
}