/* ==========================================================================
   components.css — переиспользуемые UI-компоненты (карточки, кнопки, поля,
   бейджи, метки, аккаунт-меню, таблица, аватар)
   ========================================================================== */
@layer components {

/* --- Карточка / панель -------------------------------------------------- */
.card {
  background: var(--c-panel);
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius);
  box-shadow: none;
}
.card-pad { padding: var(--space-4); }

/* Заголовок панели с маркером-акцентом. */
.panel-title {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink);
}
.panel-title::before {
  content: "";
  display: inline-block;
  width: var(--mark); height: var(--mark);
  margin-right: var(--space-2);
  background: var(--c-signal);
  border-radius: var(--radius);
  flex-shrink: 0;
}

/* --- Кнопки --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: 1;
  color: var(--c-ink);
  background: var(--c-panel-raised);
  border: 1px solid var(--c-hairline-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space: nowrap;
  user-select: none;
}
.btn:hover  { background: var(--c-panel-active); border-color: var(--c-signal-dim); }
.btn:active { background: var(--c-panel); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Primary. */
.btn-primary {
  color: var(--c-signal-text);
  background: var(--c-signal);
  border-color: var(--c-signal);
}
.btn-primary:hover  { background: var(--c-signal-hover); border-color: var(--c-signal-hover); color: var(--c-signal-text); text-decoration: none; }
.btn-primary:active { background: var(--c-signal-dim); }

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--c-ink-muted);
}
.btn-ghost:hover { background: var(--c-panel-raised); color: var(--c-ink); border-color: var(--c-hairline-strong); }

/* Danger — тёмный текст для контраста на насыщенном фоне (WCAG AA). */
.btn-danger {
  color: var(--c-signal-text);
  background: var(--c-fail);
  border-color: var(--c-fail);
}
.btn-danger:hover  { filter: brightness(1.12); }
.btn-danger:active { filter: brightness(0.9); }

/* Поле ссылки на созвон — раскрывается анимированно из ширины 0. */
.call-link-input {
  height: var(--control-h-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-ink);
  background: var(--c-panel-raised);
  border: 0 solid var(--c-hairline-strong);
  border-radius: var(--radius);
  max-width: 0;
  padding: 0;
  margin-right: -4px;
  opacity: 0;
  overflow: hidden;
  transition: max-width 280ms cubic-bezier(0.4, 0, 0.2, 1), padding 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 280ms cubic-bezier(0.4, 0, 0.2, 1), border-width 280ms cubic-bezier(0.4, 0, 0.2, 1), margin-right 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
.call-link-input.is-open { max-width: 220px; padding: 0 10px; opacity: 1; border-width: 1px; margin-right: 0; }
.call-link-input:focus { outline: none; border-color: var(--c-signal-dim); }

/* Малая квадратная icon-кнопка для второстепенных действий. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-sq-sm);
  height: var(--icon-sq-sm);
  border: 1px solid var(--c-hairline-strong);
  border-radius: var(--radius);
  background: var(--c-panel-raised);
  color: var(--c-ink-muted);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--c-panel-active); color: var(--c-ink); }
.icon-btn svg { width: 14px; height: 14px; }

.btn-sm { height: var(--control-h-sm); padding: 0 12px; font-size: var(--fs-xs); }
.btn-lg { padding: 12px 22px; font-size: var(--fs-md); }
.btn-block { width: 100%; }

/* Кнопки звонка. */
.call-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-sq-lg);
  height: var(--icon-sq-lg);
  border: 1px solid var(--c-hairline-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  color: var(--c-ink);
  background: var(--c-panel-raised);
}
.call-icon-btn svg { width: 20px; height: 20px; }
.call-icon-btn.is-accept { color: var(--c-signal-text); background: var(--c-pass); border-color: var(--c-pass); }
.call-icon-btn.is-accept:hover { filter: brightness(1.12); }
.call-icon-btn.is-hangup { color: var(--c-signal-text); background: var(--c-fail); border-color: var(--c-fail); }
.call-icon-btn.is-hangup:hover { filter: brightness(1.12); }
.call-icon-btn.is-hangup svg { transform: rotate(135deg); }
.call-icon-btn.is-mute {
  background: var(--c-panel-raised);
  color: var(--c-ink);
  border-color: var(--c-hairline-strong);
}
.call-icon-btn.is-mute:hover { background: var(--c-panel-active); border-color: var(--c-signal-dim); }
.call-icon-btn.is-mute.is-active {
  background: var(--c-fail-bg);
  color: var(--c-fail);
  border-color: var(--c-fail-border);
}
/* is-sm — хедерные иконки (звонок/глазик), той же высоты, что остальные
   controls в хедере; полноразмерная "звонилка" реального разговора крупнее,
   но форма (border-radius) теперь одинаковая — задана в базовом классе. */
