/* ТехКарта — кабинет: общие партиалы: шапка урока, таблица этапов (раздел 18). Порядок файлов — см. base.css. */

/* ============================================================ 18. Общие партиалы: шапка урока, таблица этапов, плитки покупки */
/* Используются страницей документа, публичным примером, посадочными «Техкарты»
   и страницей «закончились» — поэтому живут здесь, а не в css/pages.
   Шапка урока «ключ — значение»: семантическая таблица (th scope=row нужны
   SEO-страницам), раскладка — сетка по ширине шапки; лист документа — этап 4. */
.tk-meta {
  display: block;
  width: 100%;
  border-collapse: collapse;
  container-type: inline-size;
}

/* Короткие поля — ряды от 220 px. Это и вид на телефоне (уже 464 px — по одному в строке), и запасной
   вид для браузеров без container queries; шире — сетка ниже */
.tk-meta tbody {
  display: flex;
  flex-wrap: wrap;
  column-gap: 24px;
}

/* Подпись слева в 116 px: «Образовательная» (113 px) помещается без переноса (techkarta-back#161) */
.tk-meta tr {
  flex: 1 1 220px;
  min-width: 0;
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font: var(--t-small);
}

/* Длинные поля («Тема», «УМК») — вторым tbody под короткими, каждое строкой во всю ширину:
   в равной колонке длинная тема шла столбиком по 2–3 слова (techkarta-back#156). Подпись — над значением,
   и на телефоне тоже: подписью слева тема шла колонкой в 174 px на 9–13 строк (techkarta-back#161) */
.tk-meta tbody.tk-meta__wide tr {
  flex-basis: 100%;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
}

/* Сетка коротких полей по ширине шапки: колонки в рядах ровные и без пустых ячеек (techkarta-back#156).
   4 и 8 полей — 2 колонки, от 952 px — 4; 3 поля — сразу 3. Подпись — над значением: слева она забирала
   116 px ячейки, и значения шли в 2–3 строки с переносами («Образова-тельная», techkarta-back#161) */
