/* База знаний «Дневника Трейдера».
 *
 * Поверх стиля витрины (`landing.css`): те же шрифты, токены и типографика —
 * справка не должна выглядеть чужим сайтом. Своё здесь три вещи: раскладка с
 * боковым меню и оглавлением, элементы документации (шаги, заметки, таблицы
 * клавиш) и светлая тема.
 *
 * Светлая тема сделана переопределением тех же переменных, а не вторым
 * набором правил: любой цвет, заданный мимо токена, в ней сломается — и это
 * видно сразу, что и требуется.
 */

:root[data-theme="light"] {
  --bg-0:#ffffff; --bg-1:#f6f7f9; --bg-2:#eceef2; --bg-deep:#f0f2f5;
  --line:#e2e5ea; --line-2:#cfd4dc;
  --tx-0:#14161a; --tx-1:#4a5057; --tx-2:#787f8a;
  --blue:#2f62d8; --blue-d:#2a58c2; --green:#12a35c; --red:#d4372f; --amber:#b8720a;
  --blue-a:rgba(47,98,216,0.07); --blue-b:rgba(47,98,216,0.22);
  --green-a:rgba(18,163,92,0.07); --green-b:rgba(18,163,92,0.24);
  --red-a:rgba(212,55,47,0.06);  --red-b:rgba(212,55,47,0.22);
}

body.hp { background:var(--bg-0); color:var(--tx-0); }

/* ---- шапка ------------------------------------------------------------- */
.hp-top {
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--bg-0) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hp-top__inner {
  max-width:var(--cw); margin:0 auto; padding:10px clamp(14px,3vw,28px);
  display:flex; align-items:center; gap:clamp(10px,2vw,22px); min-height:60px;
}
.hp-brand {
  display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--tx-0);
  font-family:Unbounded,Raleway,sans-serif; font-size:15px; white-space:nowrap;
}
.hp-brand em { font-style:normal; color:var(--tx-2); font-size:12px; }
.hp-top__right { margin-left:auto; display:flex; align-items:center; gap:8px; }
.hp-theme {
  background:var(--bg-1); border:1px solid var(--line); color:var(--tx-1);
  border-radius:var(--r-sm); padding:9px 13px; font:inherit; font-size:var(--t-sm);
  cursor:pointer; white-space:nowrap;
}
.hp-theme:hover { border-color:var(--line-2); color:var(--tx-0); }
.hp-burger {
  display:none; background:var(--bg-1); border:1px solid var(--line); color:var(--tx-0);
  border-radius:var(--r-sm); padding:9px 13px; font-size:16px; cursor:pointer;
}

/* ---- поиск ------------------------------------------------------------- */
.hp-search { position:relative; flex:1; min-width:0; max-width:460px; }
.hp-search__input {
  width:100%; background:var(--bg-1); border:1px solid var(--line); color:var(--tx-0);
  border-radius:var(--r-sm); padding:10px 14px; font:inherit; font-size:var(--t-sm);
}
.hp-search__input:focus { outline:none; border-color:var(--blue); }
.hp-search__results {
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:40;
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:0 18px 44px rgba(0,0,0,0.28); padding:6px; max-height:62vh; overflow-y:auto;
}
.hp-search__hit {
  display:block; padding:9px 11px; border-radius:var(--r-sm);
  text-decoration:none; color:var(--tx-0); font-size:var(--t-sm);
}
.hp-search__hit:hover, .hp-search__hit.is-active { background:var(--bg-2); }
.hp-search__hit em { display:block; font-style:normal; color:var(--tx-2); font-size:var(--t-xs); margin-top:2px; }
.hp-search__empty { padding:12px; color:var(--tx-2); font-size:var(--t-sm); }

/* ---- раскладка --------------------------------------------------------- */
.hp-shell {
  max-width:var(--cw); margin:0 auto; padding:clamp(18px,3vw,34px) clamp(14px,3vw,28px);
  display:grid; grid-template-columns:264px minmax(0,1fr) 210px; gap:clamp(18px,3vw,40px);
  align-items:start;
}
.hp-side { position:sticky; top:78px; max-height:calc(100dvh - 96px); overflow-y:auto; }
.hp-nav__group { margin-bottom:20px; }
.hp-nav__title {
  font-size:var(--t-xs); text-transform:uppercase; letter-spacing:0.08em;
  color:var(--tx-2); margin-bottom:8px;
}
.hp-nav__item {
  display:block; padding:7px 11px; border-radius:var(--r-sm);
  color:var(--tx-1); text-decoration:none; font-size:var(--t-sm); line-height:1.45;
}
.hp-nav__item:hover { background:var(--bg-1); color:var(--tx-0); }
.hp-nav__item.is-current { background:var(--blue-a); color:var(--blue); font-weight:600; }

