/* Help Centre. Числа из макета: baqqybet-help-centre-desktop (1440) и
 * baqqybet-help-centre-mobile (390). Мобильная ветка пишется вместе с секцией.
 *
 * Компонентов, которых не хватило в components.css и которые собраны здесь:
 *   .help-nav / .help-nav__item — вертикальное меню категорий: в макете это не
 *     пилюля из .tab, а строка 212×40 с левой обводкой 3px у активной. Разметка
 *     остаётся .tabs/.tab (роль tablist/tab и поведение app.js), внешний вид
 *     переопределён здесь;
 *   .help-panel / .help-item    — панель категории с нумерованными пунктами.
 *
 * Семейства разные по фреймам: десктоп нарисован Archivo (--font-text),
 * мобильный — Inter (--font-ui). Переключается медиазапросом, а не «на глаз».
 */

/* ── help-centre-intro [2:1328] ───────────────────────────────────────── */
.help-intro { background: var(--color-bg); }
.help-intro__inner { padding-block: var(--space-64); }
/* intro-text [2:1329] — отдельный фрейм макета, отступы секции остаются снаружи. */
.help-intro__text { display: flex; flex-direction: column; gap: var(--space-8); }
.help-intro__eyebrow {
  font-family: var(--font-text);
  font-size: var(--fs-xs); font-weight: 800; line-height: 13.06px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--color-accent);
}
.help-intro__title {
  font-family: var(--font-text);
  font-size: 56px; font-weight: 900; line-height: 61px; letter-spacing: -1.5px;  /* 56 в токенах нет */
  color: var(--color-text-strong);
}
.help-intro__lead {
  font-family: var(--font-text);
  font-size: var(--fs-lg); line-height: 24px; color: var(--color-text);
}

/* ── main-help-area [2:1333] ──────────────────────────────────────────── */
.help-area { background: var(--color-bg); padding-block: 0 var(--space-64); }
.help-area__inner { display: flex; align-items: flex-start; gap: var(--space-64); }

/* меню категорий [2:1334] */
.help-nav {
  display: flex; flex-direction: column; gap: var(--space-12);
  width: 260px; flex: none;
  padding: var(--space-24);
  background: var(--color-panel);
  border-radius: var(--radius-14);
  box-shadow: inset 0 0 0 1px var(--color-border);   /* strokeAlign INSIDE */
}
.help-nav__label {
  font-family: var(--font-text);
  font-size: var(--fs-2xs); font-weight: 800; line-height: 12px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--color-text-muted);
}
/* .tabs из components.css — строка с переносом; здесь это колонка. */
.help-nav .help-nav__list { flex-direction: column; flex-wrap: nowrap; gap: var(--space-12); }

/* .tab перебивается специфичнее: класс-компонент против класса-компонента. */
.help-nav__list .help-nav__item {
  justify-content: flex-start; text-align: left;
  min-height: 40px; padding: var(--space-12) var(--space-16);
  background: transparent;
  border: 0; border-radius: 0;
  box-shadow: none;
  font-family: var(--font-text);
  font-size: var(--fs-md); font-weight: 500; line-height: 16.32px; letter-spacing: normal;
  color: var(--color-text);
  transition: color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.help-nav__list .help-nav__item:hover { background: transparent; color: var(--color-text-strong); }
.help-nav__list .help-nav__item[aria-selected="true"] {
  background: transparent;
  box-shadow: inset 3px 0 0 var(--color-accent);   /* обводка INSIDE, только слева */
  font-weight: 700; color: var(--color-accent);
}

/* панель категории [2:1354] */
.help-content {
  display: flex; flex-direction: column;
  flex: 1; min-width: 0;
  padding: var(--space-24);
  background: var(--color-panel);
  border-radius: var(--radius-14);
  box-shadow: inset 0 0 0 1px var(--color-border);
}
.help-panel { display: flex; flex-direction: column; gap: var(--space-24); }
.help-panel__title {
  font-family: var(--font-text);
  font-size: var(--fs-h2); font-weight: 900; line-height: 35px; letter-spacing: -.5px;
  color: var(--color-text-strong);
}
.help-panel__lead {
  font-family: var(--font-text);
  font-size: var(--fs-lg); line-height: 24px; color: var(--color-text);
}
.help-panel__items { display: flex; flex-direction: column; }

/* Разделители между пунктами — ROUNDED_RECTANGLE 972×1 #1f2a3a: в макете это
 * отдельный ребёнок панели с зазором 24 сверху и снизу, а не рамка пункта.
 * Поэтому линия рисуется псевдоэлементом и не входит в бокс .help-item:
 * шаг между пунктами 24+1+24 = 49, а сам пункт равен своему содержимому. */
.help-panel__items { gap: 49px; margin-top: 25px; }
.help-item {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-8);
}
.help-item::before {
  content: ""; position: absolute; inset-inline: 0; top: -25px;
  height: 1px; background: var(--color-border);
}
.help-item__head { display: flex; align-items: center; gap: var(--space-12); }
.help-item__num {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs); font-weight: 800; line-height: 16px; color: var(--color-accent);
}
.help-item__title {
  font-family: var(--font-text);
  font-size: var(--fs-h6); font-weight: 700; line-height: 20px; color: var(--color-text-strong);
}
.help-item__text {
  font-family: var(--font-text);
  font-size: var(--fs-md); line-height: 24px; color: var(--color-text);
}