@container (min-width: 464px) {
  .tk-meta tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tk-meta tbody:has(> tr:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tk-meta tbody.tk-meta__wide {
    grid-template-columns: minmax(0, 1fr);
  }

  .tk-meta tr {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
    align-content: start;
  }
}

@container (min-width: 952px) {
  .tk-meta tbody {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.tk-meta th,
.tk-meta td {
  display: block;
  padding: 0;
  font: inherit;
  text-align: left;
  min-width: 0;
}

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

.tk-meta td {
  color: var(--ink);
  /* Длинное слово («общеметодологической», «сложноподчинённом») — переносом, а не за край ячейки. Только слова
     от 10 букв: без лимита Chromium делит и слова, которые помещаются в строку («Урок открытия но-вого знания») */
  overflow-wrap: break-word;
  hyphens: auto;
  hyphenate-limit-chars: 10 4 4;
}

/* «Тема» и «УМК» во всю ширину — по словам, без дефисов («Матема-тика»), как остальной текст страницы */
.tk-meta__wide td {
  hyphens: manual;
}

/* Обёртка таблицы даёт боковую прокрутку на SEO-страницах; внутри карточки
   «Ход урока» прокручивает сама карточка (см. .doc-stages). Обёртка — контейнер: по её ширине таблица решает,
   прокручиваться ли (ниже, после правил таблицы) */
.tk-stages-scroll {
  overflow-x: auto;
  container-type: inline-size;
}

/* Подсказка «Таблицу можно прокрутить вбок» — только пока прокрутка есть. Родитель подсказки и обёртки
   (.tk-stages-box) той же ширины, что обёртка: от 960 px таблица помещается, и подсказка скрыта (techkarta-back#162) */
.tk-stages-box {
  container-type: inline-size;
}

@container (min-width: 960px) {
  .tk-stages-hint {
    display: none;
  }
}

/* Таблица этапов — <table> для семантики и SEO-страниц, раскладка — сетка:
   32 180 64 1fr 1fr 1fr [1fr] 150. Таблица без прокрутки — этап 4. */
.table--stages-doc {
  display: block;
  min-width: 1100px;
  border-collapse: collapse;
  font: var(--t-small);
}

.table--stages-doc thead,
.table--stages-doc tbody {
  display: block;
}

.table--stages-doc tbody {
  margin-top: 8px;
}

.table--stages-doc tr {
  display: grid;
  grid-template-columns: 32px 180px 64px 1fr 1fr 1fr 150px;
  gap: 0 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  align-items: start;
}

.table--stages-wide tr {
  grid-template-columns: 32px 180px 64px 1fr 1fr 1fr 1fr 150px;
}

.table--stages-doc thead tr {
  padding: 12px 0;
  border-bottom-color: var(--line-strong);
  font: 600 14px/20px var(--font-sans);
  color: var(--text-2);
}

.table--stages-doc th,
.table--stages-doc td {
  display: block;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  min-width: 0;
}

.table--stages-doc tbody .num {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.table--stages-doc tbody .name {
  color: var(--ink);
  font-weight: 600;
}

.table--stages-doc tbody .time {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table--stages-doc .total {
  grid-template-columns: 32px 180px 64px 1fr;
  padding: 16px 0 24px;
  border-bottom: 0;
  font: 600 16px/24px var(--font-sans);
  color: var(--ink);
}

/* min-width 1100 px резал колонку «Контроль» на 1366 и 1440 (обёртка 998 и 1072 px), а полоса прокрутки на Mac
   скрыта. От 960 px ширины обёртки таблица идёт по её ширине; уже 1040 px колонки названия и контроля уже
   (150/130 вместо 180/150), чтобы текстовые не падали ниже ~118 px (8 колонок на 960 px). Длинное слово
   («сформулированному», «причинно-следственные») в узкой колонке — переносом, как у .tk-meta td, а не в соседнюю
   колонку. Уже 960 px — прокрутка, как была (techkarta-back#162) */
@container (min-width: 960px) {
  .table--stages-doc {
    min-width: 0;
    width: 100%;
  }

  .table--stages-doc td {
    overflow-wrap: break-word;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
  }
}

@container (960px <= width < 1040px) {
  .table--stages-doc tr {
    grid-template-columns: 32px 150px 64px 1fr 1fr 1fr 130px;
  }

  .table--stages-wide tr {
    grid-template-columns: 32px 150px 64px 1fr 1fr 1fr 1fr 130px;
  }

  .table--stages-doc .total {
    grid-template-columns: 32px 150px 64px 1fr;
  }
}

/* Плитки покупки (partials/buy_tiles.html): три кнопки-карточки, сумму
   считает сервер. Кликабельна вся плитка, при наведении рамка --primary. */
.buy-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 12px;
  margin: 0;
}

.buy-tile {
  appearance: none;
  margin: 0;
  font: inherit;
  display: grid;
  gap: 4px;
  padding: 16px 20px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-8);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--duration-fast) var(--ease-standard);
}

.buy-tile:hover {
  border-color: var(--primary);
  box-shadow: inset 0 0 0 1px var(--primary);
}

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

.buy-tile__price {
  font: 600 20px/28px var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.buy-tile__per {
  font: var(--t-small);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

/* Заголовок карточки с подписью: h2 и абзац под ним */
.tk-card-head {
  display: grid;
  gap: 4px;
}

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

.tk-card-head p {
  font: var(--t-small);
  color: var(--text-2);
  text-wrap: pretty;
}

.tk-card-head .tk-eyebrow {
  margin-bottom: 4px;
}

/* ============================================================ 30. Стиль по референсам */
/* Итерация 1 (design-audit/style.md): поверх компонентов выше. Когда стиль
   устоится, правила переедут в свои разделы. */

/* Ссылки — синие без подчёркивания; в сплошном тексте — тонкое подчёркивание,
   чтобы ссылку было видно не только по цвету */
a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

p a,
.tk-mut a,
.tk-legal a,
.tk-prose a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Карточки: белые, без рамки, мягкая тень, крупное скругление */
.tk-card,
.tk-hero .tk-card,
.tk-hero--preview {
  border: 0;
  border-radius: var(--r-16);
  box-shadow: var(--shadow-card);
}

.tk-card--dark {
  border: 1px solid var(--primary-edge);
  background: var(--pastel-blue);
  box-shadow: none;
}

a.tk-card,
.tk-card a.tk-card {
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}

/* Пакеты на учебный период (тарифы, главная): карточка с тенью, цена крупно,
   популярный — синяя рамка и метка */
.tk-tier {
  gap: 20px;
  border: 0;
  border-radius: var(--r-16);
  box-shadow: var(--shadow-card);
}

.tk-tier--featured {
  position: relative;
  box-shadow:
    inset 0 0 0 2px var(--primary),
    var(--shadow-card-hover);
}

/* Метка сидит на верхней рамке и не сдвигает содержимое: цены пакетов на одной линии */
.tk-tier__badge {
  position: absolute;
  top: 0;
  left: 24px;
  transform: translateY(-50%);
}

.tk-tier__badge {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font: 600 14px/20px var(--font-sans);
  white-space: nowrap;
}

.tk-tier__amount {
  display: grid;
  gap: 2px;
}

.tk-tier__price {
  font: 700 36px/44px var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.tk-tier__per {
  font: var(--t-small);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.tk-tier__list {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.tk-tier__list .tk-icon {
  color: var(--success);
}

a.tk-card:hover {
  box-shadow: var(--shadow-card-hover);
  text-decoration: none;
}

.tk-inset {
  border-radius: var(--r-12);
}

/* Кнопки: основная — синяя, вторичная — голубая подложка с синим текстом */
.tk-btn {
  font-weight: 500;
  color: var(--on-primary);
}

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

.tk-btn--secondary,
.tk-btn--outline {
  background: var(--primary-tint);
  border-color: var(--primary-edge);
  color: var(--link);
}

.tk-btn--secondary:hover,
.tk-btn--outline:hover,
.tk-btn--secondary:active,
.tk-btn--outline:active {
  background: var(--band);
  color: var(--link-hover);
}

.tk-btn--tertiary {
  color: var(--link);
  text-decoration: none;
}

.tk-btn--tertiary:hover,
.tk-btn--tertiary:active {
  color: var(--link-hover);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* Главный блок — на светло-голубой полосе, как верх референса */
.tk-hero {
  background: var(--band);
  border: 1px solid var(--primary-edge);
  border-radius: var(--r-16);
  padding: 40px;
}

@media (max-width: 767px) {
  .tk-hero {
    padding: 24px 16px;
  }
}

/* Вопросы-ответы: синий значок в голубом кружке */
.tk-faq__q .tk-icon {
  box-sizing: content-box;
  padding: 8px;
  border-radius: 50%;
  background: var(--primary-tint);
  color: var(--link);
}

/* ---------- Меню */
.tk-side {
  border-right: 1px solid var(--line);
}

.tk-side__brand {
  font: 700 20px/28px var(--font-sans);
  color: var(--ink);
  text-decoration: none;
}

.tk-side__item .tk-icon {
  color: var(--link);
}

.tk-side__item.is-active,
.tk-side__sub.is-active {
  background: var(--primary-tint);
  box-shadow: none;
  color: var(--link);
  font-weight: 600;
}

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

/* Кнопка «Создать документ» под шапкой меню: компактная, во всю ширину,
   значок и подпись по центру */
.tk-side__create {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin: 4px 16px 12px;
  padding: 0 12px;
  font: 600 14px/20px var(--font-sans);
  flex-shrink: 0;
}

.tk-side__create .tk-icon {
  color: var(--on-primary);
}

.tk-side__create .tk-side__label {
  flex: 0 1 auto;
}

@media (min-width: 1024px) {
  .tk-shell[data-collapsed="true"] .tk-side__create {
    width: 40px;
    margin: 4px auto 12px;
    padding: 0;
  }
}

/* Полоса прокрутки меню: системную прячем совсем (она занимает место и в
   Chrome не красится при scrollbar-width), вместо неё — свой бегунок справа
   от границы панели, поверх страницы; виден только под курсором и при
   прокрутке (initSideScrollbar в app.js) */
.tk-side {
  scrollbar-width: none;
}

.tk-side::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.tk-side__thumb {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  border-radius: 3px;
  background: var(--scrollbar);
  opacity: 0;
  pointer-events: none;
  z-index: 61;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.tk-side:hover + .tk-side__thumb,
.tk-side.is-scrolling + .tk-side__thumb {
  opacity: 1;
}

/* Пункты внутри «Дополнительно» — со своими значками, с отступом под группой */
.tk-side__sub--icon {
  gap: 10px;
  min-height: 44px;
  padding-left: 20px;
  font: 400 16px/24px var(--font-sans);
}

.tk-side__sub--icon .tk-icon {
  color: var(--link);
}

.tk-side__sub.is-active {
  box-shadow: none;
  color: var(--link);
}

/* Низ меню: прибит к краю панели и при прокрутке, и когда пунктов мало */
.tk-side__bottom {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: auto;
  /* Снизу на 12 px больше: плашка браузера с адресом ссылки под курсором (левый нижний угол окна) меньше закрывает
     аватар и имя */
  padding: 8px 8px 20px;
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* Аккаунт внизу меню: фото, имя и баланс, справа — маленькая кнопка выхода.
   Фото и имя ведут в личный кабинет, баланс — на тарифы (#credits-badge
   обновляет опрос статуса генерации, поэтому он отдельная ссылка) */
.tk-account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px 6px 8px;
  border-radius: var(--r-12);
}

.tk-account__avatar {
  display: flex;
  flex-shrink: 0;
  border-radius: 50%;
  text-decoration: none;
}

.tk-account__who {
  flex: 1;
  min-width: 0;
  display: grid;
}

/* Почта и ссылки под ней — цели нажатия не ниже 24 px (WCAG 2.5.8): в 15–20 px стопкой палец попадал
   в соседнюю (#143) */
.tk-account__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 14px/24px var(--font-sans);
  color: var(--ink);
  text-decoration: none;
}

.tk-account__name:hover {
  color: var(--link);
  text-decoration: none;
}

.tk-account__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  font: 400 12px/16px var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
}

.tk-account__meta a {
  display: flex;
  align-items: center;
  min-height: 24px;
}

/* « · » и баланс переносятся вместе */
.tk-account__credits {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tk-account__meta .badge {
  color: inherit;
  text-decoration: none;
}

.tk-account__meta .badge:hover {
  color: var(--link);
}

.tk-account__logout {
  margin: 0;
  flex-shrink: 0;
}

.tk-account__out {
  appearance: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-8);
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}

.tk-account__out:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.tk-account__out:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Гость: строка с остатком и «Войти» под ней */
.tk-account--guest {
  display: grid;
  gap: 8px;
  padding: 4px;
}

.tk-account__hint {
  margin: 0;
  padding: 0 4px;
  font: 400 12px/16px var(--font-sans);
  color: var(--text-2);
}

.tk-account__hint .badge {
  color: inherit;
}

.tk-side__login {
  display: flex;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  font: 600 14px/20px var(--font-sans);
}

.tk-side__login .tk-side__label {
  flex: 0 1 auto;
}

/* Свёрнутое меню (только десктоп — на телефоне меню всегда полное): фото и
   выход столбиком, у гостя — значок входа */
@media (min-width: 1024px) {
  .tk-shell[data-collapsed="true"] .tk-account {
    flex-direction: column;
    gap: 4px;
    padding: 4px 0;
  }

  .tk-shell[data-collapsed="true"] .tk-account__who,
  .tk-shell[data-collapsed="true"] .tk-account__hint {
    display: none;
  }

  .tk-shell[data-collapsed="true"] .tk-side__login {
    width: 40px;
    margin: 0 auto;
    padding: 0;
  }
}

/* Тема — тумблер строкой меню под «Дополнительно» */
.tk-side__prefs {
  padding: 0 8px 12px;
  flex-shrink: 0;
}

.tk-theme-switch {
  appearance: none;
  width: 100%;
  margin: 0;
  border: 0;
  text-align: left;
}

.tk-switch {
  position: relative;
  width: 32px;
  height: 18px;
  margin-left: auto;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--line-strong);
  transition: background-color var(--duration-base) var(--ease-standard);
}

.tk-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
  transition: transform var(--duration-base) var(--ease-standard);
}

.tk-theme-switch[aria-checked="true"] .tk-switch {
  background: var(--primary);
}

.tk-theme-switch[aria-checked="true"] .tk-switch::after {
  transform: translateX(14px);
}

@media (min-width: 1024px) {
  .tk-shell[data-collapsed="true"] .tk-switch {
    display: none;
  }
}

/* Верхняя панель телефона: «Создать» рядом с «Меню» */
.tk-topbar__create {
  gap: 4px;
  padding: 0 12px;
}

.tk-topbar__create .tk-icon {
  color: var(--on-primary);
}

/* ---------- Окно «Что создать?» */
/* Прокручивается не само окно, а .tk-create__inner: полоса прокрутки окна рисовалась поверх скруглённых
   правых углов, а overflow: hidden обрезает содержимое по скруглению */
.tk-create {
  width: min(880px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-16);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-dialog);
}

.tk-create::backdrop {
  background: var(--scrim);
}

.tk-create__inner {
  display: grid;
  gap: 24px;
  max-height: inherit;
  padding: 32px;
  overflow-y: auto;
}

/* Сильнее общего правила .tk-create ::-webkit-scrollbar-track ниже: у вертикальной полосы отступ сверху и снизу */
.tk-create .tk-create__inner::-webkit-scrollbar-track {
  margin: 16px 0;
}

.tk-create__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

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

.tk-create__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--primary-tint);
  color: var(--link);
  cursor: pointer;
}

.tk-create__close:hover {
  background: var(--band);
}

.tk-create__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Все плитки одного размера: ряды — по самой высокой плитке (название в две строки), плитка — на всю ячейку */
  grid-auto-rows: 1fr;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tk-create__opt {
  --tint: var(--pastel-blue);
  --edge: var(--primary-edge);
  display: grid;
  align-content: start;
  gap: 4px;
  height: 100%;
  min-height: 176px;
  padding: 20px;
  border: 1px solid var(--edge);
  border-radius: var(--r-16);
  background: linear-gradient(135deg, var(--tint) 0%, var(--tint) 45%, var(--surface) 140%);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow var(--duration-fast) var(--ease-standard);
}

.tk-create__opt:hover {
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-card-hover);
}

.tk-create__opt--plan {
  --edge: var(--pastel-yellow-edge);
  --tint: var(--pastel-yellow);
}

.tk-create__opt--worksheet {
  --edge: var(--pastel-mint-edge);
  --tint: var(--pastel-mint);
}

.tk-create__opt--test {
  --edge: var(--pastel-pink-edge);
  --tint: var(--pastel-pink);
}

/* Цвета остальных форматов — как у их карточек на лендинге (.lp-format--*) */
.tk-create__opt--cards {
  --edge: var(--pastel-lilac-edge);
  --tint: var(--pastel-lilac);
}

.tk-create__opt--dictation {
  --edge: var(--pastel-sky-edge);
  --tint: var(--pastel-sky);
}

.tk-create__opt--presentation {
  --edge: var(--pastel-peach-edge);
  --tint: var(--pastel-peach);
}

.tk-create__opt--classhour {
  --edge: var(--pastel-lime-edge);
  --tint: var(--pastel-lime);
}

.tk-create__art {
  width: 56px;
  height: 56px;
  margin-bottom: 12px;
  color: var(--link);
}

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

.tk-create__for {
  font: var(--t-small);
  color: var(--text-2);
}

/* Строка баланса прилипает к низу окна: на ноутбуках 768 px и в листе на телефоне плитки не помещаются, и без
   этого строку видно только после прокрутки. Нижний отступ окна — у неё (у .tk-create__inner снизу 0; окно
   уведомления с тем же .tk-create__inner, но без строки баланса, не задето), сверху -12 + 12 px: пока всё
   помещается, строка стоит там же, где стояла */
.tk-create__inner:has(> .tk-create__balance) {
  padding-bottom: 0;
  /* Плитка в фокусе (Tab) прокручивается целиком над строкой баланса, а не прячется под ней */
  scroll-padding-bottom: 64px;
}

.tk-create__balance {
  position: sticky;
  bottom: 0;
  margin-top: -12px;
  padding: 12px 0 32px;
  background: var(--surface);
  font: var(--t-small);
  color: var(--text-2);
}

.tk-noscroll {
  overflow: hidden;
}

@media (max-width: 767px) {
  /* На телефоне — лист снизу */
  .tk-create {
    width: 100vw;
    max-width: 100vw;
    max-height: 90dvh;
    margin: auto 0 0;
    border-radius: var(--r-16) var(--r-16) 0 0;
  }

  .tk-create__inner {
    gap: 16px;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
  }

  /* Строка баланса в листе — 48 px, у гостя на 320 — в две строки, 68 px */
  .tk-create__inner:has(> .tk-create__balance) {
    padding-bottom: 0;
    scroll-padding-bottom: 72px;
  }

  .tk-create__balance {
    margin-top: -8px;
    padding: 8px 0 calc(20px + env(safe-area-inset-bottom));
  }

  .tk-create__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    gap: 8px;
  }

  .tk-create__opt {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    align-items: center;
    min-height: 0;
    padding: 12px 16px;
  }

  .tk-create__art {
    grid-row: span 2;
    width: 48px;
    height: 48px;
    margin: 0;
  }

  .tk-create[open] {
    animation: tk-sheet-in var(--duration-base) var(--ease-standard);
  }
}

