/* Оболочка сайта клуба: шапка поверх содержимого, плавающая таблетка
   навигации, шторки снизу. Из макетов «Клуб - Главная» и «Клуб - Мой профиль».

   Разметку оболочки рисует общий `src/ui/shell.js` — та же, что у каталога
   (`#header`, `#main`, `#tabbar`, `#sheet`). Разная здесь только одежда: в
   каталоге шапка липкая и белая, здесь она лежит НА содержимом и проявляется
   на прокрутке. */

.fd-app { display: block; min-height: 100vh; min-height: 100dvh; }

/* ── шапка ────────────────────────────────────────────────────────────────
   Прозрачная в первом экране: под ней свечение подложки, и плашка разрезала
   бы его пополам. Класс `on` вешает прокрутка (порог 14px, shell.js). */
.fd-header {
  position: fixed;
  left: 0; right: 0; top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: var(--cs-top) 20px 14px;
  padding-top: calc(var(--cs-top) + env(safe-area-inset-top, 0px));
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease, padding .3s ease;
}
.fd-header.on {
  background: var(--navBg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--line);
  padding: 16px 20px 12px;
  padding-top: calc(16px + env(safe-area-inset-top, 0px));
}

/* Знак клуба квадратом. Нет картинки — первая буква названия чернилами по
   акценту: тот же запасной вариант, что у аватара клуба в каталоге. */
.cs-mark {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border-radius: 11px;
  overflow: hidden;
  background: var(--acc);
  color: var(--accInk);
  font-family: var(--f-head); font-size: 15px; font-weight: 800;
}
.cs-markImg { position: absolute; inset: 0; background-size: cover; background-position: center; }

.cs-headName { flex: 1; min-width: 0; display: block; text-align: left; }
.cs-headName b {
  display: block;
  font-family: var(--f-head); font-size: 15px; font-weight: 800; letter-spacing: -.2px;
  color: var(--ink);
}
.cs-headName span {
  display: block; margin-top: 2px;
  font-size: 11.5px; font-weight: 600; color: rgba(255, 255, 255, .5);
}

/* ── сцена ────────────────────────────────────────────────────────────────
   Прокручивается сама страница, а не внутренний контейнер: в макете экран
   заперт в рамке телефона, а у нас он и есть телефон. Отступ сверху ставит
   каждый экран сам — он разный (80px на Главной, 86px в профиле). */
.fd-main { display: block; }
.fd-screen { display: none; }
/* Появление экрана — ТОЛЬКО прозрачностью.

   Сдвиг был бы красивее, но `transform` на элементе делает его границами
   отсчёта для всего `position: fixed` внутри: док страницы вечера переставал
   липнуть к низу, а собственные шапки экранов уезжали бы вверх вместе с
   прокруткой. Движение при смене экрана и так есть — блоки внутри
   проявляются по прокрутке (`.rv`). */
.fd-screen.on { display: block; animation: csScreenIn .32s var(--ease) both; }
@keyframes csScreenIn { from { opacity: 0 } to { opacity: 1 } }

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

   Отступ снизу считается с безопасной зоной: в макете кадр 844px без выреза,
   а на живом телефоне таблетка села бы прямо на полосу «домой». */
/* ── таббар «луч снизу» ────────────────────────────────────────────────────
   Макет «Клуб - Навбар финал». У нижней кромки бара живут два слоя: тонкая
   черта под активной вкладкой и зарево под ней. При переходе они ПЕРЕЕЗЖАЮТ —
   черта за 440 мс с лёгким перелётом, зарево догоняет её с задержкой 60 мс.
   Ради этого переезда таббар клуба и рисуется один раз (см. shell.js). */
