/* Выбор учеников Telegram-чата (tg-chat-picker.js). Цвета — из токенов страницы: CRM (--crm-*) или кабинет
   преподавателя v4 (--v4-*), с запасными значениями; в тёмной теме CRM читается через её токены. */
.tgp { --tgp-line: var(--crm-hair, var(--v4-line, #d8d3c6)); --tgp-ink: var(--crm-ink-900, var(--v4-ink, #1b1a17));
  --tgp-mute: var(--crm-ink-500, var(--v4-mute, #6b675d)); --tgp-bg: var(--crm-bg, var(--v4-paper, #fff));
  --tgp-sunk: var(--crm-bg-sunken, color-mix(in srgb, var(--v4-ink, #1b1a17) 5%, transparent));
  --tgp-accent: var(--crm-accent, var(--v4-accent, #2b4c8c)); --tgp-warn: var(--crm-warning, #8a5208);
  display: flex; flex-direction: column; gap: 10px; min-width: 0; color: var(--tgp-ink); }
.tgp [hidden] { display: none !important; }
.tgp-label { font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--tgp-mute); margin-right: 4px; }
.tgp-muted { color: var(--tgp-mute); }
.tgp-subjects { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.tgp-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tgp-check input, .tgp-student input { width: 16px; height: 16px; margin: 0; accent-color: var(--tgp-accent); flex: none; }
.tgp-groups { display: flex; flex-direction: column; gap: 6px; }
.tgp-gchips { display: flex; flex-wrap: wrap; gap: 6px; }
.tgp-gchip { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 6px 3px 10px; border-radius: 999px;
  border: 1px solid var(--tgp-line); background: var(--tgp-bg); color: inherit; font: inherit; font-size: 13px; cursor: pointer;
  transition: border-color .15s, background .15s; }
.tgp-gchip:hover { border-color: var(--tgp-accent); }
.tgp-gchip:focus-visible { outline: 2px solid var(--tgp-accent); outline-offset: 2px; }
.tgp-gchip__n { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--tgp-sunk); font-size: 12px; text-align: center;
  font-variant-numeric: tabular-nums; }
.tgp-gchip.is-part { border-color: var(--tgp-accent); border-style: dashed; }
.tgp-gchip.is-on { border-color: var(--tgp-accent); background: color-mix(in srgb, var(--tgp-accent) 14%, transparent); }
.tgp-gchip.is-on .tgp-gchip__n { background: var(--tgp-accent); color: #fff; }
.tgp-search { height: 36px; padding: 0 10px; border: 1px solid var(--tgp-line); border-radius: 8px; background: var(--tgp-bg);
  color: inherit; font: inherit; font-size: 14px; width: 100%; box-sizing: border-box; }
.tgp-search:focus-visible { outline: 2px solid var(--tgp-accent); outline-offset: 1px; }
.tgp-list { display: flex; flex-direction: column; max-height: min(44vh, 380px); overflow: auto; border: 1px solid var(--tgp-line);
  border-radius: 10px; padding: 2px 0; }
.tgp-classhead { position: sticky; top: 0; z-index: 1; padding: 6px 12px 4px; background: var(--tgp-bg); font-size: 12px; font-weight: 600;
  color: var(--tgp-mute); border-bottom: 1px solid var(--tgp-line); }
.tgp-student { display: flex; align-items: flex-start; gap: 10px; padding: 7px 12px; cursor: pointer; }
.tgp-student + .tgp-student { border-top: 1px dashed var(--tgp-line); }
.tgp-student:hover { background: var(--tgp-sunk); }
.tgp-student input { margin-top: 2px; }
.tgp-student__main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.tgp-name { font-weight: 500; }
.tgp-where { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tgp-tag { padding: 1px 7px; border-radius: 999px; background: var(--tgp-sunk); font-size: 12px; color: var(--tgp-mute); white-space: nowrap; }
.tgp-also { font-size: 12px; color: var(--tgp-warn); }
.tgp-empty { padding: 12px; margin: 0; }
.tgp-summary { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--tgp-sunk); }
.tgp-summary p { margin: 0; }
.tgp-warn { color: var(--tgp-warn); }
.tgp-lines { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; }
.tgp-line__subj { font-weight: 600; }
@media (max-width: 719.98px) {
  .tgp-list { max-height: 50vh; }
  .tgp-tag { white-space: normal; border-radius: 8px; }
}