.hp-main { min-width:0; }
.hp-toc { position:sticky; top:78px; font-size:var(--t-sm); }
.hp-toc__title { font-size:var(--t-xs); text-transform:uppercase; letter-spacing:0.08em; color:var(--tx-2); margin-bottom:8px; }
.hp-toc__list { display:flex; flex-direction:column; gap:2px; border-left:1px solid var(--line); }
.hp-toc__list a { padding:5px 12px; color:var(--tx-2); text-decoration:none; line-height:1.4; }
.hp-toc__list a:hover { color:var(--tx-0); }
.hp-toc__list a.is-current { color:var(--blue); box-shadow:inset 2px 0 0 var(--blue); }

/* ---- текст статьи ------------------------------------------------------ */
.hp-crumbs { font-size:var(--t-xs); color:var(--tx-2); margin-bottom:10px; }
.hp-crumbs a { color:var(--tx-2); text-decoration:none; }
.hp-crumbs a:hover { color:var(--tx-0); }

.hp-article h1 { font-size:clamp(28px,3.4vw,44px); line-height:1.1; margin-bottom:12px; }
.hp-article .hp-lead { font-size:var(--t-lead); color:var(--tx-1); line-height:1.65; margin-bottom:clamp(24px,3vw,38px); }
.hp-article h2 {
  font-size:clamp(20px,2.2vw,28px); margin:clamp(30px,3.6vw,48px) 0 12px;
  scroll-margin-top:86px;
}
.hp-article h3 { font-size:clamp(16px,1.6vw,19px); margin:26px 0 8px; font-weight:400; }
.hp-article p, .hp-article li { font-size:var(--t-body); line-height:1.75; color:var(--tx-1); }
.hp-article p { margin:0 0 14px; }
.hp-article strong { color:var(--tx-0); font-weight:700; }
.hp-article a { color:var(--blue); }
.hp-article ul, .hp-article ol { margin:0 0 16px; padding-left:22px; }
.hp-article li { margin-bottom:7px; }
.hp-article code {
  background:var(--bg-2); border:1px solid var(--line); border-radius:5px;
  padding:1px 6px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.9em;
  color:var(--tx-0);
}
.hp-article hr { border:none; border-top:1px solid var(--line); margin:32px 0; }

/* Шаги сценария. Нумерация счётчиком, а не руками: вставленный посередине
   шаг иначе сдвигает все номера, и однажды их забывают поправить. */
.hp-steps { counter-reset:hp-step; list-style:none; padding:0; margin:0 0 20px; }
.hp-steps > li {
  counter-increment:hp-step; position:relative; padding-left:44px; margin-bottom:16px;
}
.hp-steps > li::before {
  content:counter(hp-step); position:absolute; left:0; top:-2px;
  width:28px; height:28px; border-radius:50%;
  background:var(--blue-a); border:1px solid var(--blue-b); color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--t-sm); font-weight:700;
}
.hp-steps > li > b, .hp-steps > li > strong { display:block; color:var(--tx-0); margin-bottom:3px; }

/* Заметки. Три вида: пояснение, предупреждение и то, чего в продукте нет. */
.hp-note, .hp-warn, .hp-gap {
  border-radius:var(--r-md); padding:14px 18px; margin:0 0 20px;
  font-size:var(--t-sm); line-height:1.7; color:var(--tx-1);
  border:1px solid var(--line); background:var(--bg-1);
}
.hp-note { border-left:3px solid var(--blue); background:var(--blue-a); }
.hp-warn { border-left:3px solid var(--amber); }
.hp-gap  { border-left:3px solid var(--red); background:var(--red-a); }
.hp-note b, .hp-warn b, .hp-gap b { color:var(--tx-0); }

