/* ============================================================
   Общие стили компонентов SUPPORT. Префикс `.su-` — чтобы файл можно было
   подключить в приложение с любым своим CSS и ничего не задеть.

   Здесь обычный CSS, а не CSS-модули: у `support-cases` один `globals.css`
   без модулей, у `support-research` модули есть. Плоский префиксованный файл
   ложится в оба и не зависит от того, как настроен бандлер.

   Все значения — из `tokens.css`. Числа по месту здесь заводить нельзя: если
   нужного токена нет, он добавляется в `tokens.css`.
   ============================================================ */

/* ---------- Семантическая типографика ---------- */

.su-type-display {
  font-family: var(--type-display-family);
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-leading);
  letter-spacing: var(--type-display-tracking);
}

.su-type-title {
  font-family: var(--type-title-family);
  font-size: var(--type-title-size);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-leading);
  letter-spacing: var(--type-title-tracking);
}

.su-type-heading {
  font-family: var(--type-heading-family);
  font-size: var(--type-heading-size);
  font-weight: var(--type-heading-weight);
  line-height: var(--type-heading-leading);
  letter-spacing: var(--type-heading-tracking);
}

.su-type-lead {
  font-family: var(--type-lead-family);
  font-size: var(--type-lead-size);
  font-weight: var(--type-lead-weight);
  line-height: var(--type-lead-leading);
  letter-spacing: var(--type-lead-tracking);
}

.su-type-body {
  font-family: var(--type-body-family);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  letter-spacing: var(--type-body-tracking);
}

.su-type-ui {
  font-family: var(--type-ui-family);
  font-size: var(--type-ui-size);
  font-weight: var(--type-ui-weight);
  line-height: var(--type-ui-leading);
  letter-spacing: var(--type-ui-tracking);
}

.su-type-caption {
  font-family: var(--type-caption-family);
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-leading);
  letter-spacing: var(--type-caption-tracking);
}

/* ---------- Таблицы ---------- */

.su-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.su-table-scroll::-webkit-scrollbar {
  height: calc(var(--space-gap) * 0.375);
}

.su-table-scroll::-webkit-scrollbar-thumb {
  border-radius: var(--radius-s);
  background: var(--border);
}

.su-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--text-doc);
  font-size: var(--font-size-small);
  line-height: var(--type-body-leading);
}

.su-table th,
.su-table td {
  padding: calc(var(--space-gap) * 0.5) var(--space-gap) calc(var(--space-gap) * 0.75) 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

.su-table th:last-child,
.su-table td:last-child {
  padding-right: 0;
}

.su-table thead th {
  padding-bottom: calc(var(--space-gap) * 0.5);
  border-bottom-color: var(--text-primary);
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  font-weight: 700;
  line-height: var(--type-ui-leading);
  vertical-align: bottom;
}

.su-table th p,
.su-table td p {
  margin: 0;
}

.su-table tbody tr:last-child th,
.su-table tbody tr:last-child td {
  border-bottom: 0;
}

/* ---------- Скрытый скроллбар ---------- */

.su-scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.su-scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ---------- Список оглавления и маркер ---------- */

.su-toc-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Полоска активного пункта. Позиционируется из JS (`useTocMarker`) — здесь
   только вид и то, как она едет. */
.su-toc-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  border-radius: var(--radius-s);
  background-color: var(--text-primary);
  pointer-events: none;
  transition:
    transform var(--transition-normal) ease-out,
    height var(--transition-normal) ease-out,
    opacity var(--transition-normal) ease-out;
}

.su-toc-item {
  padding: 0 12px;
  font-size: var(--font-size-small);
  line-height: 1.4;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--transition-slow) ease-out;
}

/* Возврат к активному цвету медленный, уход — мгновенный: на hover задержка
   читается как залипание. */
.su-toc-item:hover {
  color: var(--text-primary);
  transition: none;
}

.su-toc-item--active {
  color: var(--text-primary);
}

/* ---------- Мобильная панель оглавления ---------- */

/* Панель по умолчанию скрыта: на какой ширине она появляется, решает
   приложение — вместе с тем, где прячется его боковая колонка. Иначе на
   промежуточных ширинах видно и колонку, и панель одновременно.

   В приложении: `@media (max-width: N) { .su-toc-anchor, .su-toc-backdrop
   { display: block } }` */
.su-toc-anchor {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 80;
}

.su-toc-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 79;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal) ease-out;
}

.su-toc-backdrop--visible {
  opacity: 1;
  pointer-events: auto;
}

.su-toc-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;

  /* Свёрнутая таблетка */
  width: 152px;
  height: 40px;
  border-radius: var(--radius-xl);

  background-color: var(--bg-float);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  transition:
    width 0.35s var(--ease-morph),
    height 0.35s var(--ease-morph);
}

.su-toc-panel--open {
  width: 320px;
  height: 70dvh;
  cursor: default;
}

@media (max-width: 400px) {
  .su-toc-panel--open {
    width: calc(100vw - 40px);
  }
}

/* Подпись: в свёрнутом виде стоит слева от иконки, в развёрнутом уезжает в
   угол панели. Едет позицией, а не отступами — так текст не переносится
   посреди анимации. */
.su-toc-label {
  position: absolute;
  top: 11px;
  left: 20px;
  margin: 0;
  font-size: var(--font-size-small);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  color: var(--text-primary);
  transition:
    top 0.35s var(--ease-morph),
    left 0.35s var(--ease-morph);
}

.su-toc-panel--open .su-toc-label {
  top: 20px;
  left: 24px;
}

.su-toc-items {
  margin-top: 56px;
  padding: 0 12px 48px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
  transition:
    opacity 0.25s ease-out,
    transform 0.25s ease-out;
}

.su-toc-items::-webkit-scrollbar {
  display: none;
}

/* Пункты появляются с задержкой — после того, как таблетка выросла в панель. */
.su-toc-items--visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition:
    opacity 0.25s ease-out 0.3s,
    transform 0.25s ease-out 0.3s;
}

/* Список не влезает — нижний край растворяется, чтобы было видно, что он
   продолжается. */
.su-toc-items--overflow {
  mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent 100%);
}

.su-toc-toggle {
  position: absolute;
  bottom: 2px;
  right: 6px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--radius-m);
  color: var(--icon-primary);
  cursor: pointer;
}

/* Иконки лежат одна на другой и перекрещиваются по прозрачности. */
.su-toc-toggle svg {
  position: absolute;
  transition: opacity var(--transition-normal) ease-out;
}

.su-toc-icon--hidden {
  opacity: 0;
}