/* Панель — контейнер фокуса при переходе с вкладки, рамка не должна пропасть. */
.help-panel:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; }

/* ── планшет ──────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .help-intro__title { font-size: var(--fs-d3); line-height: 52px; }
  .help-area__inner { gap: var(--space-32); }
  .help-nav { width: 220px; }
}

/* ── мобильный фрейм макета ───────────────────────────────────────────── */
@media (max-width: 767px) {
  /* интро [91:27]: pad 40/16/32, gap 10, семейство Inter */
  .help-intro__inner { padding-block: var(--space-40) var(--space-32); }
  .help-intro__text { gap: var(--space-10); }
  .help-intro__eyebrow {
    font-family: var(--font-ui);
    font-size: var(--fs-2xs); font-weight: 600; line-height: 13.31px; letter-spacing: 1.5px;
  }
  .help-intro__title {
    font-family: var(--font-ui);
    font-size: var(--fs-h2); line-height: 39px; letter-spacing: normal;
  }
  .help-intro__lead { font-family: var(--font-ui); font-size: var(--fs-body); line-height: 17px; }

  /* [91:31] + [91:53]: лента категорий над панелью, обе во всю ширину */
  .help-area { padding-block: 0 var(--space-48); }   /* spacer 48 после панели */
  .help-area__inner { flex-direction: column; gap: 0; }

  /* help-topics-mobile [91:31] — фрейм во всю ширину 390 со своим паддингом 16,
     поэтому блок выходит из паддинга контейнера отрицательным margin. */
  .help-nav {
    /* .help-area__inner — align-items: flex-start, поэтому без align-self блок
       растягивается по ленте категорий (1029px) вместо ширины экрана. */
    align-self: stretch; width: auto;
    gap: var(--space-12);
    margin-inline: calc(var(--container-pad-mobile) * -1);
    padding: 0 var(--container-pad-mobile) var(--space-20);
    background: none; border-radius: 0; box-shadow: none;
  }
  .help-nav__label {
    font-family: var(--font-ui);
    font-size: var(--fs-2xs); font-weight: 600; line-height: 13.31px; letter-spacing: 1px;
    text-transform: none;   /* в мобильном фрейме textCase не задан */
  }
  /* Лента шире экрана (1029px в макете) — горизонтальная прокрутка внутри блока. */
  .help-nav .help-nav__list {
    flex-direction: row; flex-wrap: nowrap; gap: var(--space-8);
    overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(var(--container-pad-mobile) * -1);
    padding-inline: var(--container-pad-mobile);
  }
  .help-nav .help-nav__list::-webkit-scrollbar { display: none; }

  .help-nav__list .help-nav__item {
    flex: none;
    min-height: 38px; padding: var(--space-10) 15px;   /* tab-* в макете 38×(текст+30) */
    white-space: nowrap;
    background: var(--color-panel);
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px var(--color-border);
    font-family: var(--font-ui);
    font-size: var(--fs-sm); font-weight: 500; line-height: 16px;
    color: var(--color-text);
  }
  .help-nav__list .help-nav__item:hover { background: var(--color-panel-deep); color: var(--color-text-strong); }
  .help-nav__list .help-nav__item[aria-selected="true"] {
    /* активная вкладка в макете 130×39 против 38 у остальных — обводка 1.5px
       нарисована снаружи текста, поэтому и бокс чуть крупнее. */
    min-height: 39px; padding-inline: 16px;
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--color-accent);
    color: var(--color-accent);
  }

  /* панель [91:52]: pad 20/16, gap 20, radius 12 */
  .help-content { padding: var(--space-20) 17px; border-radius: var(--radius-12); }   /* дети панели в макете на x=33 при панели на x=16 */
  .help-panel { gap: var(--space-20); }
  .help-panel__title {
    font-family: var(--font-ui);
    font-size: 22px; line-height: 27px; letter-spacing: normal;   /* 22 в токенах нет */
  }
  .help-panel__lead { font-family: var(--font-ui); font-size: var(--fs-body); line-height: 17px; }
  /* divider 324×1 с зазором 20 сверху и снизу → шаг 41. */
  .help-panel__items { gap: 41px; margin-top: 21px; }
  .help-item::before { top: -21px; }
  .help-item__head { gap: var(--space-10); }
  .help-item__title { font-family: var(--font-ui); font-size: var(--fs-lg); line-height: 19.36px; }
  .help-item__text { font-family: var(--font-ui); font-size: var(--fs-sm); line-height: 16px; }
}