/* Таблицы справки прокручиваются внутри своей рамки: на телефоне колонки
   иначе распирают страницу, и вбок едет весь документ. */
.hp-table-wrap { overflow-x:auto; margin:0 0 20px; border:1px solid var(--line); border-radius:var(--r-md); }
.hp-table { width:100%; border-collapse:collapse; font-size:var(--t-sm); min-width:420px; }
.hp-table th, .hp-table td { padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); }
.hp-table th { background:var(--bg-1); color:var(--tx-0); font-weight:700; white-space:nowrap; }
.hp-table tr:last-child td { border-bottom:none; }
.hp-table td { color:var(--tx-1); }

/* Карточки разделов на главной справки. */
.hp-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--gap); margin-bottom:var(--s-block); }
.hp-card {
  background:var(--bg-1); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:20px 22px; text-decoration:none; display:block;
}
.hp-card:hover { border-color:var(--line-2); }
.hp-card h2 { font-size:var(--t-h3); margin:0 0 6px; }
.hp-card p { color:var(--tx-2); font-size:var(--t-sm); margin:0 0 12px; line-height:1.6; }
.hp-card ul { margin:0; padding-left:18px; }
.hp-card li { font-size:var(--t-sm); color:var(--tx-1); margin-bottom:4px; }
.hp-card li a { color:var(--tx-1); text-decoration:none; }
.hp-card li a:hover { color:var(--blue); }

/* Ссылки «дальше» под статьёй. */
.hp-next { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--gap); margin-top:clamp(34px,4vw,56px); }
.hp-next__item {
  border:1px solid var(--line); border-radius:var(--r-md); padding:14px 18px;
  text-decoration:none; display:block; background:var(--bg-1);
}
.hp-next__item:hover { border-color:var(--line-2); }
.hp-next__item span { display:block; font-size:var(--t-xs); color:var(--tx-2); margin-bottom:4px; }
.hp-next__item b { color:var(--tx-0); font-weight:600; font-size:var(--t-sm); }

/* Кнопка «открыть в продукте» — прямой переход из инструкции к экрану. */
.hp-open {
  display:inline-flex; align-items:center; gap:8px; margin:0 0 22px;
  background:var(--blue-a); border:1px solid var(--blue-b); color:var(--blue);
  border-radius:var(--r-sm); padding:10px 16px; font-size:var(--t-sm); text-decoration:none;
}
.hp-open:hover { background:var(--blue-b); color:var(--tx-0); }

.hp-foot { border-top:1px solid var(--line); margin-top:clamp(40px,6vw,80px); }
.hp-foot__inner {
  max-width:var(--cw); margin:0 auto; padding:22px clamp(14px,3vw,28px);
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  font-size:var(--t-sm); color:var(--tx-2);
}
.hp-foot a { color:var(--tx-1); }

/* ---- узкий экран -------------------------------------------------------
   Боковое меню убирается под кнопку, оглавление прячется совсем: на телефоне
   оно занимает экран, а прокрутить статью и так недолго. */
@media (max-width:1100px) {
  .hp-shell { grid-template-columns:240px minmax(0,1fr); }
  .hp-toc { display:none; }
}
@media (max-width:860px) {
  .hp-shell { grid-template-columns:minmax(0,1fr); }
  .hp-side {
    position:fixed; inset:60px 0 auto 0; z-index:25; max-height:calc(100dvh - 60px);
    background:var(--bg-0); border-bottom:1px solid var(--line);
    padding:16px clamp(14px,3vw,28px); display:none;
  }
  .hp-side.is-open { display:block; }
  .hp-burger { display:inline-flex; }
  .hp-top__login { display:none; }
  .hp-brand span { display:none; }
  .hp-search { max-width:none; }
  /* Подпись у кнопки темы прячется: на 390px шапка иначе шире окна на
     считаные пиксели, и вбок едет вся страница. Иконки хватает — рядом
     подсказка в title. */
  .hp-theme__label { display:none; }
  /* Поиск переезжает на свою строку: рядом с логотипом, кнопкой и бургером
     от него оставалось поле в два сантиметра, в которое нечего вводить. */
  .hp-top__inner { gap:8px; flex-wrap:wrap; }
  .hp-search { order:3; flex:1 0 100%; }
}