.fd-tabbar {
  position: fixed;
  left: var(--nav-inset); right: var(--nav-inset);
  bottom: calc(var(--nav-inset) + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  height: var(--nav-h);
  border-radius: 26px;
  overflow: hidden;
  background: var(--navBg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.fd-navRow {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
}
/* Зарево — половина высоты бара, растушёвано книзу. Кривая с перелётом та же,
   что у черты, но мягче и с задержкой: они едут не строем, а друг за другом. */
.fd-navGlow {
  position: absolute; bottom: 0;
  height: 58px;
  background: radial-gradient(58% 92% at 50% 100%, var(--accSoft), transparent 72%);
  transition: left .5s cubic-bezier(.34, 1.4, .5, 1) .06s, opacity .3s ease;
  pointer-events: none;
}
.fd-navBeam {
  position: absolute; bottom: 0;
  width: 34px; height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--acc);
  box-shadow: 0 0 16px var(--acc);
  transition: left .44s cubic-bezier(.34, 1.45, .5, 1), opacity .3s ease;
  pointer-events: none;
}
.fd-tabbar a {
  position: relative;
  height: var(--nav-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  color: rgba(255, 255, 255, .44);
  cursor: pointer;
  transition: color .3s ease;
}
.fd-tabIco { position: relative; display: flex; }
.fd-tabbar a i {
  font-size: 21px;
  transition: transform .4s cubic-bezier(.34, 1.45, .5, 1);
}
/* Иконка активного приподнимается и чуть крупнее — вместе с чертой под ней
   это один жест, а не два украшения. */
.fd-tabbar a.on i { transform: translateY(-2px) scale(1.1); }
.fd-tabLabel { font-size: 10px; font-weight: 650; letter-spacing: .1px; }
.fd-tabbar a.on { color: var(--acc); }
.fd-tabbar a.on .fd-tabLabel { font-weight: 800; }

/* Сколько броней ждёт. Значок висит на ИКОНКЕ, а не на кнопке: в макете он
   прижат к её правому верхнему углу, и от ширины подписи не зависит. */
.fd-tabbar .fd-badge {
  position: absolute; top: -3px; right: -8px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: var(--acc); color: var(--accInk);
  font-size: 9.5px; font-weight: 800;
}
.fd-tabbar .fd-badge[hidden] { display: none; }

/* Шаги входа живут без оболочки — там ещё не из чего выбирать. */
body.fd-bare .fd-header, body.fd-bare .fd-tabbar { display: none; }

/* ── шторка снизу ─────────────────────────────────────────────────────────
   Из «Мой профиль»: подложка притемняет и размывает, панель выезжает снизу.
   Высоту ставит содержимое (80% у настроек, 82% у друзей) — здесь только то,
   что у них общее. */
.fd-sheet-back {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, .62);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  animation: fadeIn .3s ease both;
}
.fd-sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 86%;
  display: flex; flex-direction: column;
  border-radius: 28px 28px 0 0;
  overflow: hidden;
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  animation: csSheetUp .4s var(--ease) both;
}
@keyframes csSheetUp { from { transform: translateY(100%) } to { transform: none } }
.fd-sheet-grip {
  width: 44px; height: 4px; flex: none;
  border-radius: 3px;
  background: rgba(255, 255, 255, .22);
  margin: 14px auto 14px;
}

/* ── тосты ────────────────────────────────────────────────────────────────
   Над таблеткой навигации, а не под ней: иначе сообщение о брони прячется
   ровно за той кнопкой, к которой относится. */
.fd-toasts {
  position: fixed; left: 14px; right: 14px;
  bottom: calc(var(--nav-inset) * 2 + var(--nav-h) + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.fd-toast {
  max-width: 100%;
  border-radius: 14px;
  background: var(--tileHi);
  border: 1px solid var(--line);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .55);
  padding: 12px 15px;
  font-size: 13px; font-weight: 700; line-height: 1.4;
  color: var(--ink);
  animation: fadeUp .26s var(--ease) both;
}
.fd-toast.err { border-color: var(--accLine); color: var(--acc); }

/* Шторку можно смахнуть вниз (ui/shell.js, dragSheets). Браузеру надо сказать
   две вещи, иначе жест до нас не доходит:
     `touch-action: pan-y` — вертикаль наша, горизонталь и зум остаются его;
     `overscroll-behavior: contain` — список, прокрученный в начало, не отдаёт
     оттяжку вниз странице и не рисует свою резинку поверх нашего хода. */
[data-sheet] { touch-action: pan-y; overscroll-behavior: contain; }
[data-sheet] [class$="Body"], [data-sheet] .noscroll { overscroll-behavior: contain; }