@keyframes tk-sheet-in {
  from {
    transform: translateY(24px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tk-create[open] {
    animation: none;
  }
}

/* Печать всегда светлая */
@media print {
  :root {
    color-scheme: light;
    --ink: #000;
    --text-2: #333;
    --bg: #fff;
    --surface: #fff;
    --surface-2: #eee;
    --line: #999;
    --link: #000;
  }
}

/* Пункт меню нажимается целиком: курсор «рука» над всей плашкой — и над значком, текстом и счётчиком */
.tk-side__item,
.tk-side__item * {
  cursor: pointer;
}

/* Пункты меню и карточки-ссылки не подчёркиваются при наведении */
.tk-side__item:hover,
.tk-side__sub:hover,
.tk-side__brand:hover,
.tk-topbar__brand:hover,
.tk-create__opt:hover {
  text-decoration: none;
}

/* Раздел «Мои документы»: счётчик справа; в свёрнутом меню только значки */
.tk-side__item .tk-side__count {
  margin-left: auto;
}

.tk-shell[data-collapsed="true"] .tk-side__count {
  display: none;
}

/* Непрочитанные уведомления — синяя таблетка справа; в свёрнутом меню точка у значка */
.tk-side__badge {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--on-primary);
  font: 700 12px/20px var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.tk-shell[data-collapsed="true"] .tk-side__item:has(.tk-side__badge) {
  position: relative;
}

.tk-shell[data-collapsed="true"] .tk-side__badge {
  position: absolute;
  top: 8px;
  left: calc(50% + 4px);
  min-width: 0;
  width: 8px;
  height: 8px;
  padding: 0;
  overflow: hidden;
  color: transparent;
  box-shadow: 0 0 0 2px var(--surface);
}

/* «Дополнительно» отделено от раздела «Мои документы» линией */
.tk-side__group--more {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

/* Активный пункт выделен фоном и цветом, а не толщиной: жирное начертание
   не помещалось («Технологические кар…») и сдвигало текст при переходах */
.tk-side__item.is-active,
.tk-side__sub.is-active {
  font-weight: 500;
}

/* Полосы прокрутки внутри страницы (таблица этапов и др.): прозрачная
   дорожка с отступом от скруглённых углов, тонкий скруглённый бегунок */
.tk-main ::-webkit-scrollbar,
.tk-create ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.tk-main ::-webkit-scrollbar-track,
.tk-create ::-webkit-scrollbar-track {
  margin: 0 16px;
  background: transparent;
}

.tk-main ::-webkit-scrollbar-thumb,
.tk-create ::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 10px;
  background: var(--scrollbar) padding-box;
}

.tk-main ::-webkit-scrollbar-thumb:hover,
.tk-create ::-webkit-scrollbar-thumb:hover {
  border-width: 2px;
  background-color: color-mix(in srgb, var(--scrollbar) 100%, var(--ink) 25%);
}

.tk-main ::-webkit-scrollbar-corner {
  background: transparent;
}

@supports not selector(::-webkit-scrollbar) {
  .tk-main *,
  .tk-create * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar) transparent;
  }
}

