/* =========================================================
   SKLADAPLAN — HELP
   Минималистичная светлая тема
   ========================================================= */


/* =========================================================
   1. ОСНОВНОЙ КОНТЕЙНЕР
   ========================================================= */

.help-page {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;

  padding: 8px 0 64px;

  color: #171717;
}


/* =========================================================
   2. HERO
   ========================================================= */

.help-hero {
  margin-bottom: 30px;
  padding: 4px 2px 0;
}

.help-hero h1 {
  margin: 0;

  color: #111;

  font-size: 30px;
  line-height: 1.15;
  font-weight: 700;

  letter-spacing: -0.035em;
}

.help-hero p {
  max-width: 700px;

  margin: 11px 0 0;

  color: #737373;

  font-size: 14px;
  line-height: 1.65;

  letter-spacing: -0.005em;
}


/* =========================================================
   3. БЫСТРАЯ НАВИГАЦИЯ
   ========================================================= */

.help-quick-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 7px;

  margin: 0 0 34px;
  padding: 6px;

  border: 1px solid #e7e7e7;
  border-radius: 13px;

  background: #f8f8f8;
}


/* ---------------------------------------------------------
   Навигационные кнопки
   --------------------------------------------------------- */

.help-quick-nav a,
.help-quick-nav a:visited,
.help-quick-nav a:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 34px;

  padding: 0 13px;

  border: 1px solid transparent;
  border-radius: 9px;

  color: #555 !important;

  background: transparent !important;

  text-decoration: none !important;

  font-size: 12px;
  line-height: 1;
  font-weight: 600;

  white-space: nowrap;

  box-shadow: none !important;

  transition:
    color .16s ease,
    background .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

.help-quick-nav a:hover {
  color: #111 !important;

  background: #fff !important;

  border-color: #e2e2e2;

  transform: none;
}

.help-quick-nav a:focus-visible {
  outline: 2px solid var(--primary, #0f766e);
  outline-offset: 2px;
}


/* =========================================================
   4. СЕКЦИИ
   ========================================================= */

.help-section {
  margin: 0 0 18px;
  padding: 25px 26px;

  border: 1px solid #e8e8e8;
  border-radius: 16px;

  background: #fff;

  box-shadow:
    0 1px 2px rgba(0,0,0,.025);
}

.help-section:last-child {
  margin-bottom: 0;
}


/* ---------------------------------------------------------
   Заголовок секции
   --------------------------------------------------------- */

.help-section h2 {
  margin: 0 0 14px;

  color: #111;

  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;

  letter-spacing: -0.025em;
}


/* ---------------------------------------------------------
   Подзаголовки
   --------------------------------------------------------- */

.help-section h3 {
  margin: 24px 0 9px;

  color: #222;

  font-size: 14px;
  line-height: 1.4;
  font-weight: 650;

  letter-spacing: -0.01em;
}


/* ---------------------------------------------------------
   Основной текст
   --------------------------------------------------------- */

.help-section p {
  max-width: 850px;

  margin: 0 0 11px;

  color: #626262;

  font-size: 14px;
  line-height: 1.7;

  letter-spacing: -0.003em;
}

.help-section p:last-child {
  margin-bottom: 0;
}


/* =========================================================
   5. СПИСКИ
   ========================================================= */

.help-section ul,
.help-section ol {
  max-width: 850px;

  margin: 12px 0 0;
  padding-left: 22px;

  color: #626262;

  font-size: 14px;
  line-height: 1.7;
}

.help-section li {
  margin-bottom: 7px;

  padding-left: 2px;
}

.help-section li:last-child {
  margin-bottom: 0;
}


/* =========================================================
   6. ТЕКСТОВЫЕ АКЦЕНТЫ
   ========================================================= */

.help-section strong {
  color: #171717;

  font-weight: 650;
}

.help-section em {
  color: #555;
}


/* =========================================================
   7. INLINE CODE
   ========================================================= */

.help-section code {
  display: inline-block;

  margin: 0 2px;
  padding: 2px 6px;

  border: 1px solid #e4e4e4;
  border-radius: 6px;

  color: #333;

  background: #f6f6f6;

  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  font-size: 11px;
  line-height: 1.45;
}


/* =========================================================
   8. ИНФОРМАЦИОННЫЙ БЛОК
   ========================================================= */

.help-note {
  margin: 19px 0;
  padding: 15px 17px;

  border: 1px solid #e5e5e5;
  border-radius: 11px;

  background: #f8f8f8;
}

.help-note p {
  max-width: none;

  margin: 0;

  color: #5f5f5f;

  font-size: 13px;
  line-height: 1.6;
}

.help-note strong {
  color: #171717;
}


/* =========================================================
   9. ПРЕДУПРЕЖДЕНИЕ
   ========================================================= */

.help-warning {
  margin: 19px 0;
  padding: 16px 17px;

  border: 1px solid #eadfc9;
  border-radius: 11px;

  background: #fcf9f2;
}

.help-warning p {
  max-width: none;

  margin: 0;

  color: #705f40;

  font-size: 13px;
  line-height: 1.6;
}

.help-warning strong {
  color: #7b560d;
}


/* =========================================================
   10. УСПЕШНЫЙ / РАБОЧИЙ БЛОК
   ========================================================= */

.help-success {
  margin: 19px 0;
  padding: 16px 17px;

  border: 1px solid #d9e9df;
  border-radius: 11px;

  background: #f5faf7;
}

.help-success p {
  max-width: none;

  margin: 0;

  color: #557062;

  font-size: 13px;
  line-height: 1.6;
}

.help-success strong {
  color: #18794e;
}


/* =========================================================
   11. КАРТОЧКИ
   ========================================================= */

.help-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(230px, 1fr)
    );

  gap: 10px;

  margin-top: 18px;
}

