/* Кабинет преподавателя (/teacher): группы, статистика и графики — дополнение к .tc-* из site.css (владелец, 28.09.2026:
   «привести в порядок кабинет учителя. Все должно быть максимально понятным. Создание групп. Приглашение учеников.
   Добавление в группу. удаление из группы. Статистика по ученику и по всем ученикам, в том числе визуальная»). */

/* вкладка «Группы»: пояснение и кнопка, карточка группы со списком учеников */
.tc-lead{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;margin-bottom:6px}
.tc-lead p{margin:0;max-width:680px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.tc-group__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.tc-group h3{font-size:20px;line-height:1.2;margin:0 0 3px}
.tc-members{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:8px}
.tc-members li{display:flex;align-items:center;gap:10px;min-height:50px;padding:7px 8px 7px 7px;border-radius:14px;background:var(--surface,#f5f4ed)}
.tc-members .tc-ava,.tc-rank__who .tc-ava{width:34px;height:34px;font-size:14px}
.tc-members__n{flex:1;min-width:0;font-size:14.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-ibtn--sm{height:32px;padding:0 12px;font-size:13px;background:#fff}
.tc-sel--sm{height:34px;font-size:13.5px;max-width:170px}

/* строка ученика: подпись к списку групп, мини-график активности */
.tc-selwrap{display:flex;flex-direction:column;gap:3px}
.tc-selwrap span{font-size:12px;color:var(--ink-3)}
.tc-act{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.tc-spark{width:84px;height:22px;flex:none}

/* цифры и графики */
.tc-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:0 0 12px}
.tc-kpi{background:#fff;box-shadow:inset 0 0 0 1px #ecebe4;border-radius:18px;padding:14px 16px}
.tc-kpi b{display:block;font-size:24px;line-height:1.15;font-weight:700;color:var(--ink)}
.tc-kpi span{display:block;margin-top:4px;font-size:13px;line-height:1.35;color:var(--ink-3)}
.tc-detail .tc-kpi{background:var(--surface,#f5f4ed);box-shadow:none}
.tc-chart{margin-top:12px}
.tc-chart__head{display:flex;justify-content:space-between;align-items:baseline;gap:6px 14px;flex-wrap:wrap}
.tc-chart__head h3{margin:0}
.tc-bars{display:block;width:100%;height:140px}
.tc-chart__x{display:flex;justify-content:space-between;margin-top:6px;font-size:12.5px;color:var(--ink-3)}
.tc-bars rect.on,.tc-spark rect.on{fill:#6b5ce7}   /* цветом (владелец, 28.09.2026: «Графики и диаграммы лучше цветом»): занятия — сине-фиолетовым */
.tc-bars rect.off,.tc-spark rect.off{fill:#e2dfd5}
.tc-hbar{display:block;height:10px;border-radius:99px;background:#ecebe4;overflow:hidden}
.tc-hbar i{display:block;height:100%;border-radius:99px;background:#6b5ce7}
/* точность — по уровню: от 80 % зелёный, 60–79 % жёлтый, ниже 60 % красный */
.tc-hbar.good i{background:#22a06b}.tc-hbar.mid i{background:#e5a50a}.tc-hbar.low i{background:#e5484d}
.tc-lvl.good{color:#1a7f52!important}.tc-lvl.mid{color:#a86d00!important}.tc-lvl.low{color:#c9303a!important}
.tc-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:12px;font-size:12.5px;color:var(--ink-3)}
.tc-legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}


/* вкладка «Статистика»: ученики — полоса занятий, точность, время */
.tc-rank{display:flex;flex-direction:column;margin-top:8px}
.tc-rank__row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.6fr) 36px 72px 88px;gap:14px;align-items:center;padding:8px 0}
.tc-rank__row+.tc-rank__row{border-top:1px solid #f0eee6}
.tc-rank__head{padding:0 0 6px;font-size:12.5px;color:var(--ink-3)}
.tc-rank__who{display:flex;align-items:center;gap:10px;min-width:0;border:0;background:none;padding:0;font:inherit;font-size:14.5px;font-weight:500;color:var(--ink);text-align:left;cursor:pointer}
.tc-rank__who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tc-rank__who:hover span{text-decoration:underline;text-underline-offset:3px}
.tc-rank__n,.tc-rank__pct{font-size:14px;font-weight:600;color:var(--ink)}
.tc-rank__time{font-size:14px;color:var(--ink-2)}


/* статистика ученика — главное для учителя списком «подпись — значение» (владелец, 28.09.2026: «Должна быть наиболее важная
   инфо для учителя… Чтобы он сразу понимал о чем речь») */
.tc-sum{display:grid;grid-template-columns:190px minmax(0,1fr);gap:14px 24px;margin:0;font-size:15px;line-height:1.5}
.tc-sum dt{font-size:14px;font-weight:600;color:var(--ink-2)}
.tc-sum dt small{display:block;font-size:12.5px;font-weight:400;color:var(--ink-3)}
.tc-sum dd{margin:0;color:var(--ink)}
.tc-sum dd > span{display:inline-block;margin-right:22px}
.tc-sum dd > .tc-line{display:block;margin-right:0}

@media (max-width:640px){
  .tc-sum{grid-template-columns:1fr;gap:2px}
  .tc-sum dd{margin-bottom:12px}
  .tc-tabs{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none}   /* пять вкладок — листаются пальцем */
  .tc-tabs::-webkit-scrollbar{display:none}
  .tc-tabs button{flex:none}
  .tc-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tc-kpi b{font-size:21px}
  .tc-rank__row{grid-template-columns:minmax(0,1fr) 36px 60px;row-gap:8px}
  .tc-rank__who{grid-column:1/-1}
  .tc-rank__time,.tc-rank__head{display:none}
  .tc-act .tc-spark{display:none}
}