/* ─────────────────────────────────────────────────────────────
   Справка /help и список изменений /changelog (help.js).
   Каркас общий с /rules и /terms: шапка .hud, .wrap, .top-line и подвал
   из app.css. Здесь только своё: оглавление слева, нумерованные разделы
   с тонкими линиями, подписи моноширинным капсом, один янтарный акцент.
   ───────────────────────────────────────────────────────────── */

.hud nav a.on{color:var(--ink)}

.hlp>.lead{margin:0 0 clamp(26px,4vw,44px);max-width:62ch}
.hlp-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}

/* оглавление */
.hlp-toc{position:sticky;top:86px;display:grid;gap:16px;min-width:0}
.hlp-q{display:grid;gap:7px}
.hlp-q input{width:100%;padding:9px 11px;background:transparent;border:1px solid var(--line2);border-radius:0;
  font-size:14px;color:var(--ink);outline:none;transition:border-color .2s ease}
.hlp-q input:focus{border-color:var(--accent)}
.hlp-q input::placeholder{color:var(--dim)}
.hlp-toc ol{list-style:none;border-top:1px solid var(--line)}
.hlp-toc a{display:grid;grid-template-columns:30px minmax(0,1fr);gap:6px;padding:7px 0;border-bottom:1px solid var(--line);
  font-size:13.5px;line-height:1.35;color:var(--dim2);transition:color .2s ease}
.hlp-toc a:hover{color:var(--ink)}
.hlp-toc em{font-family:var(--mono);font-style:normal;font-size:10.5px;color:var(--dim);padding-top:2px}
.hlp-toc a:hover em{color:var(--accent)}
.hlp-toc li.off a{opacity:.3}
.hlp-side{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent)}

/* разделы */
.hlp-body{min-width:0;max-width:1080px}
.hlp-sec{padding:22px 0 24px;border-top:1px solid var(--line);scroll-margin-top:86px}
.hlp-sec[hidden]{display:none}
.hlp-sec header,.hlp-ask header{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:baseline;gap:8px 12px;margin-bottom:12px}
.hlp-sec header em,.hlp-ask header em{font-family:var(--mono);font-style:normal;font-size:11px;color:var(--accent)}
.hlp-sec h3,.hlp-ask h3{font-family:var(--ui);font-weight:600;font-size:19px;line-height:1.25;color:var(--ink);letter-spacing:-.01em}
.hlp-go{display:inline-flex;align-items:baseline;gap:8px;font-size:12.5px;color:var(--dim2);white-space:nowrap;transition:color .2s ease}
.hlp-go b{font-weight:500}
.hlp-go i{font-style:normal;color:var(--accent)}
.hlp-go:hover{color:var(--ink)}
.hlp-sec ul{list-style:none;padding-inline-start:56px;display:grid;gap:8px}
.hlp-sec li{position:relative;font-size:15px;line-height:1.6;color:var(--dim2);max-width:72ch}
.hlp-sec li::before{content:"";position:absolute;inset-inline-start:-16px;top:.8em;width:7px;height:1px;background:var(--line2)}
.hlp-sec:target{border-top-color:var(--accent)}
.hlp-sec:target h3{color:var(--accent)}
.hlp-none{padding:20px 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:12px;color:var(--dim)}
.hlp-ask{padding:22px 0 8px;border-top:1px solid var(--line2)}
.hlp-ask p{padding-inline-start:56px;font-size:15px;line-height:1.6;color:var(--dim2);max-width:72ch}
.hlp-ask-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;padding-inline-start:56px}

/* список изменений */
.cl{list-style:none;max-width:1000px;border-top:1px solid var(--line)}
.cl-e{display:grid;grid-template-columns:170px minmax(0,1fr);gap:8px 28px;padding:22px 0 24px;border-bottom:1px solid var(--line);scroll-margin-top:86px}
.cl-d{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--accent);padding-top:5px;font-variant-numeric:tabular-nums}
.cl-b{min-width:0}
.cl-b h3{font-family:var(--ui);font-weight:600;font-size:20px;line-height:1.25;color:var(--ink);letter-spacing:-.01em}
.cl-b ul{list-style:none;margin-top:12px;display:grid;gap:7px;padding-inline-start:16px}
.cl-b li{position:relative;font-size:15px;line-height:1.55;color:var(--dim2);max-width:72ch}
.cl-b li::before{content:"";position:absolute;inset-inline-start:-16px;top:.78em;width:7px;height:1px;background:var(--line2)}
.cl-foot{margin-top:26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase}
.cl-foot a{color:var(--accent)}

[dir=rtl] .hlp-side,[dir=rtl] .cl-foot,[dir=rtl] .hlp .lbl{letter-spacing:0}
[dir=rtl] .hlp-go i,[dir=rtl] .hlp-side em{display:inline-block;transform:scaleX(-1)}

@media(max-width:900px){
  .hlp-grid{grid-template-columns:minmax(0,1fr)}
  .hlp-toc{position:static}
  .hlp-toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
}
@media(max-width:560px){
  .hlp-toc ol{column-gap:12px}
  .hlp-toc a{grid-template-columns:24px minmax(0,1fr);font-size:12.5px}
  .hlp-sec header,.hlp-ask header{grid-template-columns:30px minmax(0,1fr)}
  .hlp-go{grid-column:2;white-space:normal}
  .hlp-sec h3,.hlp-ask h3{font-size:17px}
  .hlp-sec ul,.hlp-ask p,.hlp-ask-row{padding-inline-start:16px}
  .hlp-sec li,.hlp-ask p{font-size:14.5px}
  .cl-e{grid-template-columns:minmax(0,1fr);gap:6px}
  .cl-b h3{font-size:18px}
}