/* ============================================================
   STAKEBOX — контентные страницы (документы, поддержка, 404)
   Дополняет style.css: там токены, шапка, подвал и кнопки.
   ============================================================ */
.pg{padding-block:34px 64px}
.pg__head{max-width:760px}
.pg__kick{
  display:inline-block;margin-bottom:16px;padding:7px 15px;border-radius:999px;
  border:1px solid rgba(167,139,250,.4);background:rgba(124,58,237,.12);
  font:500 10.5px/1 var(--f-m);letter-spacing:.17em;text-transform:uppercase;color:#D8CCFF;
}
.pg__h1{font-size:clamp(27px,3.2vw,42px);letter-spacing:-.025em}
.pg__lead{margin-top:14px;color:var(--tx-2);font-size:15px;line-height:1.66}
.pg__upd{margin-top:16px;font:500 10.5px/1 var(--f-m);letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3)}

.pg__grid{display:grid;grid-template-columns:232px minmax(0,1fr);gap:44px;margin-top:40px;align-items:start}

/* ---------- оглавление ---------- */
.toc{position:sticky;top:96px;display:grid;gap:3px}
.toc__t{margin-bottom:9px;font:500 10px/1 var(--f-m);letter-spacing:.18em;text-transform:uppercase;color:var(--tx-3)}
.toc a{
  display:block;padding:9px 12px;border-radius:10px;border-left:2px solid transparent;
  color:var(--tx-2);font-size:13px;line-height:1.35;transition:color .25s,background .25s,border-color .25s;
}
.toc a:hover{color:var(--tx);background:rgba(150,165,205,.05)}
.toc a.is-on{color:#fff;border-left-color:var(--pur-lt);background:rgba(139,92,246,.12)}

/* ---------- статья ---------- */
/* minmax(0,…) и min-width:0 — иначе широкая таблица внутри одной секции
   задаёт минимум всей колонке и разделы вылезают за экран. */
.art{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;max-width:760px}
.art section{min-width:0}
.art section{scroll-margin-top:96px;padding:26px;border-radius:var(--r-l);border:1px solid var(--line);background:linear-gradient(170deg,#13181F,#0E131A)}
.art h2{font-size:clamp(20px,2.1vw,26px);letter-spacing:-.02em}
.art h3{margin-top:22px;font-size:15.5px;font-weight:700}
.art p{margin-top:12px;color:var(--tx-2);font-size:14px;line-height:1.72}
.art p b,.art li b{color:#fff;font-weight:700}
.art ul{margin-top:12px;display:grid;gap:9px}
.art ul li{position:relative;padding-left:20px;color:var(--tx-2);font-size:14px;line-height:1.6}
.art ul li::before{content:"";position:absolute;left:4px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--pur)}
.art ol{margin-top:12px;display:grid;gap:9px;counter-reset:n}
.art ol li{position:relative;padding-left:32px;color:var(--tx-2);font-size:14px;line-height:1.6;counter-increment:n}
.art ol li::before{
  content:counter(n,decimal-leading-zero);position:absolute;left:0;top:1px;
  font:700 11px/1.5 var(--f-m);color:var(--pur-lt);
}
.art__num{font:700 11px/1 var(--f-m);letter-spacing:.14em;color:var(--pur-lt);display:block;margin-bottom:10px}

.tbl{width:100%;border-collapse:collapse;margin-top:16px;font-size:13.5px}
.tbl th{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);color:var(--tx-3);font:600 10px/1.4 var(--f-m);letter-spacing:.12em;text-transform:uppercase}
.tbl td{padding:12px;border-bottom:1px solid var(--line);color:var(--tx-2);vertical-align:top}
.tbl td:first-child{color:#fff;font-weight:700;white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}

.callout{
  display:flex;gap:13px;margin-top:18px;padding:15px 18px;border-radius:14px;
  border:1px solid var(--line-2);background:rgba(139,92,246,.07);color:var(--tx-2);font-size:13px;line-height:1.6;
}
.callout .i{flex:none;margin-top:2px;color:var(--pur-lt);width:18px;height:18px}
.callout b{color:#fff}
.callout--warn{border-color:rgba(255,110,110,.3);background:rgba(255,80,80,.06);color:#EDB9B9}
.callout--warn .i{color:#FF8E8E}
.callout--todo{border-color:rgba(255,197,61,.32);background:rgba(255,197,61,.07);color:#E8CE9A}
.callout--todo .i{color:var(--gold)}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:9px;max-width:760px}
.faq details{border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(170deg,#13181F,#0E131A);overflow:hidden}
.faq summary{
  display:flex;align-items:center;gap:14px;padding:16px 20px;cursor:pointer;list-style:none;
  font-size:14.5px;font-weight:700;color:var(--tx);transition:background .25s;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:rgba(150,165,205,.04)}
.faq summary::after{
  content:"";flex:none;margin-left:auto;width:9px;height:9px;
  border-right:2px solid var(--tx-3);border-bottom:2px solid var(--tx-3);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
.faq details[open] summary{color:#fff}
.faq__a{padding:0 20px 18px;color:var(--tx-2);font-size:13.5px;line-height:1.7}
.faq__a p+p{margin-top:10px}

/* ---------- форма обращения ---------- */
.sup{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:32px;margin-top:40px;align-items:start}
.sup__form{display:grid;gap:14px;padding:26px;border-radius:var(--r-l);border:1px solid var(--line);background:linear-gradient(170deg,#13181F,#0E131A)}
.sup__form h2{font-size:19px}
.fld{display:grid;gap:6px}
.fld>span{font:600 11px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase;color:var(--tx-3)}
.fld input,.fld select,.fld textarea{
  width:100%;padding:12px 14px;border-radius:11px;border:1px solid var(--line);
  background:#0B1017;color:var(--tx);font:500 14px/1.5 var(--f);transition:border-color .25s,background .25s;
}
.fld textarea{min-height:120px;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:#59627C}
.fld :focus{outline:none;border-color:var(--line-2);background:#0E141D}
.sup__ok{padding:13px 16px;border-radius:12px;border:1px solid rgba(61,255,160,.3);background:rgba(61,255,160,.07);color:#9BE9C0;font-size:13px}
.sup__side{display:grid;gap:12px}
.sup__card{padding:20px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(170deg,#13181F,#0E131A)}
.sup__card h3{font-size:14.5px;margin-bottom:8px}
.sup__card p{color:var(--tx-2);font-size:13px;line-height:1.6}
.sup__card a{color:var(--pur-lt);border-bottom:1px solid rgba(186,127,243,.4)}

/* ---------- 404 ---------- */
.nf{display:grid;place-items:center;min-height:calc(100dvh - 78px);text-align:center;padding:40px 24px}
.nf__code{
  /* раздельно, а не шорткатом font: — clamp() в шорткате разбирается не везде */
  font-family:var(--f);font-weight:800;line-height:1;
  font-size:clamp(72px,14vw,150px);letter-spacing:-.05em;
  background:linear-gradient(140deg,#C9B3FF,#A855F7 45%,#4C1D95);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.nf h1{margin-top:8px;font-size:clamp(21px,2.6vw,29px)}
.nf p:not(.nf__code){margin-top:12px;max-width:430px;color:var(--tx-2);font-size:14.5px;line-height:1.66}
.nf__btns{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;justify-content:center}
.nf__art{width:min(230px,52vw);margin-bottom:6px;opacity:.9}

/* ---------- адаптив ---------- */
@media (max-width:980px){
  /* minmax(0,…): автоминимум трека считался по горизонтальной ленте
     оглавления и растягивал страницу шире экрана */
  .pg__grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .toc{position:static;display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}
  .toc::-webkit-scrollbar{display:none}
  .toc__t{display:none}
  .toc a{flex:none;white-space:nowrap;border-left:0;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:12.5px}
  .toc a.is-on{border-color:var(--line-2);background:rgba(139,92,246,.16)}
  .sup{grid-template-columns:1fr;gap:16px}
}
@media (max-width:680px){
  .pg{padding-block:24px 48px}
  .art section{padding:20px 18px}
  .sup__form{padding:20px 18px}
  .tbl{font-size:12.5px}
  .tbl td,.tbl th{padding:9px 8px}
  .tbl td:first-child{white-space:normal}
}

@media (max-width:400px){
  .art section{padding:17px 14px}
  .sup__form{padding:17px 14px}
  .faq summary{padding:14px 15px;font-size:13.5px}
  .faq__a{padding:0 15px 15px}
  .nf__btns .btn{flex:1 1 100%}
}

/* ---------- таблица в документе ---------- */
.doc-tbl{width:100%;border-collapse:collapse;margin:16px 0;font-size:13.5px}
.doc-tbl th{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);
  color:var(--tx-3);font:600 10px/1 var(--f-m);letter-spacing:.12em;text-transform:uppercase}
.doc-tbl td{padding:11px 12px;border-bottom:1px solid var(--line);color:var(--tx-2)}
.doc-tbl tr:last-child td{border-bottom:0}
.doc-tbl td:first-child{color:var(--tx);font-weight:700}
.doc-tbl td+td{font:600 12.5px/1 var(--f-m);white-space:nowrap}
@media (max-width:560px){
  .doc-tbl{font-size:12.5px}
  .doc-tbl th,.doc-tbl td{padding:8px 7px}
  .doc-tbl td+td{font-size:11px}
}
/* на узком экране числам разрешено переноситься: нерушимые ячейки
   растягивали всю страницу */
@media (max-width:430px){
  .doc-tbl td+td{white-space:normal}
  .doc-tbl th,.doc-tbl td{padding:7px 5px}
  .doc-tbl{font-size:12px}
  .doc-tbl th{font-size:9px;letter-spacing:.08em}
}

@media (max-width:360px){
  .pg{padding-block:20px 44px}
  .art section{padding:16px 13px}
  .toc a{padding:7px 12px;font-size:12px}
}

/* переключатель языка на странице 404 — под кнопками */
.nf .lang{margin-top:26px;justify-self:center}

/* Подпись под формой поддержки: класс общий с кабинетом, но app.css здесь не подключён */
.note-sm{color:var(--tx-3);font-size:11.5px;line-height:1.55}
.form__err{padding:9px 12px;border-radius:9px;border:1px solid rgba(255,110,110,.3);background:rgba(255,80,80,.07);color:#FF8A8A;font-size:12.5px}
.form__err[hidden]{display:none}
/* «Политика конфиденциальности» не влезала в 320px одним словом */
.pg__h1{hyphens:auto;overflow-wrap:break-word}
@media (max-width:360px){ .pg__h1{font-size:24px} }