/* ТехКарта — кабинет: типографика, кнопки, бейджи, чипы и пилюли (разделы 5–7). Порядок файлов — см. base.css. */

/* ============================================================ 5. Типографика */
/* Подпись-надзаголовок: обычный регистр, 15 px 600 --muted (4.3) */
.tk-eyebrow {
  font: 600 14px/20px var(--font-sans);
  color: var(--muted);
}

.tk-h2 {
  font: var(--t-h2);
  color: var(--ink);
  text-wrap: balance;
}

.tk-h3 {
  font: var(--t-h3);
  color: var(--ink);
}

.tk-strong {
  font: 600 16px/24px var(--font-sans);
  color: var(--ink);
}

.tk-lead {
  font: var(--t-lead);
  color: var(--text-2);
  max-width: 720px;
  text-wrap: pretty;
}

.tk-text {
  font: var(--t-text);
  text-wrap: pretty;
}

.tk-small {
  font: var(--t-small);
}

.tk-caption {
  font: var(--t-small);
  color: var(--muted);
  text-wrap: pretty;
}

/* Числа (минуты, цены, номера) — основным шрифтом с табличными цифрами (4.1) */
.tk-num {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tk-ink {
  color: var(--ink);
}

.tk-muted {
  color: var(--muted);
}

.tk-mut {
  color: var(--text-2);
}

.tk-measure {
  max-width: 720px;
  text-wrap: pretty;
}

/* ============================================================ 6. Кнопки */
/* Основная — заливка --primary; вторичная — белая с рамкой --line-strong;
   ссылка — подчёркнутый текст; опасная — --error (4.6). Неактивных кнопок
   без объяснения нет: если действие недоступно, кнопка остаётся активной и
   объясняет, что сделать. */
.tk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border-radius: var(--r-8);
  border: 1px solid transparent;
  cursor: pointer;
  font: 600 16px/22px var(--font-sans);
  color: var(--on-primary);
  background: var(--primary);
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  user-select: none;
  transition:
    background-color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}

.tk-btn:hover,
.tk-btn:active {
  color: var(--on-primary);
  background: var(--primary-hover);
}

/* Короткая подпись кнопки (ShortLabel) — только на телефоне, см. responsive.css; скрытая подпись не входит
   в доступное имя */
.tk-btn__short {
  display: none;
}

.tk-btn--lg {
  min-height: 52px;
  padding: 0 32px;
}

.tk-btn--sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
  line-height: 20px;
}

.tk-btn--block {
  width: 100%;
}

/* Вторичная. --outline — старое имя той же кнопки: синий контур спорил с
   основной кнопкой (1.1.5), теперь второстепенное действие нейтральное. */
.tk-btn--secondary,
.tk-btn--outline {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}

.tk-btn--secondary:hover,
.tk-btn--outline:hover,
.tk-btn--secondary:active,
.tk-btn--outline:active {
  background: var(--surface-2);
  color: var(--ink);
}

/* Ссылка: высота не меньше 24 px — минимум цели касания (WCAG 2.5.8) */
.tk-btn--tertiary {
  min-height: 24px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.tk-btn--tertiary:hover,
.tk-btn--tertiary:active {
  background: none;
  color: var(--primary-hover);
  text-decoration-thickness: 2px;
}

.tk-btn--danger {
  background: var(--error);
}

.tk-btn--danger:hover,
.tk-btn--danger:active {
  background: var(--error-hover);
}

/* Неактивное состояние остаётся только у «Оплата скоро» (с подсказкой) и у
   кнопки отправленной формы («Отправляем…»). Подсказку title должно быть видно
   при наведении, поэтому pointer-events не отключаем. */
.tk-btn[disabled],
.tk-btn[aria-disabled="true"] {
  background: var(--surface-2);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

.tk-btn--tertiary[disabled],
.tk-btn--tertiary[aria-disabled="true"] {
  background: none;
  color: var(--muted);
}

.tk-btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.tk-btn-row--12 {
  gap: 12px;
}

/* ============================================================ 7. Бейджи, плашки статуса, чипы, плитки выбора */
.tk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--r-4);
  background: var(--primary-tint);
  box-shadow: inset 0 0 0 1px var(--primary-edge);
  color: var(--ink);
  font: 600 14px/20px var(--font-sans);
  white-space: nowrap;
}