.help-card {
  min-width: 0;

  padding: 17px 18px;

  border: 1px solid #e9e9e9;
  border-radius: 13px;

  background: #fafafa;

  transition:
    border-color .16s ease,
    background .16s ease;
}

.help-card:hover {
  border-color: #dedede;

  background: #f7f7f7;

  transform: none;
}

.help-card h3 {
  margin: 0 0 7px;

  color: #181818;

  font-size: 13px;
  line-height: 1.4;
  font-weight: 650;
}

.help-card p {
  max-width: none;

  margin: 0;

  color: #737373;

  font-size: 12px;
  line-height: 1.6;
}


/* =========================================================
   12. СТАТУСЫ
   ========================================================= */

.help-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;

  margin-top: 14px;
}

.help-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 28px;

  padding: 0 10px;

  border: 1px solid #e3e3e3;
  border-radius: 8px;

  color: #555;

  background: #f8f8f8;

  font-size: 11px;
  line-height: 1;
  font-weight: 600;

  white-space: nowrap;
}


/* =========================================================
   13. ТАБЛИЦЫ
   ========================================================= */

.help-table-wrap {
  width: 100%;

  margin-top: 17px;

  overflow-x: auto;

  border: 1px solid #e5e5e5;
  border-radius: 12px;

  background: #fff;
}

.help-table {
  width: 100%;

  border-collapse: collapse;

  font-size: 13px;
}

.help-table th,
.help-table td {
  padding: 11px 13px;

  border-bottom: 1px solid #eeeeee;

  text-align: left;
  vertical-align: top;

  line-height: 1.5;
}

.help-table th {
  color: #333;

  background: #f8f8f8;

  font-size: 12px;
  font-weight: 650;

  white-space: nowrap;
}

.help-table td {
  color: #666;
}

.help-table tr:last-child td {
  border-bottom: none;
}


/* =========================================================
   14. ШАГИ ПРОЦЕССА
   ========================================================= */

.help-steps {
  display: flex;
  flex-direction: column;

  gap: 8px;

  margin-top: 17px;
}

.help-step {
  display: flex;
  align-items: flex-start;

  gap: 13px;

  padding: 13px 14px;

  border: 1px solid #e9e9e9;
  border-radius: 12px;

  background: #fafafa;
}

