/* Экраны «деньги и аккаунт» (techkarta-back#257): чего нет в файлах макета — состояния сервиса без артборда и
   движение сверх кита. Файл не с макета: правила макета — в up-acct.css и up-pub.css, их не трогаем. Подключён на
   экранах pricing, nocredits, plan, pay, profile, notifications и на лендинге (витрина тарифов). Только transform и
   opacity; prefers-reduced-motion выключает кит (`.up * { animation: none; transition: none }`). */

/* ---------- кнопка покупки — форма POST: в вёрстке её нет, кнопка стоит как прямой потомок ряда ---------- */
.x-buy, .x-co-form { display: contents; }
.up-acct :is(.up-btn, .up-docs-ghost)[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; box-shadow: none; }
.up-acct :is(.up-btn, .up-docs-ghost):disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
@media (max-width: 639px) {
  .up-acct-acts > .x-buy > :is(.up-btn, .up-docs-ghost) { flex: 1 1 100%; justify-content: center; }
  .up-pub-extra > .x-buy > .up-docs-ghost { grid-column: 1 / -1; justify-content: center; }
}

/* ---------- «Месяц / Год»: подложка выбранного переезжает (layoutId), у кнопки своей заливки нет ---------- */
.x-seg button { position: relative; }
.x-seg button[aria-checked="true"] { background: transparent; box-shadow: none; }
.x-seg-pill { position: absolute; inset: 0; border-radius: 999px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(31, 27, 58, .12), 0 3px 8px -3px rgba(60, 40, 120, .28); }
/* подписи — над подложкой: в пути она идёт поверх соседней кнопки и без z-index закрывала бы её подпись */
.x-seg-l, .x-seg .up-acct-save { position: relative; z-index: 1; }

/* ---------- числа карточки тарифа: варианты «Месяц» и «Год» в одной ячейке, неактивный держит место ---------- */
.x-alt { display: grid; }
.x-alt > span { grid-area: 1 / 1; min-width: 0; }
.x-alt > span[aria-hidden="true"] { visibility: hidden; }
.up-tier-price.x-alt > span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: inherit; line-height: inherit; color: inherit; }
/* после переключения периода число и лимит проявляются снизу — лесенкой по карточкам */
.up-tiers[data-live="true"] .x-alt > span:not([aria-hidden]) { animation: x-num-in .34s var(--ease-out) backwards; }
.up-tiers[data-live="true"] .up-tier:nth-child(2) .x-alt > span:not([aria-hidden]) { animation-delay: 40ms; }
.up-tiers[data-live="true"] .up-tier:nth-child(3) .x-alt > span:not([aria-hidden]) { animation-delay: 80ms; }
@keyframes x-num-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- выбранное к оформлению (`?plan=`, `?pack=`): рамка акцентом — как у «вашего» тарифа ---------- */
.up-pub-extra[data-picked="true"] { border-color: var(--ws-accent); box-shadow: 0 0 0 1px var(--ws-accent), 0 18px 44px -26px rgba(60, 40, 120, .5); }

/* ---------- оформление подписки: карточка появляется над витриной, галочка рисуется ---------- */
.x-co-in { animation: x-co-in .42s var(--ease-out) backwards; }
@keyframes x-co-in { from { opacity: 0; transform: translateY(-10px) scale(.985); } }
.up-acct-cb:checked + .up-box svg path { stroke-dasharray: 24; animation: up-draw .2s var(--ease-out) both; }
.up-acct-cb:disabled, .up-acct-cb:disabled ~ * { cursor: default; }
/* загрузка условий подписки: строка-заглушка на месте текста, без прыжка высоты */
.x-skel { display: block; height: 14px; border-radius: 7px; background: var(--surface-2); animation: x-skel 1.2s ease-in-out infinite alternate; }
.x-skel + .x-skel { margin-top: 8px; width: 72%; }
@keyframes x-skel { from { opacity: .55; } to { opacity: 1; } }

/* ---------- «Мой тариф» ---------- */
/* подпись кнопки продления: на телефоне — короткая, без названия тарифа (оно в шапке карточки) */
.x-short { display: none; }
@media (max-width: 639px) {
  .x-full { display: none; }
  .x-short { display: inline; }
}
/* шаг окна отмены — одной колонкой с тем же шагом, что у окна (.up-acct-dlg); новый шаг проявляется */
.x-step { display: grid; gap: 18px; animation: x-step-in .26s var(--ease-out) backwards; }
@keyframes x-step-in { from { opacity: 0; transform: translateY(6px); } }
/* раскрывшийся блок (выбор срока заморозки, «Может быть, подойдёт другое») — как ящик кита (.up-drawer) */
.x-open { animation: x-open-in .3s var(--ease-out) backwards; }
@keyframes x-open-in { from { opacity: 0; transform: translateY(-6px); } }
.up-acct-sec[tabindex="-1"]:focus { outline: none; }

/* ---------- телефон: цель нажатия не меньше 44 px — невидимое поле вокруг низких кнопок, вид не меняется ---------- */
@media (max-width: 1023px) {
  /* у галочек-пилюль up-check поле уже есть в ките (up-kit.css, «приём 2»); второе поле здесь складывалось с его
     отступами и накрывало соседнюю пилюлю слева — нажатие на «Дорого» выбирало «Редко пользуюсь» */
  .x-seg button::after, .up-acct-quiet::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
  .up-acct-quiet { position: relative; }
}

/* --- подсказка кабинета (GET /api/v1/tip, src/shell/TipCard.tsx): на макете её нет — карточка кита под содержимым
   «Личного кабинета», «Истории операций» и «Уведомлений»: плитка, надзаголовок, заголовок, текст и ссылка --- */
.up-tip { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 18px 20px; animation: up-row-in-a .4s var(--ease-out) both; }
.up-tip-t { display: grid; gap: 4px; min-width: 0; }
.up-tip-h { margin: 0; font-family: var(--font-display); font-size: 16px; line-height: 22px; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
.up-tip-p { margin: 0; font-size: 14.5px; line-height: 21px; color: var(--text-2); text-wrap: pretty; }
.up-tip .up-link { margin-left: 0; white-space: nowrap; }
@media (max-width: 639px) {
  .up-tip { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .up-tip .up-link { grid-column: 2; padding: 12px 0; margin: -12px 0; justify-self: start; }
}