/* Плашка статуса (4.6): всегда значок и слово, цвет — только у статуса */
.tk-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--r-4);
  font: 600 14px/20px var(--font-sans);
  white-space: nowrap;
}

.tk-status--pending {
  background: var(--primary-tint);
  box-shadow: inset 0 0 0 1px var(--primary-edge);
  color: var(--primary);
}

.tk-status--pending .tk-icon {
  animation: tk-spin 1.2s linear infinite;
}

.tk-status--done {
  background: var(--success-tint);
  box-shadow: inset 0 0 0 1px var(--success-edge);
  color: var(--success);
}

.tk-status--error {
  background: var(--error-tint);
  box-shadow: inset 0 0 0 1px var(--error-edge);
  color: var(--error);
}

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

/* Метка формата в превью («DOCX», «PDF») */
.tk-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-4);
  background: var(--surface-2);
  color: var(--ink);
  font: 600 14px/20px var(--font-sans);
  white-space: nowrap;
}

/* Ссылка-плитка (предметы, классы, темы): радиус 8 вместо пилюли */
.tk-chip-link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-8);
  background: var(--surface);
  color: var(--ink);
  font: 500 14px/20px var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
}

.tk-chip-link--lg {
  min-height: 44px;
  padding: 10px 16px;
}

.tk-chip-link:hover {
  color: var(--primary);
  border-color: var(--primary);
}

span.tk-chip-link:hover {
  color: var(--ink);
  border-color: var(--line);
}

.tk-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.tk-chips__title {
  font: 600 14px/20px var(--font-sans);
  color: var(--ink);
  margin-right: 8px;
}

/* Номер класса в каталоге */
.tk-grade-pill {
  min-width: 36px;
  height: 36px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-8);
  background: var(--surface);
  color: var(--primary);
  font: 600 14px/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.tk-grade-pill:hover {
  border-color: var(--primary);
  background: var(--primary-tint);
  color: var(--primary);
}

/* Плитка выбора (4.6) вместо пилюль: label с radio внутри или кнопка.
   Выбранная — рамка 2 px --primary, подложка --primary-tint и галочка; один
   язык выбранного состояния — синий, чёрного больше нет. Вторая половина
   рамки — тень внутрь, чтобы плитка не меняла размер при выборе. */
.tk-choices {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tk-choice {
  appearance: none;
  margin: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-8);
  background: var(--surface);
  color: var(--ink);
  font: 500 16px/22px var(--font-sans);
  text-align: left;
  cursor: pointer;
  user-select: none;
}

.tk-choice::before {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  border: 2px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface) center / 12px 12px no-repeat;
}

.tk-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.tk-choice:hover {
  border-color: var(--ink);
}

.tk-choice:has(input:checked),
.tk-choice[data-on="true"] {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
  background: var(--primary-tint);
}

.tk-choice:has(input:checked)::before,
.tk-choice[data-on="true"]::before {
  border-color: var(--primary);
  background-color: var(--primary);
  background-image: url("/static/img/ui-21167f4e.svg");
}

.tk-choice:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.tk-choice:has(input[aria-invalid="true"]),
.tk-choices[aria-invalid="true"] .tk-choice {
  border-color: var(--error);
}

/* ------------------------------------------------------------ Из main после ответвления дизайна
   (тарифы #87, techkarta-back#108): правила main как есть, старые токены — через
   совместимые имена в base.css. */
/* Чип-кнопка (подсказки дат под темой сценария, techkarta-back#8; срок заморозки, techkarta-back#226) — как
   ссылка-чип, с рамкой; выбранный вариант (aria-pressed) — цветом */
button.tk-chip-link {
  cursor: pointer;
}

.tk-chip-link[aria-pressed="true"] {
  border-color: var(--primary);
  background: var(--primary-tint);
  color: var(--primary);
}