/* Профиль Гостя (новая витрина, часть 3, задача 5; постановка docs/superpowers/specs/2026-10-03-storefront-
   part3-account-and-login.md, раздел 4) — по эталону docs/design/reference/layout.css («Профиль» ~284–329,
   «Программы» ~483–537): карта Гостя, кошельки, программа кошелька, предложения, табличка условий, «Мои данные»,
   «Выйти из кабинета» и «удалить профиль». Кадр и общие детали — account.css и components.css (памятка — наверху
   account.css). Размеры — только токены, цвета — только роли темы (сторожа те же). */

/* ── Карта Гостя: код (только телефон, Р66), имя, номер, подсказка; ниже — бонусы ───────────────────────── */
.qr-card { scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.qr-card:focus { outline: none; }
.guest-card__wait { flex: 1 1 100%; min-height: calc(var(--space-8) * 2); }
.guest-card__code { position: relative; flex: none; padding: 0; border: 0; border-radius: var(--radius-md); background: transparent; cursor: zoom-in; }
.guest-card__code:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Код — на светлом листе всегда: на тёмной теме сканер кассы его не прочтёт. */
.guest-card__code canvas, .qr-big canvas { display: block; border-radius: var(--radius-md); }
.guest-card__zoom {
  position: absolute; right: var(--space-1); bottom: var(--space-1); display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--panel); box-shadow: var(--shadow-1);
  color: var(--ink); font-size: var(--text-xs); line-height: var(--leading-text);
}
.guest-card__zoom svg { width: var(--icon-sm); height: var(--icon-sm); }
.guest-card__phone { font-variant-numeric: tabular-nums; }
.guest-card__note { flex-basis: 100%; margin: 0; font-size: var(--text-sm); }
.qr-big { display: grid; gap: var(--space-2); justify-items: center; text-align: center; }

/* ── Бонусы: слева кошелёк, справа его программа; ниже — сгорание и программы, куда Гость ещё не вступил ── */
.wallets { flex-basis: 100%; display: grid; gap: var(--space-3); min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--border2); }
.wallets__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: start; }
.wallets__row .wallet-picker { width: 100%; }
.wallets__tail { display: grid; gap: var(--space-3); min-width: 0; }
.wallets__tail:empty { display: none; }

/* Колода кошельков на телефоне (Р51): карточки в ряд, листание с прилипанием, точки — какая открыта. */
.wallet-deck { display: grid; gap: var(--space-2); min-width: 0; }
.wallet-deck__track { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.wallet-deck__track::-webkit-scrollbar { display: none; }
.wallet-deck__card { flex: 0 0 100%; scroll-snap-align: start; }
.wallet-deck__dots { display: flex; flex-wrap: wrap; justify-content: center; }
/* Точка — в цель касания (`--control-sm`), сам кружок — внутри. */
.wallet-deck__dot {
  display: grid; place-items: center; width: var(--control-sm); height: var(--control-sm); padding: 0; border: 0;
  border-radius: var(--radius-pill); background: transparent; cursor: pointer;
}
.wallet-deck__dot::before { content: ''; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-pill); background: var(--border); }
.wallet-deck__dot[aria-current='true']::before { background: var(--gold); }
.wallet-deck__dot:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.wallet-deck__history { justify-self: center; }

/* Сгорание баллов по партиям — под суммой выбранного кошелька; партии — по нажатию. */
.expiry { font-size: var(--text-sm); }
.expiry-soon { display: inline-flex; align-items: center; gap: var(--space-1); min-height: var(--control-sm); color: var(--ink); cursor: pointer; list-style: none; }
.expiry-soon::-webkit-details-marker { display: none; }
.expiry-soon::after { content: '⌄'; color: var(--muted); }
.expiry[open] .expiry-soon::after { content: '⌃'; }
.expiry-lots { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; color: var(--muted); }

