/* TaskSkill · help.css — стилі для бази знань на сайті.
   Бренд-параметри взяті з landing.
*/
:root{
  --accent:#E8732C;
  --accent-2:#C96629;
  --accent-soft:#FFF1E7;
  --ink:#1c1a18;
  --ink-2:#3a342e;
  --muted:#7c756e;
  --line:#ece7e1;
  --line-2:#f4efe7;
  --bg:#faf8f5;
  --bg-soft:#f5f1ea;
  --card:#fff;
  --code-bg:#1e1a16;
  --code-ink:#f5efe2;
  --code-com:#7a6c5a;
  --ok:#1f9d57;
  --ok-soft:#e3f4ea;
  --warn:#b45309;
  --warn-soft:#fbeed1;
  --info:#1f5d8b;
  --info-soft:#e2eef7;
  --shadow-sm:0 1px 3px rgba(40,28,16,.06);
  --shadow:0 12px 40px rgba(40,28,16,.08);
  --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font:16px/1.65 'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
  color:var(--ink);background:var(--bg);
}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:2px}
img{max-width:100%}
.container{max-width:1180px;margin:0 auto;padding:0 24px}

/* ===== NAV ===== */
nav.top{
  position:sticky;top:0;z-index:50;
  background:rgba(250,248,245,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
nav.top .row{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0;gap:24px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--ink)}
.brand svg{display:block}
.brand b{color:var(--accent)}
.top-links{display:flex;gap:22px;font-size:14.5px;color:var(--ink-2)}
.top-links a{color:var(--ink-2);font-weight:500}
.top-links a:hover{color:var(--accent-2);text-decoration:none}
.top-links a.active{color:var(--accent-2)}
.top-cta{
  display:inline-flex;align-items:center;padding:9px 18px;
  background:var(--accent);color:#fff;border-radius:99px;
  font-weight:600;font-size:14px;border:0;cursor:pointer;
}
.top-cta:hover{background:var(--accent-2);text-decoration:none;color:#fff}

/* ===== Breadcrumbs ===== */
.crumbs{
  display:flex;gap:8px;align-items:center;
  font-size:13px;color:var(--muted);
  padding:22px 0 0;
}
.crumbs a{color:var(--muted);font-weight:500}
.crumbs a:hover{color:var(--accent-2);text-decoration:none}
.crumbs .sep{opacity:.5}
.crumbs .cur{color:var(--ink-2);font-weight:500}

/* ===== Hero (для /help/ index) ===== */
.hero{
  padding:48px 0 28px;border-bottom:1px solid var(--line-2);
  margin-bottom:36px;
}
.hero h1{
  font-size:38px;line-height:1.15;letter-spacing:-0.01em;
  margin-bottom:12px;font-weight:700;
}
.hero .lead{
  font-size:18px;color:var(--ink-2);max-width:640px;line-height:1.5;
}
.search{
  margin-top:24px;display:flex;gap:8px;max-width:560px;
}
.search input{
  flex:1;padding:13px 16px;border:1px solid var(--line);
  border-radius:99px;font-family:inherit;font-size:15px;background:#fff;
  outline:0;
}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ===== Category grid (на /help/ index) ===== */
.cats{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;margin-bottom:60px;
}
.cat{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;transition:transform .15s, box-shadow .15s, border-color .15s;
}
.cat:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent)}
.cat .ico{
  width:36px;height:36px;border-radius:8px;background:var(--accent-soft);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
  color:var(--accent-2);
}
.cat h3{font-size:17px;margin-bottom:6px;font-weight:600;color:var(--ink)}
.cat p{font-size:14px;color:var(--muted);line-height:1.5;margin-bottom:12px}
.cat ul{list-style:none;margin:0;padding:0}
.cat ul li{padding:5px 0;font-size:14px}
.cat ul li a{color:var(--ink-2);font-weight:500}
.cat ul li a:hover{color:var(--accent-2);text-decoration:none}
.cat ul li a::before{content:"→  ";color:var(--accent);font-weight:600}

/* ===== Article layout (sidebar + content) ===== */
.article-wrap{
  display:grid;grid-template-columns:240px 1fr;gap:48px;
  padding:24px 0 60px;
}
.sidebar{
  position:sticky;top:74px;align-self:start;
  font-size:14.5px;
}
.sidebar h4{
  font-size:11px;font-weight:700;color:var(--muted);
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;
  padding:0 12px;
}
.sidebar ul{list-style:none;padding:0;margin:0 0 22px}
.sidebar ul li a{
  display:block;padding:7px 12px;border-radius:8px;color:var(--ink-2);
  font-weight:500;line-height:1.35;
}
.sidebar ul li a:hover{background:var(--bg-soft);color:var(--ink);text-decoration:none}
.sidebar ul li a.active{
  background:var(--accent-soft);color:var(--accent-2);font-weight:600;
}

