/* ---------- Кабинет ----------
   Две разные страницы под одним адресом: гость видит регистрацию и вход, участник — профиль и разделы.
   Переключает их js/pages/account.js атрибутом hidden, поэтому здесь просто два независимых блока. */

/* ---------- Гость: форма слева, обещания справа ----------
   На телефоне форма идёт первой: человек пришёл регистрироваться, а не читать, что ему за это будет. */
.acc-guest{display:grid;gap:clamp(20px,4vw,34px)}
/* Форма длинная, обещания короткие: на широком экране правая колонка едет вместе с прокруткой,
   иначе под ней остаётся полтора экрана пустоты. */
@media(min-width:960px){
  .acc-guest{grid-template-columns:minmax(0,1.35fr) minmax(280px,1fr);align-items:start}
  .grant{position:sticky;top:calc(var(--header-h) + 20px)}
}

.auth-card{display:grid;gap:18px;padding:clamp(18px,4vw,32px)}
.auth-card .tabs{margin-bottom:2px}
/* Подсказка под полем объясняет, зачем лавке эти данные: без объяснения почту в учебный проект не вводят. */
.field__hint{font-size:.75rem;line-height:1.45;color:var(--fog-600)}
.field__err{font-size:.8125rem;color:#f3c4ca}
.field__err:empty{display:none}

/* Десять карт Клуба как выбор места за столом. Кружки радио скрыты, но живы: клавиатура и диктор работают. */
.cards{margin:0;padding:0;border:0}
.cards__legend{padding:0;font-size:.8125rem;color:var(--fog-300)}
.cards .field__hint{margin:6px 0 10px}
/* Ровно пять колонок: карт десять, и любая «резиновая» сетка даёт последний ряд из двух карт с дырой справа.
   На 375 px клетка получается 55 px — попасть пальцем всё ещё легко. */
.cards__grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.cards__cell{position:relative;display:block;cursor:pointer}
.cards__cell input{position:absolute;width:1px;height:1px;opacity:0}
.pick{position:relative;display:grid;place-items:center;aspect-ratio:2/3;overflow:hidden;border:1px solid rgba(212,175,106,.32);border-radius:8px;background:var(--ink-950);opacity:.74;transition:opacity .25s var(--spring),transform .25s var(--spring),box-shadow .25s ease-out}
/* Карты вытянутые и разных пропорций; кадрируем чуть выше середины, чтобы в клетку попадало лицо, а не подол. */
.pick img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.cards__cell:hover .pick{opacity:.95}
.cards__cell input:checked+.pick{opacity:1;transform:translateY(-3px);border-color:var(--gold-400);box-shadow:0 16px 30px -14px rgba(0,0,0,.9),0 0 30px rgba(212,175,106,.22)}
.cards__cell input:focus-visible+.pick{outline:2px solid var(--gold-400);outline-offset:3px}
.pick__mark{position:absolute;top:4px;right:4px;display:none;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--gold-400);color:#1a1407;font-size:.6875rem}
.cards__cell input:checked+.pick .pick__mark{display:grid}
/* Подпись аркана помещается только на широком экране: в клетке 55 px она превратилась бы в кашу,
   поэтому на телефоне карту называет строка «Ваша карта: …» под сеткой. */
.pick__name{display:none}
@media(min-width:620px){.pick__name{display:block;position:absolute;left:0;right:0;bottom:0;padding:18px 4px 5px;background:linear-gradient(180deg,transparent,rgba(7,6,13,.94) 62%);font-size:.6875rem;line-height:1.2;text-align:center;color:var(--gold-200)}}
.cards__chosen{margin-top:10px;font-size:.8125rem;color:var(--gold-200)}

/* ---------- Что даёт место за столом ---------- */
.grant{display:grid;align-content:start;gap:14px;padding:clamp(20px,4vw,30px);background:linear-gradient(160deg,color-mix(in srgb,var(--indigo-700) 40%,var(--ink-900)),var(--ink-900) 72%)}
.grant__coin{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gold-200),var(--gold-400) 60%,#8a6a2f);color:#1a1407;font:700 1.25rem/1 var(--font-display);box-shadow:inset 0 0 0 3px rgba(26,20,7,.25),0 8px 20px -6px rgba(212,175,106,.5)}
.grant__title{font-size:var(--fs-h3)}
.grant__list{display:grid;gap:12px;margin:0;padding:0;list-style:none;font-size:.9375rem;color:var(--fog-300)}
.grant__list li{position:relative;padding-left:24px}
.grant__list li::before{content:"✦";position:absolute;left:0;top:0;color:var(--gold-400)}
.grant__list b{color:var(--text);font-weight:600}
.grant__quote{margin:4px 0 0;padding-left:16px;border-left:1px solid var(--line);font:400 1.125rem/1.35 var(--font-display);color:var(--gold-200)}

/* ---------- Участник: профиль ---------- */
.acc-user{display:grid;gap:0}
.profile{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"art text" "wallet wallet" "acts acts";gap:16px 18px;padding:clamp(16px,3vw,24px);background:linear-gradient(150deg,color-mix(in srgb,var(--indigo-700) 34%,var(--ink-900)),var(--ink-900) 68%)}
.profile__art{grid-area:art;width:84px;aspect-ratio:2/3;overflow:hidden;border:1px solid var(--gold-400);border-radius:10px;box-shadow:0 20px 36px -18px rgba(0,0,0,.9),0 0 30px rgba(212,175,106,.14)}
.profile__art img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}
/* Карта не выбрана — рубашка с филигранью, как у запечатанной карты на главной: пустого места не остаётся. */
.profile__art--none{display:grid;place-items:center;background:repeating-linear-gradient(45deg,rgba(212,175,106,.1) 0 6px,transparent 6px 12px),radial-gradient(circle at 50% 50%,#2a2560,var(--ink-950) 75%);color:var(--gold-400);font:600 1.5rem/1 var(--font-display)}
.profile__text{grid-area:text;display:grid;align-content:center;gap:4px;min-width:0}
.profile__eyebrow{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--fog-300)}
.profile__name{font-size:var(--fs-h3)}
.profile__card{font-size:.875rem;color:var(--gold-200)}
.profile__meta{font-size:.75rem;color:var(--fog-600)}
.profile__wallet{grid-area:wallet;display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03)}
.profile__wallet .wallet__coin{width:36px;height:36px;font-size:1.0625rem}
.profile__label{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fog-600)}
.profile__balance{font:600 1.125rem/1.2 var(--font-display);color:var(--gold-200)}
.profile__rub{font-size:.75rem;color:var(--fog-600)}
.profile__acts{grid-area:acts;display:flex;flex-wrap:wrap;gap:10px}
/* Свободное место уходит в колонку кнопок, а не в колонку имени: иначе между именем и кошельком
   копилась дыра в 220 px на ноутбуке и в 415 px на мониторе 21:9, и карточка читалась как две
   случайно сведённые плашки. Теперь слева одна группа (карта, имя, кошелёк), справа — действия. */
