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

/* ============================================================ 16. Узкие экраны */
/* До 1024 px оболочка в одну колонку с верхней панелью, меню выезжает слева. */
@media (max-width: 1023px) {
  /* Колонка: рабочая область растягивается, плашки внизу (.tk-bars) — последней строкой у низа экрана */
  .tk-shell {
    display: flex;
    flex-direction: column;
    padding-top: 56px;
    min-height: 100vh;
  }

  .tk-main {
    flex: 1 0 auto;
    padding: 24px var(--page-pad) 48px;
  }

  .tk-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    padding: 0 8px 0 16px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }

  .tk-topbar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 700 18px/24px var(--font-serif);
    color: var(--ink);
    text-decoration: none;
    flex: 1;
    min-width: 0;
  }

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

  .tk-topbar__balance {
    font: 500 14px/20px var(--font-sans);
    font-variant-numeric: tabular-nums;
    color: var(--text-2);
    white-space: nowrap;
  }

  .tk-topbar__balance .badge {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
    color: inherit;
    text-decoration: none;
  }

  .tk-topbar__menu {
    appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: var(--r-8);
    color: var(--ink);
  }

  .tk-topbar__menu:hover {
    background: var(--surface-2);
  }

  .tk-side {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 60;
    width: min(320px, 88vw);
    /* Высота — явно экран: с `align-self: start` из shell.css Chromium при одних top/bottom даёт панели
       высоту содержимого, и низ меню (вход, аккаунт) уходил за экран без прокрутки. Прокрутка внутри
       панели — overflow-y из shell.css */
    height: 100vh;
    height: 100dvh;
    border-right: 1px solid var(--line);
    transform: translateX(-102%);
    transition: transform var(--duration-base) var(--ease-standard);
  }

  .tk-shell[data-collapsed="true"] .tk-side {
    width: min(320px, 88vw);
  }

  .tk-shell[data-collapsed="true"] .tk-side__head {
    flex-direction: row;
    padding: 16px 8px 8px 16px;
  }

  .tk-shell[data-collapsed="true"] .tk-side__brand,
  .tk-shell[data-collapsed="true"] .tk-side__label,
  .tk-shell[data-collapsed="true"] .tk-side__chev {
    display: revert;
  }

  .tk-shell[data-collapsed="true"] .tk-side__sub,
  .tk-shell[data-collapsed="true"] .tk-side__user {
    display: flex;
  }

  .tk-shell[data-collapsed="true"] .tk-side__item,
  .tk-shell[data-collapsed="true"] .tk-side__foot button.tk-side__item {
    justify-content: flex-start;
    padding: 0 8px;
  }

  .tk-shell[data-collapsed="true"] .tk-side__title {
    height: auto;
    padding: 12px 8px 4px;
    margin: 0;
    background: none;
    color: var(--muted);
  }

  .tk-side__toggle {
    display: none;
  }

  body[data-side-open="true"] .tk-side {
    transform: none;
  }

  .tk-side-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    background: var(--scrim);
    display: none;
  }

  body[data-side-open="true"] .tk-side-backdrop {
    display: block;
  }

  body[data-side-open="true"] {
    overflow: hidden;
  }

  .tk-faq__a {
    padding-right: 0;
  }
}

@media (max-width: 767px) {
  .tk-main {
    gap: 16px;
    padding-top: 16px;
  }

  .tk-card {
    padding: 16px;
  }

  .tk-card--faq {
    padding: 4px 16px;
  }

  .tk-numbered {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
  }

  /* Основная кнопка на телефоне — 52 px (4.6); длинные подписи переносятся,
     а не вылезают за экран */
  .tk-btn:not(.tk-btn--tertiary):not(.tk-btn--sm),
  .btn:not(.btn--sm) {
    min-height: 52px;
  }

  /* Перенос — ровными строками, без «висячего» слова (techkarta-back#155) */
  .tk-btn {
    white-space: normal;
    text-wrap: balance;
  }

  /* ShortLabel: видна короткая подпись, полная скрыта — и из дерева доступности тоже: имя кнопки
     совпадает с видимой подписью (techkarta-back#155) */
  .tk-btn__full {
    display: none;
  }

  .tk-btn__short {
    display: inline;
  }

  .tk-btn:not(.tk-btn--tertiary) {
    padding-block: 12px;
  }

  /* Окно входа на телефоне — во весь экран: белый фон вместо затемнения */
  .tk-modal {
    padding: 0;
    align-items: flex-start;
    background: var(--surface);
  }

  .tk-modal__box {
    width: 100%;
  }

  .tk-modal__card {
    border-radius: 0;
    padding: 24px 16px;
    box-shadow: none;
  }

  .tk-modal__close {
    margin: -8px -8px 0 0;
  }

  /* Подпись под карточкой (страницы входа) — с теми же полями, что содержимое карточки; в окне лендинга
     она внутри карточки и поля у неё уже есть */
  .tk-modal__box > .tk-modal__note {
    margin-inline: 16px;
  }

  .tk-kv {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* Верхняя панель на телефоне: «Урок Просто» рядом со счётчиком, «Создать» и меню в строку не помещается (нужно
   145 px, есть 52–138) и переносился под счётчик — остаётся знак. Название — голый текстовый узел (React и Jinja),
   поэтому font-size: 0: имя ссылки для экранных чтецов остаётся (techkarta-back#149, C1-13) */
@media (max-width: 429px) {
  .tk-topbar__brand {
    gap: 0;
    font-size: 0;
  }
}

@media (max-width: 359px) {
  .tk-otp {
    --otp-cell: 40px;
    --otp-gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tk-shell,
  .tk-side,
  .tk-btn {
    transition: none;
  }

  .tk-status--pending .tk-icon {
    animation: none;
  }
}