/* Help library. */

.help-wrap{max-width:1000px;margin:0 auto;width:100%}

/* ── search ─────────────────────────────────────────────────────────── */
.hs-box{position:relative;margin:0 0 var(--s-4)}
.hs-box input{
  padding:14px 96px 14px 16px;font-size:15px;
  background:var(--panel-2);box-shadow:var(--inset);
}
.hs-count{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-size:12px;color:var(--faint);pointer-events:none;
}

/* ── categories ─────────────────────────────────────────────────────── */
.hcats{display:flex;gap:var(--s-2);flex-wrap:wrap;margin-bottom:var(--s-5)}
.hcat{
  background:var(--panel-2);border:1px solid var(--line);color:var(--text-2);
  border-radius:20px;padding:7px 15px;font-size:12.5px;font-weight:560;
  cursor:pointer;font-family:inherit;transition:all .14s;
}
.hcat:hover{border-color:var(--panel-3);color:var(--text)}
.hcat.on{
  background:linear-gradient(180deg,var(--rose-2),var(--rose));
  border-color:var(--rose);color:#180509;font-weight:700;
}

/* ── the list ───────────────────────────────────────────────────────── */
.hlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--s-3)}
.hcard{
  display:flex;flex-direction:column;gap:5px;
  padding:var(--s-5);text-decoration:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.008) 70px),
    var(--panel);
  border:1px solid var(--line);border-top-color:#3a4356;
  border-radius:var(--radius);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), var(--shadow);
  transition:border-color .16s, box-shadow .16s, transform .16s;
}
.hcard:hover{
  border-color:#4a566f;transform:translateY(-2px);text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), var(--shadow-lg);
}
.hcard-cat{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
           color:var(--rose-2);font-weight:700}
.hcard-t{font-size:15.5px;font-weight:660;color:var(--text);line-height:1.35}
.hcard-d{font-size:12.5px;color:var(--muted);line-height:1.55}

/* ── an article ─────────────────────────────────────────────────────── */
.back{margin-bottom:var(--s-4)}
.acat{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
      color:var(--rose-2);font-weight:700;margin-bottom:6px}
#article h1{margin-bottom:var(--s-5)}

.doc{max-width:74ch}
.doc p{font-size:15px;line-height:1.75;color:var(--text-2);margin:0 0 var(--s-4)}
.doc h3{
  font-size:16px;font-weight:660;color:var(--text);text-transform:none;
  letter-spacing:-.005em;margin:var(--s-6) 0 var(--s-3);
}
.doc ul,.doc ol{margin:0 0 var(--s-4);padding-left:22px;
                color:var(--text-2);font-size:15px;line-height:1.85}
.doc li{margin-bottom:6px}
.doc b{color:var(--text);font-weight:640}
.doc code{
  font-family:var(--mono);font-size:13px;
  background:var(--ink);border:1px solid var(--line);
  padding:2px 7px;border-radius:5px;color:var(--rose-2);
}
.doc a{color:var(--rose-2)}

/* Diagrams: full width of the text column, on their own surface. */
.doc-svg{
  display:block;width:100%;height:auto;
  margin:var(--s-5) 0;
  background:var(--ink);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s-4);
  box-shadow:var(--inset);
}

.doc-note{
  margin:var(--s-5) 0;padding:var(--s-4) var(--s-5);
  background:rgba(77,163,255,.07);
  border:1px solid rgba(77,163,255,.25);
  border-left:3px solid #4da3ff;
  border-radius:var(--radius-sm);
  font-size:14px;line-height:1.7;color:var(--text-2);
}
.doc-note b{color:#8cc4ff}

.afoot{
  display:flex;align-items:center;gap:var(--s-4);flex-wrap:wrap;
  margin-top:var(--s-7);padding-top:var(--s-5);border-top:1px solid var(--line);
}
.afoot .hint{margin:0}
.afoot .ghost{margin-top:0}