/* Списочные экраны воронки подбора (быстрый / для зависимых / персональный).
   Оформление то же, что на экране «Выберите свой путь»: чёрный фон #02040A,
   тонкая градиентная рамка cyan→blue→violet→magenta, контурные иконки.

   Размеры заданы в единицах эталона 853 и умножаются на масштаб --s, поэтому
   геометрия совпадает с экраном выбора на любом телефоне.

   Главное отличие от экрана выбора: пунктов может быть много. Поэтому шапка
   и заголовок закреплены, а прокручивается только список — и только когда он
   не помещается. Если пунктов мало, прокрутки нет вообще. */

/* Файл должен работать сам по себе: /botmenu подключает только его, без
   общего CSS проекта. Без этой строки width:100% складывается с padding,
   и пункты вылезают за правый край. */
.nff-page, .nff-page *, .nff-page *::before, .nff-page *::after { box-sizing: border-box; }

.nff-page {
  --s: calc(min(100vw, 520px) / 853);
  --nff-brand: linear-gradient(115deg, #25e7ff 0%, #3f93ff 34%, #7658ff 68%, #f04fff 100%);
  position: relative;
  height: 100dvh;
  overflow: hidden;
  background: #02040a;
  color: #f7f7f8;
  font-family: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  display: flex;
  justify-content: center;
}

.nff-shell {
  width: calc(853 * var(--s));
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 calc(36 * var(--s));
}

/* ── Шапка ── */
.nff-top {
  flex: 0 0 auto;
  height: calc(166 * var(--s));
  display: flex;
  align-items: center;
  gap: calc(28 * var(--s));
}
.nff-back {
  width: calc(66 * var(--s)); height: calc(66 * var(--s));
  flex: none; padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nff-back img, .nff-logo img { width: 100%; height: 100%; display: block; }
.nff-logo { width: calc(75 * var(--s)); height: calc(80 * var(--s)); flex: none; }
.nff-word {
  font-size: calc(26 * var(--s)); font-weight: 500; letter-spacing: .26em;
  color: #f3f4f7; white-space: nowrap; text-decoration: none;
}
.nff-word i {
  font-style: normal; background: var(--nff-brand);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ── Заголовок раздела ── */
.nff-head { flex: 0 0 auto; padding: calc(38 * var(--s)) 0 calc(30 * var(--s)); }
.nff-eyebrow { margin: 0 0 calc(10 * var(--s)); font-size: calc(30 * var(--s));
               font-weight: 400; color: #63667d; line-height: 1; }
.nff-title { margin: 0; font-size: calc(52 * var(--s)); font-weight: 650;
             letter-spacing: -0.015em; line-height: 1.1; color: #f7f7f8; }

/* ── Список ──
   flex:1 забирает остаток высоты. Прокрутка появляется сама, только если
   пунктов больше, чем влезает. */
.nff-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Расширяем область прокрутки в стороны и тут же возвращаем отрицательным
     отступом: ширина пунктов не меняется, но свечение по бокам не срезается. */
  padding: 0 calc(18 * var(--s)) calc(40 * var(--s));
  margin: 0 calc(-18 * var(--s));
  scrollbar-width: none;
}
.nff-list::-webkit-scrollbar { display: none; }

/* ── Пункт списка ──
   Намеренно ниже, чем три большие карточки на экране выбора: пунктов тут
   много, и крупные блоки заставляли бы листать даже короткие списки. */
.nff-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(26 * var(--s));
  width: 100%;
  min-height: calc(128 * var(--s));
  margin-bottom: calc(22 * var(--s));
  padding: calc(20 * var(--s)) calc(28 * var(--s));
  border-radius: calc(34 * var(--s));
  /* Не плоская заливка: голубой подтон слева, розовый справа. Оба очень
     слабые — иначе на длинном списке рябит в глазах. */
  background:
    linear-gradient(100deg, rgba(37,231,255,.09), rgba(2,4,10,0) 46%, rgba(240,79,255,.10));
  background-color: #04070f;
  /* Мягкое внешнее свечение теми же двумя цветами + тонкий блик по кромке. */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 calc(26 * var(--s)) rgba(37,231,255,.16),
    0 0 calc(30 * var(--s)) rgba(240,79,255,.13);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.nff-item::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; padding: calc(1.4 * var(--s) + 0.6px);
  background: linear-gradient(115deg, rgba(37,231,255,.78), rgba(63,147,255,.46) 40%,
                              rgba(118,88,255,.52) 72%, rgba(240,79,255,.66));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; pointer-events: none;
}
.nff-item:active {
  background-color: #071021;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 calc(34 * var(--s)) rgba(37,231,255,.28),
    0 0 calc(38 * var(--s)) rgba(240,79,255,.24);
}

.nff-item__ico {
  width: calc(58 * var(--s)); height: calc(58 * var(--s));
  flex: none; z-index: 3; display: block;
}
.nff-item__txt {
  flex: 1 1 auto; z-index: 3; min-width: 0;
  font-size: calc(36 * var(--s)); font-weight: 500; line-height: 1.15; color: #f7f7f8;
}
.nff-item__sub {
  display: block; margin-top: calc(8 * var(--s));
  font-size: calc(26 * var(--s)); font-weight: 400; line-height: 1.2; color: #9ca3b5;
}
.nff-item__go { width: calc(44 * var(--s)); height: calc(20 * var(--s)); flex: none; z-index: 3; opacity: .85; }

/* Пункт «Назад» в конце списка — тот же блок, но приглушённый и без иконки. */
.nff-item--back {
  min-height: calc(104 * var(--s));
  justify-content: center;
  opacity: .7;
  background-image: none;
  box-shadow: none;
}
.nff-item--back .nff-item__txt { flex: 0 0 auto; font-size: calc(32 * var(--s)); }

/* Выключенный в админке пункт — виден только в предпросмотре. */
.nff-item--off { opacity: .42; }
.nff-item__off {
  display: block; margin-top: calc(8 * var(--s));
  font-size: calc(24 * var(--s)); font-weight: 400; color: #8c90a6;
}

/* Пустой раздел */
.nff-empty {
  border: 1px dashed rgba(120,145,190,.28); border-radius: calc(34 * var(--s));
  padding: calc(40 * var(--s)) calc(30 * var(--s));
  text-align: center; color: #9ca3b5; font-size: calc(28 * var(--s)); line-height: 1.4;
}

/* Плашка предпросмотра админа */
.nff-admin {
  position: absolute; left: 0; right: 0; top: 0; z-index: 5;
  background: rgba(118,88,255,.14); border-bottom: 1px solid rgba(118,88,255,.4);
  color: #cbb8ff; text-align: center; font-size: 12px; padding: 7px 12px;
}
.nff-admin a { color: #e6dbff; font-weight: 600; }


/* ── Размер пунктов по их количеству ─────────────────────────────────────────
   Одно правило на весь ресурс (см. services/nf_list_size.py): чем меньше
   пунктов на экране, тем они крупнее. Короткий список читается как набор
   больших карточек, длинный — как плотный перечень.
   Базовый .nff-item — это средний размер (уровень 2), поэтому отдельных
   правил для него не нужно. */

/* Уровень 1 — до четырёх пунктов: крупные карточки. */
.nff-item--l1 {
  min-height: calc(232 * var(--s));
  border-radius: calc(42 * var(--s));
  gap: calc(30 * var(--s));
  padding: calc(28 * var(--s)) calc(34 * var(--s));
  margin-bottom: calc(30 * var(--s));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 calc(44 * var(--s)) rgba(37,231,255,.20),
    0 0 calc(50 * var(--s)) rgba(240,79,255,.17);
}
.nff-item--l1::before { padding: calc(2 * var(--s) + 0.7px); }
.nff-item--l1 .nff-item__ico { width: calc(96 * var(--s)); height: calc(96 * var(--s)); }
.nff-item--l1 .nfk-ico { width: calc(132 * var(--s)); height: calc(132 * var(--s));
                         border-radius: calc(34 * var(--s)); }
.nff-item--l1 .nff-item__txt { font-size: calc(42 * var(--s)); }
.nff-item--l1 .nff-item__sub { font-size: calc(28 * var(--s)); }
.nff-item--l1 .nff-item__go { width: calc(54 * var(--s)); height: calc(24 * var(--s)); }
.nff-item--l1 .nfk-count { font-size: calc(28 * var(--s)); }
.nff-item--l1 .nfk-chev svg { width: calc(30 * var(--s)); height: calc(30 * var(--s)); }

/* Уровень 2 — от пяти до восьми: средние (совпадает с базовым видом). */
.nff-item--l2 { min-height: calc(140 * var(--s)); }
.nff-item--l2 .nfk-ico { width: calc(92 * var(--s)); height: calc(92 * var(--s)); }
.nff-item--l2 .nff-item__txt { font-size: calc(33 * var(--s)); }
.nff-item--l2 .nfk-count { font-size: calc(26 * var(--s)); }
.nff-item--l2 .nfk-chev svg { width: calc(26 * var(--s)); height: calc(26 * var(--s)); }

/* Уровень 3 — девять и больше: компактные, чтобы длинный список листался. */
.nff-item--l3 {
  min-height: calc(104 * var(--s));
  border-radius: calc(26 * var(--s));
  gap: calc(20 * var(--s));
  padding: calc(16 * var(--s)) calc(24 * var(--s));
  margin-bottom: calc(16 * var(--s));
}
.nff-item--l3 .nff-item__ico { width: calc(48 * var(--s)); height: calc(48 * var(--s)); }
.nff-item--l3 .nfk-ico { width: calc(66 * var(--s)); height: calc(66 * var(--s));
                         border-radius: calc(18 * var(--s)); }
.nff-item--l3 .nff-item__txt { font-size: calc(29 * var(--s)); }
.nff-item--l3 .nff-item__sub { font-size: calc(23 * var(--s)); }
.nff-item--l3 .nff-item__go { width: calc(36 * var(--s)); height: calc(17 * var(--s)); }
.nff-item--l3 .nfk-count { font-size: calc(24 * var(--s)); }
.nff-item--l3 .nfk-chev svg { width: calc(22 * var(--s)); height: calc(22 * var(--s)); }

/* ── Десктоп ─────────────────────────────────────────────────────────────────
   На телефоне экран — колонка 853 единиц эталона. На мониторе та же колонка
   выглядела бы телефоном посреди пустоты, поэтому:
     • масштаб --s фиксируем (иначе на широком экране всё раздувается);
     • оболочку расширяем и центрируем;
     • список раскладываем в несколько колонок — по ширине пункта.
   Высота и внутренняя прокрутка не меняются: экран остаётся «приложением». */
@media (min-width: 900px) {
  .nff-page {
    /* 0.68px за единицу эталона: пункт получается ~430px — привычный размер
       карточки на мониторе, а не увеличенный телефон. */
    --s: 0.68px;
  }
  .nff-shell {
    width: min(1240px, 94vw);
    padding: 0 clamp(16px, 2vw, 32px);
  }
  .nff-top { height: 96px; gap: 18px; }
  .nff-head { padding: 26px 0 22px; }

  /* Списки пунктов — сеткой. Колонка подстраивается под ширину экрана, поэтому
     на 1280 их три, на 1024 — две, и всё остаётся симметричным. */
  .nff-list--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 0 20px;
    align-content: start;
  }
  /* Крупные карточки (мало пунктов) — шире, чтобы их не сплющило до полосок. */
  .nff-list--grid:has(.nff-item--l1) {
    grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
  }
  .nff-list--grid > * { min-width: 0; }
}