/* ТехКарта — кабинет: карточки форматов и тарифов (раздел 17). Порядок файлов — см. base.css. */

/* ============================================================ 17. Карточки форматов и тарифов */
.tk-feature {
  display: flex;
  flex-direction: column;
}

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

/* Карточка пакета */
.tk-tier {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-8);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.tk-tier--featured {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

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

.tk-tier__desc {
  font: var(--t-small);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  margin-top: 4px;
}

.tk-tier__price {
  font: 600 26px/34px var(--font-sans);
  font-variant-numeric: tabular-nums;
}

.tk-tier__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.tk-tier__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font: var(--t-small);
  color: var(--ink);
}

.tk-tier__list .tk-icon {
  margin-top: 2px;
  color: var(--text-2);
}

.tk-tier__cta {
  margin-top: auto;
}

.tk-tier__cta form {
  margin: 0;
}

/* ------------------------------------------------------------ Из main после ответвления дизайна
   (тарифы #87, techkarta-back#108): правила main как есть, старые токены — через
   совместимые имена в base.css. */
/* Ссылка «Создать … →» в узкой карточке переносит текст, а не вылезает за край (techkarta-back#108) */
.tk-feature .tk-btn--tertiary {
  white-space: normal;
  text-align: left;
}
/* Сетка карточек форматов на главной: колонка не уже 220 px и не уже трети ряда (gap 24 px), поэтому
   на компьютере в ряду не больше 3 карточек — восемь встают 3 + 3 + 2 (дизайн-стенд, решение владельца
   10.10; было 4, techkarta-back#108). На узком экране колонок меньше, как у .tk-grid--220. Число карточек
   поменяется — раскладка не сломается, но пересмотреть 3: одиночная карточка в последнем ряду снова возможна. */
.tk-grid--features {
  grid-template-columns: repeat(auto-fit, minmax(max(min(100%, 220px), calc((100% - 48px) / 3)), 1fr));
  gap: 24px;
}
/* Витрина тарифов (#87, shell/PlanOffers.tsx): страница «Тарифы», главная и «Мой тариф» без тарифа. */
/* Три равные колонки: карточки одной высоты, цены и кнопки на одной линии (одинаковое устройство карточек,
   кнопки прижаты к низу). Уже 1024 px (одна колонка оболочки) — карточки друг под другом. */
.plan-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
/* Высота шапки — как у значка «Рекомендуем»: с ним и без него цены соседних карточек на одной линии. Название с
   подзаголовком — от верха шапки: подзаголовок в две строки у соседней карточки не сдвигает название (techkarta-back#164) */
.plan-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: calc(var(--fs-12) * 1.5 + 8px);
}
/* «Рекомендуем» у выделенной карточки: тихая синяя подложка, без заливки цветом */
.plan-card__badge {
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--blue-50);
  color: var(--primary);
  font: 600 var(--fs-12)/1.5 var(--font-ui);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan-card__offer {
  display: grid;
  gap: 8px;
}
.plan-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--ink);
}
.plan-card__per {
  font: 400 var(--fs-16)/1.5 var(--font-ui);
  color: var(--text-muted);
}
/* Лимит числом рядом с ценой — главное после цены */
.plan-card__limit {
  font: 600 var(--fs-16)/1.4 var(--font-ui);
  color: var(--ink);
}
/* Переключатель «Год / Месяц» над карточками (techkarta-back#163): сегмент по ширине подписей, рядом — строка о
   документе (techkarta-back#164), не влезает — под переключателем; на телефоне сегмент во всю ширину, половины поровну
   (правило .tk-segment до 767 px), строка — под ним. У «Года» — плашка экономии */
.plan-lead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.plan-lead__text {
  font: 400 var(--fs-16)/1.5 var(--font-ui);
  color: var(--text-body);
  text-wrap: pretty;
}
@media (max-width: 767px) {
  .plan-lead {
    flex-direction: column;
    align-items: stretch;
  }

  .plan-period .tk-segment__opt {
    flex: 1 1 0;
  }
}
.plan-period__save {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--blue-50);
  color: var(--primary);
  font: 600 var(--fs-12)/1.5 var(--font-ui);
  white-space: nowrap;
}
/* Лимит обоих периодов — в одной ячейке, неактивный невидим, но место держит: высота ячейки — по большему варианту
   при любом переносе, карточка при переключении не меняет высоту (ревью !70). Так же — подпись под кнопкой
   (techkarta-back#165) */