.call-icon-btn.is-sm { width: var(--control-h-sm); height: var(--control-h-sm); }

/* Приглашение на созвон у ученика — размер как у brand-mark. */
.call-icon-btn.is-md { width: var(--icon-sq-md); height: var(--icon-sq-md); }
.call-icon-btn.is-md svg { width: 16px; height: 16px; }
.call-icon-btn.is-sm svg { width: 14px; height: 14px; }
.call-icon-btn.is-pulsing {
  color: var(--c-signal-text);
  background: var(--c-pass);
  border-color: var(--c-pass);
  animation: call-pulse-green 1.6s ease-in-out infinite;
}

.mic-gain-slider {
  width: 80px;
  height: 32px;
  accent-color: var(--c-signal);
  cursor: pointer;
}

/* --- Поля ввода ------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.label {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink-muted);
}
.input, .textarea, .select {
  width: 100%;
  padding: 10px 12px;
  font-family: inherit;
  font-size: var(--fs-md);
  color: var(--c-ink);
  background: var(--c-bench-dark);
  border: 1px solid var(--c-hairline-strong);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--c-ink-faint); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--c-signal);
  box-shadow: 0 0 0 3px var(--c-signal-soft);
}
.field-hint { font-size: var(--fs-sm); color: var(--c-ink-muted); }
.field-error { font-size: var(--fs-sm); color: var(--c-fail); }

/* --- Бейджи / индикаторы --------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border-radius: var(--radius);
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: var(--mark-sm); height: var(--mark-sm);
  background: currentColor;
  flex-shrink: 0;
}
.badge-pass { color: var(--c-pass); background: var(--c-pass-bg); border-color: var(--c-pass-border); }
.badge-fail { color: var(--c-fail); background: var(--c-fail-bg); border-color: var(--c-fail-border); }
.badge-warn { color: var(--c-warn); background: var(--c-warn-bg); border-color: var(--c-warn-border); }
.badge-neutral { color: var(--c-ink-muted); background: var(--c-panel-raised); border-color: var(--c-hairline); }
.badge-neutral::before { background: var(--c-ink-faint); }

/* Итоговый счётчик тестов. */
.result-summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  font-weight: var(--fw-bold);
  border: 1px solid var(--c-hairline);
  background: var(--c-panel);
}
.result-summary.is-pass {
  color: var(--c-pass);
  background: var(--c-pass-bg);
  border-color: var(--c-pass-border);
}
.result-summary.is-fail {
  color: var(--c-fail);
  background: var(--c-fail-bg);
  border-color: var(--c-fail-border);
}
.result-summary .count {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
}

/* --- Метка (chip) ----------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  height: var(--control-h-sm);
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  border-radius: var(--radius);
  background: var(--c-panel-raised);
  color: var(--c-ink-muted);
  border: 1px solid var(--c-hairline-strong);
}

/* --- Аккаунт-меню — <details>, без JS на открытие/закрытие ------------------ */
.account-menu { position: relative; list-style: none; }
.account-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.account-trigger::-webkit-details-marker { display: none; }
.account-trigger::marker { content: ""; }
.account-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 200px;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--c-panel);
  border: 1px solid var(--c-hairline-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 30;
}
.account-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: none;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  color: var(--c-ink);
  cursor: pointer;
}
.account-menu-item:hover { background: var(--c-panel-raised); }
.account-menu-empty { padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); color: var(--c-ink-faint); }
.account-menu-divider { height: 1px; margin: var(--space-1) 0; background: var(--c-hairline); }

/* Раскрывающаяся форма смены пароля внутри панели — шире пунктов меню,
   чтобы поля «Текущий/Новый/Повторите» не были ужаты. */
.account-menu-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-3);
  min-width: 240px;
}

/* --- Аватар — инициалы в акцентной плитке ------------------------------------ */
/* Внешний отступ — забота контейнера (flex-gap), не самого блока. */
.avatar {
  display: inline-grid; place-items: center;
  width: var(--icon-sq-md); height: var(--icon-sq-md);
  border-radius: var(--radius);
  background: var(--c-signal-soft);
  color: var(--c-signal);
  border: 1px solid var(--c-signal-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  vertical-align: middle;
}

/* --- Таблица (экран репетитора) --------------------------------------------- */
.table-wrap {
  border: 1px solid var(--c-hairline);
  border-radius: var(--radius);
  overflow: auto;
  background: var(--c-panel);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}
.table thead th {
  position: sticky; top: 0;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  background: var(--c-panel-active);
  border-bottom: 1px solid var(--c-hairline-strong);
  white-space: nowrap;
}
.table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--c-hairline);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--c-panel-raised); }
.table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.table .col-right { text-align: right; }

}

/* @keyframes вне @layer — именованные анимации не участвуют в каскаде слоёв. */
@keyframes call-pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-pass) 55%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-pass) 0%, transparent); }
}