/* Kraul docs — типографика руководств поверх QKC Core */
.docnav{
  position:fixed; top:0; left:0; right:0; z-index:50; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:0 var(--gap); background:color-mix(in srgb,var(--bg) 78%,transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none }
.mark{ display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:var(--text); color:var(--bg); font-weight:900; font-family:var(--font-d) }
.brand__name{ font-family:var(--font-d); font-weight:600; letter-spacing:-.01em }
.docnav__right{ display:flex; align-items:center; gap:8px }
.docwrap{
  position:relative; z-index:3; max-width:var(--maxw); margin:0 auto;
  padding:calc(var(--nav-h) + 34px) var(--gap) 60px;
  display:grid; grid-template-columns:minmax(0,1fr) 240px; gap:clamp(24px,4vw,56px); align-items:start;
}
.doc{ min-width:0; max-width:78ch }
.doc h1{ font-family:var(--font-d); font-size:clamp(2rem,4.6vw,3.2rem); letter-spacing:-.035em; line-height:1.02; margin:.2em 0 .5em; font-weight:700 }
.doc h2{ font-family:var(--font-d); font-size:1.45rem; letter-spacing:-.02em; margin:1.9em 0 .6em; padding-top:1.1em; border-top:1px solid var(--line); font-weight:700 }
.doc h3{ font-family:var(--font-d); font-size:1.1rem; margin:1.6em 0 .5em; font-weight:600 }
.doc p{ color:var(--text2); line-height:1.75; margin:0 0 1em }
.doc ul,.doc ol{ color:var(--text2); line-height:1.75; padding-left:1.3em; margin:0 0 1em }
.doc li{ margin:.35em 0 }
.doc li::marker{ color:var(--muted2) }
.doc a{ color:var(--text); text-underline-offset:4px; text-decoration-color:var(--muted2) }
.doc a:hover{ text-decoration-color:var(--text) }
.doc code{ font-family:var(--font-mono); font-size:.86em; background:var(--surface2); border:1px solid var(--line); border-radius:6px; padding:2px 6px }
.doc pre{ background:var(--bg2); border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; overflow:auto; margin:0 0 1.2em }
.doc pre code{ background:none; border:0; padding:0; font-size:.84rem; line-height:1.75 }
.doc blockquote{ margin:0 0 1.2em; padding:14px 18px; border-left:3px solid var(--text); background:var(--surface2); border-radius:0 10px 10px 0; color:var(--text2) }
.doc blockquote p{ margin:0 }
.doc table{ width:100%; border-collapse:collapse; margin:0 0 1.3em; font-size:.9rem }
.doc th,.doc td{ border:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top }
.doc th{ background:var(--surface2); font-weight:600; color:var(--text) }
.doc td{ color:var(--text2) }
.doc hr{ border:0; border-top:1px solid var(--line); margin:2em 0 }
.docside{
  position:sticky; top:calc(var(--nav-h) + 24px); display:grid; gap:4px; align-content:start;
  max-height:calc(100vh - var(--nav-h) - 48px); overflow:auto; padding-right:4px;
}
.docside__i{
  padding:8px 12px; border-radius:9px; color:var(--muted); text-decoration:none; font-size:.82rem;
  border:1px solid transparent; transition:color .2s,background .2s,border-color .2s;
}
.docside__i:hover{ color:var(--text); background:var(--surface2) }
.docside__i.is-cur{ color:var(--text); background:var(--surface2); border-color:var(--line) }
.docfoot{
  position:relative; z-index:3; border-top:1px solid var(--line); margin-top:20px;
  padding:22px var(--gap); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  color:var(--muted); font-size:.8rem; max-width:var(--maxw); margin-inline:auto;
}
@media (max-width:900px){
  .docwrap{ grid-template-columns:1fr }
  .docside{ position:static; max-height:none; grid-template-columns:1fr 1fr; order:2 }
}
@media (max-width:560px){ .docside{ grid-template-columns:1fr } }