.plan-card__sub {
  display: grid;
}
.plan-card__sub > * {
  grid-area: 1 / 1;
}
.plan-card__alt {
  visibility: hidden;
}
/* Низ карточки: одна кнопка выбранного периода, у вошедшего с тарифом — подпись под ней */
.plan-card__buy {
  margin-top: auto;
  display: grid;
  gap: 8px;
}
/* У вошедшего с тарифом под кнопкой — цена перехода или начало периода: место на две строки у всех
   карточек, чтобы кнопки соседних стояли на одной линии и без subgrid */
.plan-card__note {
  min-height: 3em;
  font: 400 var(--fs-13)/1.5 var(--font-ui);
  color: var(--text-body);
  text-wrap: pretty;
}
/* Выгоды ступени под кнопкой (techkarta-back#164): пункты — от верха списка, а не врозь по высоте строки, когда у
   соседней карточки пунктов больше */
.plan-card__list {
  align-content: start;
}
/* Без одиночного слова на последней строке пункта (techkarta-back#165); лендинг (.tk-tier__list без .plan-card__list)
   не задет */
.plan-card__list li {
  text-wrap: pretty;
}
/* Три карточки в ряд: строки у карточек общие (subgrid) — шапка, цена с лимитом, кнопка, подпись под ней, выгоды.
   Подпись в 4 строки или перенос лимита в одной карточке не сдвигают кнопки соседних (techkarta-back#149).
   Отступ над подписью — полем, gap сеток 0: у гостя подписей нет, пустая строка сетки остаётся без отступа и
   карточка не растёт */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1024px) {
    .plan-cards {
      row-gap: 0;
    }

    .plan-card {
      display: grid;
      grid-row: span 6;
      grid-template-rows: subgrid;
    }

    /* Цена и лимит — каждый в своей строке: цена с «в месяц» в две строки у одной карточки не сдвигает лимит
       соседних (techkarta-back#165). Отступ под ценой — полем, как над подписью */
    .plan-card__offer {
      grid-row: span 2;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    .plan-card__offer > * + * {
      margin-top: 8px;
    }

    .plan-card__buy {
      grid-row: span 2;
      grid-template-rows: subgrid;
      row-gap: 0;
      margin-top: 0;
    }

    .plan-card__buy > * + * {
      margin-top: 8px;
    }
  }
}
/* «+10 документов»: строка во всю ширину под карточками */
.plan-extra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
}
/* «Вы выбрали …» над витриной после входа перед оплатой (#122): строка, как «+10 документов», в рамке выбранного */
.plan-picked {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.plan-picked__note {
  font: 400 var(--fs-13)/1.5 var(--font-ui);
  color: var(--text-body);
  text-wrap: pretty;
}
/* Оформление подписки (techkarta-back#226): тот же блок, условия и галочка согласия — столбиком под заголовком */
.plan-picked.plan-checkout {
  flex-direction: column;
  align-items: stretch;
}
/* Выбранное до входа (`?plan=`, `?pack=`): синяя рамка и кольцо. У карточек border: 0 — рамка тенью внутрь,
   как у «Самого популярного», тень карточки сохраняется. Кольцо --blue-200, а не бледное --blue-50: иначе
   выбранный «Старт» рядом с «Самым популярным» не отличить (#148). `.tk-card` в начале — чтобы «Вы выбрали …»
   не проигрывал правилу `.tk-card` по порядку */
.tk-card.plan-picked,
.plan-card[data-selected="true"],
.plan-extra[data-selected="true"] {
  box-shadow:
    inset 0 0 0 2px var(--primary),
    0 0 0 4px var(--blue-200),
    var(--shadow-card);
}
@media (max-width: 1023px) {
  .plan-cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .plan-cards .tk-tier {
    padding: 24px;
    gap: 20px;
  }

  .plan-cards .tk-tier--featured {
    padding: 23px;
  }
}