/* Знак в шапке меню — ссылка на главную: при наведении не подчёркивается */
.tk-side__mark:hover,
.tk-side__mark:visited {
  text-decoration: none;
}

/* Меню на 2 px мельче остальной страницы: пункты 14,
   заголовки разделов, подписи и счётчики 12 */
.tk-side__brand {
  font-size: 18px;
  line-height: 26px;
}

.tk-side__item,
.tk-side__sub--icon {
  font-size: 14px;
  line-height: 20px;
}

.tk-side__title,
.tk-side__caption,
.tk-side__action,
.tk-side__sub,
.tk-side__count {
  font-size: 12px;
  line-height: 16px;
}

/* Меню не тянется на всю высоту: тумблер темы стоит сразу под «Дополнительно» */
.tk-side__nav {
  flex: 0 0 auto;
  padding-bottom: 2px;
}

/* Пункты меню плотнее, значки мельче */
.tk-side__nav {
  gap: 2px;
}

.tk-side__item {
  min-height: 36px;
  gap: 8px;
}

.tk-side__item .tk-icon {
  width: 18px;
  height: 18px;
}

/* Аватарка: фото или буквы на голубом круге (partials/avatar.html) */
.tk-avatar {
  width: var(--avatar-size, 40px);
  height: var(--avatar-size, 40px);
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.tk-avatar--letters {
  display: inline-grid;
  place-items: center;
  background: var(--primary-tint);
  color: var(--link);
  font: 700 calc(var(--avatar-size, 40px) * 0.4) / 1 var(--font-sans);
  user-select: none;
}


/* Вкладки-разделы страницы (личный кабинет, примеры документов): отдельные адреса, без JS */
.tk-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  padding: 4px;
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
  border-radius: var(--r-12);
  background: var(--surface-2);
}