@media(min-width:900px){
  .profile{grid-template-columns:auto minmax(0,auto) auto minmax(0,1fr);grid-template-areas:"art text wallet acts";align-items:center;gap:22px}
  .profile__acts{justify-content:flex-end}
  .profile__art{width:104px}
}

/* ---------- Участник: разделы ---------- */
/* Четыре вкладки должны уместиться в 375 px без переноса, поэтому на телефоне подпись мельче. */
.acc-tabs{max-width:560px;margin:clamp(22px,4vw,32px) 0 clamp(16px,3vw,22px)}
.acc-tabs .tabs__btn{padding:0 8px;font-size:.8125rem}
@media(min-width:560px){.acc-tabs .tabs__btn{padding:0 14px;font-size:.9375rem}}
.acc-panel{display:grid;gap:14px}
.acc-panel:focus-visible{outline:2px solid var(--gold-400);outline-offset:6px}
.acc-panel__lead{max-width:60ch;color:var(--fog-300);font-size:.9375rem}

.acc-empty{display:grid;justify-items:start;gap:12px;padding:clamp(20px,4vw,32px)}
.acc-empty h3{font-size:1.5rem}
.acc-empty p{max-width:52ch;color:var(--fog-300);font-size:.9375rem}

/* Заказы */
.order{display:grid;gap:12px;padding:clamp(14px,3vw,20px);animation:rise .7s var(--spring) both;animation-delay:calc(var(--d,0)*.07s)}
.order__head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.order__no{font:600 1.25rem/1.2 var(--font-display);color:var(--gold-200)}
.order__status{padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);font-size:.6875rem;letter-spacing:.04em;color:var(--gold-200)}
.order__date{flex:1 0 auto;font-size:.75rem;color:var(--fog-600)}
/* Ширина строки ограничена, а не ширина карточки: на 1280 и тем более на 2560 название стояло у левого
   края, цена — у правого, и между ними было до 800 px пустоты без единой направляющей. */
