/* Левая колонка кабинета — профиль, колесо, меню, подписки, приглашение
 * (09.09.2026).
 *
 * Колонка узкая (228 px), а карточки в ней рисовались теми же размерами, что в
 * широкой ленте: заголовки резались многоточием, «Крутить» стояла сплошной
 * зелёной кнопкой во всю ширину, три карточки способов оплаты с абзацами
 * пояснений превращались в стену текста, а инпут реферальной ссылки с
 * min-width:220px не помещался в колонку вовсе.
 *
 * Правила scoped на `.cab-shell-side` — ниже 1200 px раскладки нет, и там
 * блоки живут в широкой ленте, где прежние размеры уместны.
 *
 * Язык тот же, что у вкладок: волосяная рамка rgba(15,23,42,.08), радиус 14,
 * заголовки секций капсом, счётчики и статусы чипами (см. practice_hub.css).
 */

.cab-shell-side { --side-border: rgba(15, 23, 42, 0.08); }

.cab-shell-side .card {
  border-radius: 14px;
  border: 1px solid var(--side-border);
}

/* ── Свёрнутая карточка: заголовок переносится, а не режется ─────────── */
.cab-shell-side .card.card-folded > h2.card-fold-head,
.cab-shell-side .card > h2.card-fold-head {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  overflow: hidden;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #64748b;
  padding-right: 26px;
}
.cab-shell-side .card.card-folded { padding: 10px 12px; }
.cab-shell-side .card-fold-chevron .sl-icon { width: 15px; height: 15px; }

/* Шапка «Мои подписки» — та же секционная типографика. */
.cab-shell-side .subs-card-head h2 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #64748b;
}

/* ── Колесо фортуны ─────────────────────────────────────────────────── */
/* Специфичность подобрана под desktop_split.css: там `> #spinWheelBlock >
   .spinw-card-emoji` задаёт width:auto и font-size:1.5rem. Цвет подарка
   (#ff2d55) не трогаем — это общая для кабинета раскраска иконок
   (sl_icons.css: пламя оранжевое, кубок золотой, подарок розовый), поэтому
   подложку делаем нейтральной, чтобы розовый читался как акцент. */
body.cab-desk-split-on .cab-shell-side > #spinWheelBlock > .spinw-card-emoji,
.cab-shell-side .spinw-card-emoji {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: rgba(15, 23, 42, 0.05);
  font-size: 1rem;
}
.cab-shell-side .spinw-card-emoji .sl-icon { width: 20px; height: 20px; }
.cab-shell-side .spinw-card-title { font-size: 0.875rem; font-weight: 650; }
.cab-shell-side .spinw-card-hint { font-size: 0.6875rem; line-height: 1.4; }
/* Сплошная зелёная кнопка во всю ширину спорила с меню за главное действие
   колонки. Колесо — развлечение, ему хватает мягкой заливки. */
body.cab-desk-split-on .cab-shell-side > #spinWheelBlock .spinw-card-btn,
.cab-shell-side .spinw-card-btn {
  padding: 8px 14px;
  font-size: 0.8125rem;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid transparent;
  box-shadow: none;
}
.cab-shell-side .spinw-card-btn:hover {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}

/* ── Подписки ───────────────────────────────────────────────────────── */
.cab-shell-side .subs-row {
  padding: 10px;
  margin-bottom: 8px;
  border: 1px solid var(--side-border);
  border-radius: 12px;
  border-bottom: 1px solid var(--side-border);
}
.cab-shell-side .subs-row:last-child { margin-bottom: 0; padding-bottom: 10px; }
.cab-shell-side .subs-row:first-child { padding-top: 10px; }

.cab-shell-side .subs-row-name {
  display: block;
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.3;
  margin-bottom: 5px;
}
.cab-shell-side .subs-pill { font-size: 0.625rem; padding: 2px 8px; }
.cab-shell-side .subs-row-meta { font-size: 0.6875rem; line-height: 1.4; margin-top: 5px; }

.cab-shell-side .subs-row-actions { gap: 6px; margin-top: 8px; }
.cab-shell-side .subs-row-actions .btn-secondary,
.cab-shell-side .subs-row-actions .btn-primary {
  padding: 6px 10px;
  font-size: 0.6875rem;
  border-radius: 8px;
  gap: 5px;
}
.cab-shell-side .subs-row-actions .sl-icon { width: 13px; height: 13px; }
.cab-shell-side .subs-row-howto { font-size: 0.6875rem; margin-top: 7px; }
.cab-shell-side .subs-expired-toggle { font-size: 0.6875rem; }

/* Способы оплаты: три вложенные карточки с абзацами → плоский список. */
.cab-shell-side .subs-pay {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--side-border);
}
.cab-shell-side .subs-pay-title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #64748b;
  margin: 0 0 10px;
}
.cab-shell-side .subs-pay .card {
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 14px;
  background: transparent;
  box-shadow: none;
}
.cab-shell-side .subs-pay .card:last-child { margin-bottom: 0; }
.cab-shell-side .subs-pay .card h2 {
  font-size: 0.8125rem;
  font-weight: 650;
  margin: 0 0 4px;
}
.cab-shell-side .subs-pay .section-label { font-size: 0.6875rem; line-height: 1.45; }
.cab-shell-side .subs-pay .btn-primary,
.cab-shell-side .subs-pay .btn-secondary {
  width: 100%;
  padding: 8px 12px;
  font-size: 0.75rem;
  border-radius: 10px;
}

/* ── Пригласить друзей ──────────────────────────────────────────────── */
/* Инпут ссылки был flex:1 1 260px с min-width:220px — в колонке 204 px он
   вылезал за карточку. */
.cab-shell-side #referralBlock input[type="text"] {
  flex: 1 1 100% !important;
  min-width: 0 !important;
  font-size: 0.75rem !important;
  padding: 7px 9px !important;
  border-radius: 9px !important;
}
.cab-shell-side #referralBlock .btn-secondary,
.cab-shell-side #referralBlock .btn-primary {
  padding: 7px 10px;
  font-size: 0.75rem;
  border-radius: 9px;
}
.cab-shell-side #referralBlock .section-label { font-size: 0.6875rem; line-height: 1.45; }
.cab-shell-side #referralBlock a[href*="t.me"],
.cab-shell-side #referralBlock a[href*="vk.com"],
.cab-shell-side #referralBlock a[href*="wa.me"] { font-size: 0.75rem; }

/* ── Видеозвонок с тьютором и прочие карточки колонки ───────────────── */
.cab-shell-side .card h2 { font-size: 0.875rem; }
.cab-shell-side .card .section-label { font-size: 0.6875rem; line-height: 1.45; }
.cab-shell-side .card .btn-primary,
.cab-shell-side .card .btn-secondary { font-size: 0.75rem; }

/* Ничто в колонке не должно вылезать за её край. */
.cab-shell-side .card * { max-width: 100%; }
.cab-shell-side .card input,
.cab-shell-side .card textarea { box-sizing: border-box; }