.tk-tabs__item {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--r-8);
  color: var(--text-2);
  font: 500 14px/20px var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
}

.tk-tabs__item:hover {
  color: var(--ink);
  text-decoration: none;
}

.tk-tabs__item.is-active {
  background: var(--surface);
  color: var(--link);
  box-shadow: 0 1px 4px rgba(11, 31, 51, 0.12);
}

/* Кнопки в шапке страницы: в ряд, на телефоне переносятся */
.tk-page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Описание под заголовком страницы */
.tk-page-lead {
  max-width: 720px;
  margin: 4px 0 0;
  font: var(--t-text);
  color: var(--text-2);
  text-wrap: pretty;
}

/* Переключатель-сегмент: выбор одного из нескольких (радиокнопки), тот же
   вид, что у вкладок .tk-tabs */
.tk-segment {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  max-width: 100%;
  padding: 4px;
  border-radius: var(--r-12);
  background: var(--surface-2);
}

.tk-segment__opt {
  position: relative;
  display: inline-flex;
  border: 0;
  background: none;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--r-8);
  color: var(--text-2);
  font: 500 14px/20px var(--font-sans);
  text-align: center;
  cursor: pointer;
  user-select: none;
}

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

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

.tk-segment__opt:has(input:checked),
.tk-segment__opt[data-on="true"] {
  background: var(--surface);
  color: var(--link);
  box-shadow: 0 1px 4px rgba(11, 31, 51, 0.12);
}

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