.order__items,.order__total{max-width:760px}
.order__items{display:grid;gap:9px;margin:0;padding:12px 0 0;border-top:1px solid rgba(255,255,255,.07);list-style:none}
.order__item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 14px;font-size:.875rem}
.order__item small{grid-column:1/-1;font-size:.75rem;color:var(--fog-600)}
.order__item span:last-child{color:var(--gold-200);white-space:nowrap;text-align:right}
.order__total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid var(--line);font-size:.875rem;color:var(--fog-300)}
.order__total .price{justify-content:flex-end}
.order__total .price__lotm{font:600 1.125rem/1.2 var(--font-display)}

/* Избранное */
.acc-wish{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr))}
.acc-wish .pcard{animation:rise .8s var(--spring) both;animation-delay:calc(var(--d,0)*.07s)}

/* Кошелёк */
/* Ширина ограничена: на мониторе 21:9 одна строка с суммой растянулась бы на полтора метра пустоты,
   а у строк кошелька «за что» и «сколько» разъехались бы по краям экрана. */
.wallet-card{display:flex;flex-wrap:wrap;align-items:center;gap:14px;max-width:560px;padding:clamp(16px,3vw,22px)}
.wallet-card .wallet__coin{width:44px;height:44px;font-size:1.25rem}
.wallet-card__sum{font:600 var(--fs-h3)/1.1 var(--font-display);color:var(--gold-200)}
.wallet-card__rub{font-size:.8125rem;color:var(--fog-600)}
.ledger{max-width:760px;margin:0;padding:0;list-style:none}
.ledger__row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 2px;border-bottom:1px solid rgba(255,255,255,.07);animation:rise .6s var(--spring) both;animation-delay:calc(var(--d,0)*.05s)}
.ledger__reason{font-size:.9375rem}
.ledger__date{font-size:.75rem;color:var(--fog-600)}
.ledger__delta{font:600 1.0625rem/1.2 var(--font-display);white-space:nowrap;color:#f3c4ca}
.ledger__delta--plus{color:var(--gold-200)}

/* Карта */
.card-panel{display:grid;gap:14px;padding:clamp(18px,4vw,28px)}
.card-panel h3{font-size:1.5rem}

/* ---------- Цифры сумм ----------
   Последним в файле: сокращённая запись font: … выше сбрасывает font-variant-numeric, и цифры
   Cormorant становятся «старого стиля» — «15 фунтов» читается как «ı5». См. .price__lotm в components.css. */
.profile__balance,.wallet-card__sum,.ledger__delta,.order__no,
.order__total .price__lotm,.order__item span:last-child{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}