article{max-width:740px}
article h1{
  font-size:34px;line-height:1.2;letter-spacing:-0.01em;
  margin:8px 0 14px;font-weight:700;
}
article .meta{
  display:flex;gap:14px;align-items:center;
  font-size:13px;color:var(--muted);margin-bottom:30px;
}
article .meta .pill{
  display:inline-block;padding:3px 10px;border-radius:99px;
  background:var(--accent-soft);color:var(--accent-2);
  font-size:12px;font-weight:600;letter-spacing:.02em;
}
article h2{
  font-size:23px;font-weight:600;letter-spacing:-0.005em;
  margin:36px 0 12px;
}
article h3{
  font-size:18px;font-weight:600;
  margin:28px 0 10px;color:var(--ink-2);
}
article p{margin-bottom:14px;color:var(--ink-2)}
article ul, article ol{margin:8px 0 16px;padding-left:24px}
article li{margin-bottom:6px;color:var(--ink-2)}
article li::marker{color:var(--accent)}
article strong{color:var(--ink);font-weight:600}
article code{
  background:#f4ecdd;color:#5a3a1a;
  padding:1px 6px;border-radius:4px;
  font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
  font-size:.88em;font-weight:500;
}
article pre{
  background:var(--code-bg);color:var(--code-ink);
  border-radius:8px;padding:16px 18px;font-size:13px;line-height:1.6;
  overflow-x:auto;margin:16px 0 22px;
  font-family:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
}
article pre code{background:transparent;color:inherit;padding:0;border-radius:0;font-size:inherit;font-weight:400}
article blockquote{
  border-left:3px solid var(--accent);
  background:var(--bg-soft);
  padding:14px 18px;border-radius:0 6px 6px 0;
  margin:18px 0;color:var(--ink-2);
}
article blockquote p:last-child{margin-bottom:0}

.callout{
  border-left:3px solid var(--info);
  background:var(--info-soft);
  padding:14px 18px;border-radius:0 6px 6px 0;
  margin:18px 0;
}
.callout.ok{border-color:var(--ok);background:var(--ok-soft)}
.callout.warn{border-color:var(--warn);background:var(--warn-soft)}
.callout .ck{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--info);margin-bottom:4px;
}
.callout.ok .ck{color:var(--ok)}
.callout.warn .ck{color:var(--warn)}
.callout p{margin:0;color:var(--ink-2)}
.callout p + p{margin-top:6px}

table{
  width:100%;border-collapse:collapse;margin:14px 0 22px;font-size:14px;
}
th, td{
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);
  vertical-align:top;
}
thead th{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:var(--bg-soft);border-bottom:2px solid var(--line);
}

.next-prev{
  display:flex;justify-content:space-between;gap:14px;
  border-top:1px solid var(--line);padding-top:24px;margin-top:48px;
}
.next-prev a{
  flex:1;padding:14px 16px;border:1px solid var(--line);border-radius:10px;
  display:block;
  background:#fff;
}
.next-prev a:hover{border-color:var(--accent);text-decoration:none}
.next-prev .lbl{font-size:11px;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.next-prev .ttl{display:block;font-weight:600;color:var(--ink);margin-top:4px;font-size:15px}
.next-prev .right{text-align:right}

/* ===== Footer ===== */
footer.foot{
  border-top:1px solid var(--line);background:var(--bg-soft);
  padding:40px 0 30px;margin-top:60px;
  font-size:14px;color:var(--muted);
}
footer.foot .row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer.foot a{color:var(--muted)}
footer.foot a:hover{color:var(--accent-2)}

/* ===== Mobile ===== */
@media (max-width: 880px){
  .article-wrap{grid-template-columns:1fr;gap:0}
  .sidebar{
    position:static;
    border-bottom:1px solid var(--line);padding-bottom:20px;margin-bottom:24px;
  }
  .sidebar h4{padding:0}
  .sidebar ul li a{padding:6px 0}
  .sidebar ul li a:hover{background:transparent}
  .sidebar ul li a.active{background:transparent;text-decoration:underline}
  .top-links{display:none}
  .hero{padding:32px 0 20px}
  .hero h1{font-size:28px}
  .hero .lead{font-size:16px}
  article h1{font-size:26px}
  article h2{font-size:20px}
  .next-prev{flex-direction:column}
  .next-prev .right{text-align:left}
}