.tk-segment[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px var(--error);
}

@media (max-width: 767px) {
  .tk-segment {
    display: flex;
  }

  .tk-segment__opt {
    flex: 1 1 auto;
  }
}

/* ============================================================ Блок-подсказка справа */
/* Личный кабинет и уведомления: справа один совет или предложение
   (partials/side_tip.html). Занимает пустое место широкого экрана, на узком
   его нет. Пастельная плашка с обводкой своего цвета, как карточки форматов.
   Начинается вровень с первой карточкой страницы (--tip-offset задаёт CSS
   страницы) и прилипает при прокрутке — исключение из правила «блоки не
   прилипают». */
.tk-with-tip {
  display: grid;
  grid-template-columns: minmax(0, 880px) minmax(260px, 320px);
  align-items: start;
  gap: 32px;
}

.tk-with-tip__main {
  min-width: 0;
}

/* Шапка страницы по ширине левой колонки: кнопки в ней («Прочитать все»)
   кончаются там же, где карточки. Подсказка при такой ширине всегда 320. */
.tk-main:has(.tk-with-tip) .tk-page-head {
  max-width: min(880px, 100% - 320px - 32px);
}

.tk-tip {
  --tint: var(--pastel-blue);
  --edge: var(--primary-edge);
  position: sticky;
  top: 24px;
  margin-top: var(--tip-offset, 0px);
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--edge);
  border-radius: var(--r-16);
  background: linear-gradient(160deg, var(--tint) 0%, var(--tint) 45%, var(--surface) 130%);
  color: var(--ink);
}

