/* Горизонтальная раскладка кабинета v1 на десктопе.
 *
 * Кабинет — одна длинная страница в колонке шириной 560px, и на широком
 * мониторе две трети экрана простаивают. Здесь страница превращается в
 * трёхзонный шелл: слева профиль и меню разделов, по центру материалы,
 * справа календарь с быстрыми действиями и статистикой. Всё остальное
 * уходит в две колонки под шеллом.
 *
 * Узлы переставляет desktop_split.js. Ниже 1200px ни одного правила отсюда
 * не применяется — мобильная вёрстка не затронута.
 */

@media (min-width: 1200px) {
  /* Серый фон страницы убран: на широком экране он читался как «дырка»
     вокруг узкой колонки, а карточки и так отделены рамками. */
  body.cab-desk-split-on,
  body.cab-desk-split-on .container {
    background: #fff;
  }

  body.cab-desk-split-on .cab-shell,
  body.cab-desk-split-on .cab-bottom-list,
  body.cab-desk-split-on .cab-desk-grid {
    /* Разворачиваемся шире .container (560px), оставаясь по центру экрана:
       50% — половина узкой колонки, дальше сдвигаемся на половину своей ширины. */
    --cab-w: min(1560px, calc(100vw - 48px));
    width: var(--cab-w);
    margin-left: calc(50% - var(--cab-w) / 2);
  }

  /* Меню закреплено на всю высоту страницы, значит и ниже шелла его полоса
     занята. Нижняя сетка стартовала с того же края — её левая колонка уезжала
     под меню, и при прокрутке заголовки читались сквозь кнопки. */
  body.cab-desk-split-on .cab-bottom-list,
  body.cab-desk-split-on .cab-desk-grid {
    --cab-side: 250px;
    width: calc(var(--cab-w) - var(--cab-side));
    margin-left: calc(50% - var(--cab-w) / 2 + var(--cab-side));
  }

  .cab-shell {
    display: grid;
    grid-template-columns: 228px minmax(0, 1fr) 372px;
    /* Переход сетки не CSS-ом: ширину покадрово пишет остров (nav-collapse.ts).
       CSS-transition поверх этих же записей давал двойное сглаживание —
       колонка доезжала заметно позже, чем содержимое меню. */
    gap: 22px;
    align-items: start;
    padding-top: 12px;
  }

  /* ── левая колонка: профиль + вертикальное меню ── */

  /* Меню закреплено на всю страницу, а не только на высоту своего ряда:
     при sticky оно уезжало, стоило прокрутить ниже шелла — а разделы,
     к которым оно ведёт, как раз там. Колонка в сетке фиксированной ширины,
     поэтому вынос ребёнка из потока её не схлопывает. */
  .cab-shell-side {
    position: fixed;
    left: calc(50% - var(--cab-w, 1560px) / 2);
    box-sizing: border-box;
    width: 228px;
    top: 12px;
    z-index: 60;
    display: flex;
    max-height: calc(100vh - 24px);
    min-width: 0;
    flex-direction: column;
    gap: 12px;
    /* Своя карточка обязательна: колонка вынесена из потока и висит поверх
       страницы. Без фона текст нижних блоков читался прямо сквозь кнопки. */
    padding: 10px;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.07));
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    /* Скроллит внутренняя обёртка, а не сама колонка: имя, почта и тариф
       обязаны оставаться на экране. Сама колонка ничего не режет — иначе
       выпадашка «Ещё разделы» из шапки профиля обрезалась бы её краем. */
    overflow: visible;
  }

  /* Всё, кроме профиля: меню разделов, подписки, приглашение. Колонка выше
     экрана не растёт — прокручивается только эта часть. */
  .cab-side-scroll {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    overflow-x: visible;
    overflow-y: auto;
    scrollbar-width: thin;
  }

  /* Профиль не сжимается под напором длинного списка подписок. */
  body.cab-desk-split-on .cab-shell-side > .cabinet-header {
    flex: 0 0 auto;
  }

  /* Подписки и «Пригласить друзей» переехали к профилю: без снятия «коробки»
     они рисовались карточкой внутри карточки колонки. */
  body.cab-desk-split-on .cab-side-scroll > *,
  body.cab-desk-split-on .cab-side-scroll > * > .card {
    padding-left: 0;
    padding-right: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.cab-desk-split-on .cab-side-scroll > * + * {
    border-top: 1px solid var(--border, rgba(0, 0, 0, 0.06));
    padding-top: 8px;
  }

  /* Заголовки блоков в узкой колонке: размером с пункт меню, не с заголовок
     раздела — иначе «Мои подписки» перекрикивают само меню. */
  body.cab-desk-split-on .cab-side-scroll h2 {
    font-size: 0.875rem;
    line-height: 1.3;
    margin: 0;
  }

  /* У «Моих подписок» два шеврона: свой (.subs-chevron) и общий от
     сворачивания карточек. В широкой колонке они расходились по краям, в
     узкой встали рядом и читались как опечатка. */
  body.cab-desk-split-on .cab-side-scroll .subs-card-head .subs-chevron {
    display: none;
  }

  /* ── тариф в карточке профиля ── */

  .cab-side-tariff {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.75rem;
    line-height: 1.3;
  }

  .cab-side-tariff-label {
    flex: 0 0 auto;
    color: var(--text-secondary, rgba(0, 0, 0, 0.5));
  }

  .cab-side-tariff-value {
    min-width: 0;
    font-weight: 600;
    color: var(--accent, #1f8a70);
    overflow-wrap: anywhere;
  }

  body.cab-desk-split-on .cab-shell-side .cabinet-header {
    display: block;
    width: 100%;
    text-align: left;
  }

  /* Кнопки шапки в 228-пиксельной колонке не помещались в одну строку:
     четыре иконки (30+30+28+32 + три зазора) съедали 152px из 206px, и
     «Выйти» на 70px вылезала за правый край карточки профиля — на 16px
     мимо колонки (фидбек 20.08.2026). В ленте кабинета шапка широкая, там
     nowrap правильный, поэтому переносим строку ТОЛЬКО в левой колонке.
     margin-left:auto из cabinet.css здесь тоже лишний: он прижимал ряд
     вправо и добивал переполнение. */
  body.cab-desk-split-on .cab-shell-side .cabinet-header-actions {
    flex-wrap: wrap;
    row-gap: 8px;
    margin-left: 0;
    justify-content: flex-start;
  }

  /* Кнопка с текстом не должна растягиваться на всю вторую строку —
     она остаётся по ширине надписи. */
  body.cab-desk-split-on .cab-shell-side .cabinet-header-actions > .btn-secondary {
    flex: 0 0 auto;
  }

  /* Бар разделов из горизонтального скроллера становится вертикальным
     списком. Сам список строит cabinet.js — мы только меняем раскладку. */
  body.cab-desk-split-on .cab-shell-side .cabinet-nav-sticky-wrap {
    position: static;
    width: 100%;
    max-width: none;
    margin: 0;
  }

  body.cab-desk-split-on .cab-shell-side .cabinet-nav {
    width: 100%;
    max-width: none;
    overflow: visible;
    border-bottom: 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.cab-desk-split-on .cab-shell-side .cabinet-nav-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 0;
  }

  body.cab-desk-split-on .cab-shell-side .cabinet-nav-inner > * {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    border-radius: 10px;
  }

  /* Меню переехало в свою колонку, но на нём осталась «обёрточная» геометрия
     старого контейнера: липкость, фон и клип по горизонтали. Снимаем, иначе
     выпадашка «Ещё» обрезается краем бывшего скроллера. */
  body.cab-desk-split-on .cab-shell-side .cabinet-nav::before,
  body.cab-desk-split-on .cab-shell-side .cabinet-nav::after {
    display: none;
  }

  body.cab-desk-split-on .cab-shell-side .cabinet-more-menu {
    position: absolute;
    top: auto;
    right: auto;
    left: 0;
    width: max-content;
    min-width: 200px;
    max-width: 260px;
  }

  /* ── «Колесо фортуны» в колонке профиля ───────────────────────────
     В общей ленте оно стояло между учебными блоками и спорило с ними за
     внимание (фидбек 13.08.2026) — теперь живёт только в профиле. Строка
     «эмодзи + текст + кнопка» в 228px не помещается: раскладываем в столбик,
     подсказку про бесплатную прокрутку показывает уже сам оверлей. */
  body.cab-desk-split-on .cab-shell-side > #spinWheelBlock {
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px 8px;
    align-items: center;
  }

  /* cabinet.js оборачивает карточки в сворачивалку: заголовок с шевроном —
     .card-fold-head, кнопка уезжает в .card-fold-body. Раскладываем по этой
     структуре, иначе кнопка остаётся узкой и висит под эмодзи. */
  body.cab-desk-split-on .cab-shell-side > #spinWheelBlock > .spinw-card-emoji {
    grid-column: 1;
    width: auto;
    font-size: 1.5rem;
  }

  body.cab-desk-split-on .cab-shell-side > #spinWheelBlock > .spinw-card-body {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    text-align: left;
  }

  body.cab-desk-split-on .cab-shell-side > #spinWheelBlock > .card-fold-body {
    grid-column: 1 / -1;
  }

  body.cab-desk-split-on .cab-shell-side > #spinWheelBlock .spinw-card-title {
    font-size: 0.875rem;
  }

  /* Подсказку про бесплатную прокрутку показывает сам оверлей колеса —
     в 228px она забирала бы три строки. */
  body.cab-desk-split-on .cab-shell-side > #spinWheelBlock .spinw-card-hint {
    display: none;
  }

  body.cab-desk-split-on .cab-shell-side > #spinWheelBlock .spinw-card-btn {
    width: 100%;
    padding: 8px 10px;
    font-size: 0.8125rem;
  }

  /* ── Сворачивание левой колонки ────────────────────────────────────────
     Ветвлений body.cab-nav-collapsed здесь больше НЕТ — состоянием, шириной
     колонки, значениями --cab-w/--cab-side и скрытием блоков управляет
     React-остров (cabinet-v1-react/src/islands/nav-collapse.ts). Он же
     проигрывает переход покадрово через motion.

     Так сделано после 17.08.2026: скрытие блоков колонки жило поимённым
     списком (профиль, колесо, подписки, приглашение), и блок, добавленный в
     SIDE_BLOCK_IDS позже, в список не попадал. #tutorCallBlock так и торчал в
     62-пиксельной колонке — 48px ширины на 130px контента. Остров выносит из
     колонки ВСЁ, кроме меню, поэтому список поддерживать больше не нужно.

     Формулы раскладки (min()/calc(100vw …)) остаются здесь намеренно: в JS их
     пришлось бы пересчитывать на каждый ресайз. Из острова приезжают только
     значения. Если остров не смонтировался, колонка просто всегда развёрнута. */

  /* ── центральная и правая колонки ── */

  /* Колонки закреплены явно. Меню вынесено из потока (position: fixed), и без
     явного размещения авто-расстановка сдвигала всё влево: материалы уезжали
     в 228-пиксельную полосу, а третья колонка пустовала. */
  .cab-shell-side {
    grid-column: 1;
    grid-row: 1;
  }

  .cab-shell-main {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }

  .cab-shell-rail {
    grid-column: 3;
    grid-row: 1;
    position: sticky;
    /* Виджет «N в кабинете» висит фиксированно в правом верхнем углу и
       налезал на третий пин. Опускаем колонку под него. */
    top: 46px;
    display: flex;
    max-height: calc(100vh - 24px);
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    /* Кнопка «Спросить ИИ» висит в правом нижнем углу — оставляем ей место,
       чтобы она не накрывала последние строки календаря. */
    padding-bottom: 72px;
    scrollbar-width: thin;
  }

  .cab-shell-rail > * {
    min-width: 0;
    flex: 0 0 auto;
  }

  /* Скрытые пейны быстрых действий держали пустое место между пинами и планом. */
  .cab-shell-rail > [hidden],
  .cab-desk-col > [hidden] {
    display: none !important;
  }

  /* ── нижняя сетка: всё, что не попало в шелл ── */

  .cab-desk-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
    margin-top: 24px;
  }

  .cab-desk-col {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
  }

  /* ── Без контейнеров ───────────────────────────────────────────────
     Кабинет собран из карточек: почти каждый блок обёрнут в белый
     прямоугольник с рамкой и тенью. На узкой колонке это читалось как
     разделители, а в трёхзонной раскладке карточки лежат внутри карточек и
     рвут логику. Снимаем «коробку» с блоков верхнего уровня, оставляя
     только вертикальный ритм. Внутренние элементы (чипы, кнопки, плашки)
     не трогаем — у них рамка несёт смысл. */
  body.cab-desk-split-on .cab-shell-rail > *,
  body.cab-desk-split-on .cab-desk-col > *,
  body.cab-desk-split-on .cab-shell-main > * {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  body.cab-desk-split-on .cab-shell-rail > * > .card,
  body.cab-desk-split-on .cab-desk-col > * > .card,
  body.cab-desk-split-on .cab-shell-rail > .card,
  body.cab-desk-split-on .cab-desk-col > .card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
  }

  /* Блоки, убранные с десктопной страницы (список — в desktop_split.js).
     Именно !important и именно по атрибуту: cabinet.js перерисовывает свои
     карточки и заново ставит им inline display, так что снять их стилем
     из JS не получалось — возвращались при первой же перерисовке. */
  body.cab-desk-split-on [data-cab-desk-hidden="1"] {
    display: none !important;
  }

  /* Карточка, прицепленная к вкладке (список — TAB_EXTRA_IDS в desktop_split.js):
     на чужой вкладке её не показываем. Тем же атрибутом, по той же причине. */
  body.cab-desk-split-on [data-cab-tab-extra-hidden="1"] {
    display: none !important;
  }

  /* «Серия дней» уехала наверх правой колонки, но в дни, когда занятие уже
     сделано, cabinet.js оставляет блок пустым — без этого от него оставалась
     бы разделительная линия над «Планом». */
  body.cab-desk-split-on .cab-shell-rail > #streakBlock:empty {
    display: none;
  }

  /* ── вкладки основной колонки ─────────────────────────────────────
     «Теоретическое обучение» и «Практическое обучение» — не якоря, а
     переключатель: показана ровно одна вкладка. */

  .cab-main-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  }

  .cab-main-tab {
    position: relative;
    padding: 8px 2px 10px;
    margin-right: 14px;
    border: 0;
    background: transparent;
    color: var(--text-secondary, rgba(0, 0, 0, 0.55));
    font: inherit;
    font-size: 0.9375rem;
    line-height: 1.3;
    cursor: pointer;
  }

  .cab-main-tab:hover {
    color: var(--text, #142320);
  }

  .cab-main-tab.is-active {
    color: var(--text, #142320);
    font-weight: 600;
  }

  /* Подчёркивание активной вкладки лежит на границе бара, а не под текстом —
     иначе оно прыгало на пиксель при смене жирности. */
  .cab-main-tab.is-active::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--accent, #1f8a70);
  }

  /* Бар вкладок — служебная строка, а не карточка: общее снятие «коробки»
     с детей главной зоны его не касается, здесь нужна именно линия снизу. */
  /* Чеклист «Твой старт» — временный баннер, а не учебный блок: правило выше
     сняло бы с него фон и рамку, и он растворился бы в колонке. */
  body.cab-desk-split-on .cab-shell-main > .ob-checklist-banner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }

  body.cab-desk-split-on .cab-shell-main > .cab-main-tabs {
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  }

  /* ── план уроков в правой колонке ─────────────────────────────────
     31.08.2026 план уехал из главной колонки обратно в правую — между
     пинами («Клин. мышление») и «Моей статистикой» (desktop_split.js:
     RAIL_IDS). В главной он занимал первый экран целиком и читался как
     раскрытая модалка; здесь он нужен сводкой «что у меня на сегодня».

     zoom, а не font-size: остров плана свёрстан на Tailwind абсолютными
     размерами (text-[0.6875rem] и т.п.), и наследуемый font-size их не
     трогает — уменьшился бы только текст без класса. zoom заодно даёт
     блоку ~438px раскладки внутри 372-пиксельной колонки, поэтому шапка
     с прогрессом и переключатель «Лента/Список» не переносятся.

     Своя высота с внутренним скроллом обязательна: лента плана — это все
     уроки предмета подряд (на проверочном аккаунте 2331px), и без неё
     статистика уезжала бы на экран вниз внутри скролла колонки. 376px в
     зумленных единицах — это ~320px на экране. */
  body.cab-desk-split-on .cab-shell-rail > #planSection {
    zoom: 0.85;
    max-height: 376px;
    padding-bottom: 4px;
    overflow-y: auto;
    scrollbar-width: thin;
    overscroll-behavior: contain;
  }

  /* ── «Практическое обучение» ──────────────────────────────────────
     Карточка дня, тренажёр и тренажёр ЭКГ — одно и то же занятие: порешать.
     Тремя отдельными карточками они читались как три разных раздела. */

  .cab-practice-hub {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .cab-practice-hub-title {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
  }

  /* Внутри вкладки собственный заголовок блока дублирует её название. */
  body.cab-desk-split-on .cab-shell-main > .cab-practice-hub > .cab-practice-hub-title {
    display: none;
  }

  /* Вложенные блоки теряют «коробку»: карточка внутри карточки читалась как
     ошибка вёрстки. Разделяем тонкой линией, как в колонках. */
  body.cab-desk-split-on .cab-practice-hub > *,
  body.cab-desk-split-on .cab-practice-hub > * > .card {
    padding-left: 0;
    padding-right: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.cab-desk-split-on .cab-practice-hub > * + * {
    border-top: 1px solid var(--border, rgba(0, 0, 0, 0.06));
    padding-top: 12px;
  }

  /* Первая карточка идёт сразу под общим заголовком — линия там лишняя. */
  body.cab-desk-split-on .cab-practice-hub > .cab-practice-hub-title + * {
    border-top: 0;
    padding-top: 0;
  }

  /* Заголовки внутри — подзаголовки блока, а не самостоятельные разделы. */
  body.cab-desk-split-on .cab-practice-hub h2 {
    font-size: 0.9375rem;
  }

  /* ── список отдельных продуктов ───────────────────────────────────
     USMLE, «Наследие» и «Ускоритель» — покупки, а не учёба: они шли вперемешку
     с учебными блоками нижней сетки. Собраны в одну колонку под всей
     страницей (фидбек 13.08.2026). */

  .cab-bottom-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
  }

  body.cab-desk-split-on .cab-bottom-list > *,
  body.cab-desk-split-on .cab-bottom-list > * > .card {
    padding-left: 0;
    padding-right: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.cab-desk-split-on .cab-bottom-list > * + * {
    border-top: 1px solid var(--border, rgba(0, 0, 0, 0.06));
    padding-top: 14px;
  }

  /* Обёртка есть всегда (по её id строится пункт меню), а блок внутри может
     не отрисоваться — пустая обёртка оставляла бы висящую линию. */
  body.cab-desk-split-on .cab-bottom-list > *:empty,
  body.cab-desk-split-on .cab-bottom-list > *:not(:has(:not(:empty))) {
    display: none;
  }

  /* Вместо рамок — тонкая линия между блоками: ритм остаётся, «коробок» нет.

     Класс вешает applyGridSeparators() из desktop_split.js, а не правило
     `* + *`: в колонках лежат блоки, которые у конкретного человека ничего
     не рисуют, и такой блок с рамкой и отступом превращался в висящую
     полосу поперёк колонки (фидбек 13.08.2026). Селектором это не ловится —
     «пустой» здесь значит «нулевой высоты», а не `:empty`. */
  body.cab-desk-split-on .cab-desk-col > .cab-desk-sep {
    border-top: 1px solid var(--border, rgba(0, 0, 0, 0.06));
    padding-top: 14px;
  }

  /* В правой колонке блоки и так короткие — линия между ними только добавляла
     воздуха между пинами и планом. */
  body.cab-desk-split-on .cab-shell-rail > .cab-desk-sep {
    border-top: 1px solid var(--border, rgba(0, 0, 0, 0.06));
    padding-top: 8px;
  }


  /* ── Скелетон загрузки ────────────────────────────────────────────
     Скелетон рисовался узкой колонкой по центру и в розовом — а через
     секунду на его месте разворачивались три зоны в фирменном зелёном.
     Прыжок раскладки и смена цвета читались как «страница перезагрузилась».
     Здесь скелетон повторяет ту раскладку, которая появится: слева меню,
     по центру материалы, справа план и виджеты.

     Правила живут вне body.cab-desk-split-on: этот класс ставится, только
     когда кабинет уже собран, а скелетон показывается до того. */
  .cab-skel {
    --cab-w: min(1560px, calc(100vw - 48px));
    --skel-tint: 31, 138, 112;
    box-sizing: border-box;
    width: var(--cab-w);
    max-width: none;
    margin-left: calc(50% - var(--cab-w) / 2);
    display: grid;
    grid-template-columns: 228px minmax(0, 1fr) 372px;
    gap: 22px;
    align-items: start;
    padding: 12px 0 56px;
  }

  .cab-skel-status {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* Левая колонка — заглушка меню разделов. Своей разметки у неё нет:
     меню строит React уже после загрузки, поэтому рисуем полосы фоном. */
  .cab-skel::before {
    content: "";
    grid-column: 1;
    grid-row: 2 / span 4;
    min-height: 384px;
    border: 1px solid rgba(var(--skel-tint), 0.14);
    border-radius: 14px;
    background:
      repeating-linear-gradient(
        to bottom,
        rgba(var(--skel-tint), 0.1) 0 34px,
        transparent 34px 46px
      );
    background-position: 0 14px;
    background-repeat: no-repeat;
    background-size: calc(100% - 20px) 368px;
    background-origin: content-box;
    padding: 0 10px;
  }

  /* Скелетон повторяет ту раскладку, которая появится: план — первым в
     центральной колонке, под ним материалы, справа виджеты. План уехал из
     правой колонки 20.08.2026, и без этой правки скелетон рисовал его
     справа — на загрузке страница «прыгала» колонками. */
  .cab-skel-card-plan     { grid-column: 2; grid-row: 2; }
  .cab-skel-card-progress { grid-column: 2; grid-row: 3; }
  .cab-skel-card-today    { grid-column: 2; grid-row: 4; }
  .cab-skel-card-skills   { grid-column: 2; grid-row: 5; }
  .cab-skel-widgets       { grid-column: 3; grid-row: 2 / span 4; }

  /* Виджеты в узкой колонке встают друг под друга, а не в ряд. */
  .cab-skel-widgets {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  /* На широком экране кнопка висит поверх правой колонки, и подпись во всю
     ширину закрывала строки календаря. В покое остаётся иконка, слово
     разворачивается по наведению — так и не мешает, и не «съедено». */
  .v1-tutor-fab {
    padding: 12px 14px;
  }

  .v1-tutor-fab .v1-tutor-fab-label {
    max-width: 0;
    margin-left: -8px;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width 0.18s ease, opacity 0.18s ease, margin-left 0.18s ease;
  }

  .v1-tutor-fab:hover .v1-tutor-fab-label,
  .v1-tutor-fab:focus-visible .v1-tutor-fab-label {
    max-width: 160px;
    margin-left: 0;
    opacity: 1;
  }
}