.help-step-number {
  flex: 0 0 27px;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 27px;
  height: 27px;

  border-radius: 8px;

  color: #fff;

  background: var(--primary, #0f766e);

  font-size: 11px;
  line-height: 1;
  font-weight: 700;
}

.help-step-content {
  flex: 1;
  min-width: 0;
}

.help-step-content strong {
  display: block;

  margin: 1px 0 4px;

  color: #181818;

  font-size: 13px;
  line-height: 1.4;
}

.help-step-content p {
  max-width: none;

  margin: 0;

  color: #737373;

  font-size: 12px;
  line-height: 1.6;
}


/* =========================================================
   15. EXCEL
   ========================================================= */

.help-excel {
  width: 100%;

  margin-top: 17px;

  overflow-x: auto;

  border: 1px solid #e5e5e5;
  border-radius: 12px;

  background: #fff;
}

.help-excel table {
  width: 100%;

  border-collapse: collapse;

  font-size: 13px;
}

.help-excel th,
.help-excel td {
  padding: 10px 12px;

  border-bottom: 1px solid #eeeeee;

  text-align: left;

  line-height: 1.5;
}

.help-excel tr:last-child td {
  border-bottom: none;
}

.help-excel th {
  color: #333;

  background: #f8f8f8;

  font-size: 12px;
  font-weight: 650;

  white-space: nowrap;
}

.help-excel td {
  color: #666;
}


/* =========================================================
   16. DIVIDER
   ========================================================= */

.help-divider {
  height: 1px;

  margin: 28px 0;

  background: #ededed;
}


/* =========================================================
   17. ЯКОРЯ
   ========================================================= */

.help-section[id] {
  scroll-margin-top: 28px;
}


/* =========================================================
   18. ССЫЛКИ
   ========================================================= */

.help-page a:not(.help-quick-nav a) {
  color: #333 !important;

  text-decoration: underline;
  text-decoration-color: #d1d1d1;
  text-underline-offset: 3px;

  transition:
    color .16s ease,
    text-decoration-color .16s ease;
}

.help-page a:not(.help-quick-nav a):hover {
  color: #111 !important;

  text-decoration-color: #999;
}


/* =========================================================
   19. ГЛОБАЛЬНАЯ ЗАЩИТА ТИПОГРАФИКИ
   ========================================================= */

.help-page,
.help-page * {
  box-sizing: border-box;
}

.help-page h1,
.help-page h2,
.help-page h3,
.help-page p,
.help-page ul,
.help-page ol,
.help-page table {
  font-family: inherit;
}


/* =========================================================
   20. MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .help-page {
    max-width: none;

    padding: 2px 0 36px;
  }


  /* Hero */

  .help-hero {
    margin-bottom: 22px;
    padding: 0;
  }

  .help-hero h1 {
    font-size: 24px;
    line-height: 1.18;
  }

  .help-hero p {
    margin-top: 9px;

    font-size: 13px;
    line-height: 1.6;
  }


  /* Навигация */

  .help-quick-nav {
    gap: 5px;

    margin-bottom: 22px;
    padding: 5px;

    border-radius: 12px;
  }

  .help-quick-nav a,
  .help-quick-nav a:visited,
  .help-quick-nav a:active {
    min-height: 32px;

    padding: 0 10px;

    border-radius: 8px;

    font-size: 11px;
  }


  /* Секции */

  .help-section {
    margin-bottom: 12px;
    padding: 19px 17px;

    border-radius: 14px;
  }

  .help-section h2 {
    margin-bottom: 11px;

    font-size: 17px;
  }

  .help-section h3 {
    margin-top: 20px;

    font-size: 13px;
  }

  .help-section p,
  .help-section ul,
  .help-section ol {
    font-size: 13px;
    line-height: 1.65;
  }


  /* Карточки */

  .help-grid {
    grid-template-columns: 1fr;

    gap: 8px;
  }

  .help-card {
    padding: 15px 16px;

    border-radius: 12px;
  }


  /* Шаги */

  .help-step {
    gap: 10px;

    padding: 11px 12px;

    border-radius: 11px;
  }

  .help-step-number {
    flex-basis: 26px;

    width: 26px;
    height: 26px;

    border-radius: 7px;
  }


  /* Таблицы */

  .help-table,
  .help-excel table {
    font-size: 12px;
  }

  .help-table th,
  .help-table td,
  .help-excel th,
  .help-excel td {
    padding: 9px 10px;
  }


  /* Информационные блоки */

  .help-note,
  .help-warning,
  .help-success {
    padding: 13px 14px;

    border-radius: 10px;
  }
}


/* =========================================================
   21. VERY SMALL SCREENS
   ========================================================= */

@media (max-width: 420px) {

  .help-quick-nav {
    display: grid;

    grid-template-columns: 1fr 1fr;

    width: 100%;
  }

  .help-quick-nav a,
  .help-quick-nav a:visited,
  .help-quick-nav a:active {
    width: 100%;
  }

  .help-section {
    padding: 17px 15px;
  }

  .help-section h2 {
    font-size: 16px;
  }

  .help-section p,
  .help-section ul,
  .help-section ol {
    font-size: 12.5px;
  }
}


/* =========================================================
   22. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .help-quick-nav a,
  .help-card {
    transition: none;
  }
}