.tk-tip--yellow {
  --tint: var(--pastel-yellow);
  --edge: var(--pastel-yellow-edge);
}

.tk-tip--mint {
  --tint: var(--pastel-mint);
  --edge: var(--pastel-mint-edge);
}

.tk-tip--pink {
  --tint: var(--pastel-pink);
  --edge: var(--pastel-pink-edge);
}

.tk-tip--lilac {
  --tint: var(--pastel-lilac);
  --edge: var(--pastel-lilac-edge);
}

.tk-tip__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--edge);
  color: var(--link);
}

.tk-tip__eyebrow {
  font: 600 14px/20px var(--font-sans);
  color: var(--text-2);
}

.tk-tip__title {
  margin: 0;
  font: 700 20px/28px var(--font-sans);
  color: var(--ink);
  text-wrap: balance;
}

.tk-tip__text {
  margin: 0;
  color: var(--text-2);
  text-wrap: pretty;
}

.tk-tip__btn {
  margin-top: 12px;
  gap: 8px;
}

@media (max-width: 1279px) {
  .tk-with-tip {
    display: block;
  }

  .tk-main:has(.tk-with-tip) .tk-page-head {
    max-width: 880px;
  }

  .tk-tip {
    display: none;
  }
}

/* ============================================================ 31. Коммерческий стиль (ветка redesign) */
/* Поверх раздела 30: кнопки-«таблетки» без тени и подъёма, крупнее скругления, заголовки гротеском Manrope,
   главный блок кабинета — с цветным градиентом. Отменить стиль целиком — удалить этот раздел и токены. */
.tk-btn {
  border-radius: 999px;
  font-weight: 700;
}

.tk-btn--secondary,
.tk-btn--outline {
  background: var(--surface);
  border-color: var(--primary-edge);
}

.tk-btn--secondary:hover,
.tk-btn--outline:hover,
.tk-btn--secondary:active,
.tk-btn--outline:active {
  background: var(--primary-tint);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
}

.tk-card {
  border-radius: 20px;
}

.tk-hero {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-24);
  background:
    radial-gradient(circle at 70% 110%, color-mix(in srgb, var(--berry) 22%, transparent), transparent 40%),
    linear-gradient(135deg, var(--pastel-lilac), var(--pastel-blue) 55%, var(--pastel-sky));
}