/* Программа кошелька и предложения вступить. */
.programme-info, .programme-offer { display: grid; align-content: start; gap: var(--space-1); min-width: 0; font-size: var(--text-sm); }
.programme-info { padding: var(--space-2) 0; }
.programme-info__eyebrow { color: var(--muted); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; }
.programme-info__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.programme-info__head b { font-family: var(--font-title); font-size: var(--title-sm); font-weight: var(--weight-medium); line-height: var(--leading-title); }
.programme-info__state { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--ok); font-weight: var(--weight-semibold); }
.programme-info__state svg { width: var(--icon-sm); height: var(--icon-sm); }
/* Две строки места всегда: высота карты при смене кошелька та же. */
.programme-info__line { min-height: 2lh; line-height: var(--leading-title); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.programme-info__terms { justify-self: start; min-height: var(--control-sm); }
/* Слова, нужные целиком (принять условия), — без обрезки. */
.programme-info__about { line-height: var(--leading-title); }
.programme-offers { display: grid; gap: var(--space-3); min-width: 0; }
.programme-offer { padding: var(--space-3) var(--space-4); border: 1px solid var(--border2); border-radius: var(--radius-lg); background: var(--panel); }
.programme-offer.is-main { border-color: var(--gold2); box-shadow: var(--shadow-1); background: linear-gradient(135deg, var(--panel), var(--cream)); }
.programme-offer__about, .programme-offer__gift { color: var(--muted); }
.programme-offer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-1); }
.programme-card__missing { font-size: var(--text-sm); }

/* ── Табличка «меняются условия» — над картой, пока не нажато «Понятно» ─────────────────────────────── */
.terms-notice {
  display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--gold2);
  border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-1); color: var(--ink);
}
.terms-notice__icon { flex: none; color: var(--accent); }
.terms-notice__icon svg { display: block; width: var(--icon-md); height: var(--icon-md); }
.terms-notice__text { display: grid; gap: var(--space-2); min-width: 0; }
.terms-notice__text > span { color: var(--muted); font-size: var(--text-sm); }
.terms-notice__actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }

/* ── Закрытая карта — вопрос под картой Гостя ─────────────────────────────────────────────────────────── */
/* Пустое место ленты новостей не занимает строку колонки: иначе между картой и «Моими данными» двойной отступ. */
.account__content > .newsstrip-holder:empty { display: none; }
.profile-closed__card { border-color: var(--err); }
.profile-closed__card p { margin: 0; }
.profile-closed__actions { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }

/* ── «Мои данные» ─────────────────────────────────────────────────────────────────────────────────────── */
.profile-data { gap: var(--space-2); }
.profile-data__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; margin-bottom: var(--space-2); }
.profile-data__head h2 { margin: 0; font-family: var(--font-title); font-size: var(--title-lg); font-weight: var(--weight-medium); line-height: var(--leading-title); }
.profile-data__head .btn svg, .profile-leave__delete svg { width: var(--icon-sm); height: var(--icon-sm); }
.profile-data__form { display: grid; gap: var(--space-4); width: 100%; }
.profile-data__foot { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.email-code { display: grid; gap: var(--space-2); width: 100%; }
.email-code .input { width: calc(var(--space-8) * 2); }
.profile-unknown { margin: 0; color: var(--muted); }
.phone-change { display: grid; gap: var(--space-3); width: 100%; margin-top: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--card); }

/* ── Низ: «Выйти из кабинета» и неприметное серое «удалить профиль» ───────────────────────────────────── */
.profile-leave { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.profile-leave__delete { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--muted); font-weight: var(--weight-regular); }

/* ── Окна ухода: последствия списком, причины точками ─────────────────────────────────────────────────── */
.leave-lead { margin: 0 0 var(--space-2); font-weight: var(--weight-semibold); }
.leave-list { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); }
.leave-step { display: grid; gap: var(--space-3); }
.leave-step[hidden] { display: none; }
.leave-step p { margin: 0; }
.leave-reasons { display: grid; }

/* ── Телефон: карта по центру, код крупнее, программа под кошельком ───────────────────────────────────── */
@media (max-width: 767px) {
  .guest-card { flex-direction: column; align-items: stretch; text-align: center; }
  .guest-card__code { align-self: center; }
  .guest-card .qr-card__text { justify-items: center; flex: none; }
  .guest-card .wallets { flex-basis: auto; }
  .wallets__row { grid-template-columns: minmax(0, 1fr); }
  .guest-card .programme-info { justify-items: center; text-align: center; }
  .guest-card .programme-info .programme-info__head { justify-content: center; }
  .guest-card .programme-info__terms { justify-self: center; }
  .guest-card .wallet-picker, .guest-card .programme-offer, .guest-card .expiry { text-align: left; }
}