/* How-to guide (howto.html) on top of admin.css tokens */
body.howto{overflow:auto}
.howto .app{height:auto;min-height:100vh;display:flex;flex-direction:column}
body.howto,html:has(body.howto){height:auto}
.howto .topbar{position:sticky;top:0;min-height:56px}
.howto .adm-only{display:none}
.howto.is-admin .adm-only{display:inline-flex}
.ht-body{display:grid;grid-template-columns:300px minmax(0,1fr);gap:28px;max-width:1240px;width:100%;margin:0 auto;padding:24px 20px 80px;box-sizing:border-box}
.ht-nav{position:sticky;top:76px;align-self:start;max-height:calc(100vh - 96px);overflow:auto;padding-right:6px}
.ht-search input{width:100%;box-sizing:border-box;font:inherit;font-size:14px;padding:9px 12px;border:1px solid var(--cp-border);border-radius:999px;background:var(--cp-surface);color:var(--cp-text)}
.ht-search input:focus-visible{outline:2px solid var(--cp-accent);outline-offset:1px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ht-count{margin:8px 4px 10px;font-size:12px;color:var(--cp-text-soft)}
.ht-tocsel{display:none}
.ht-toc,.ht-toc ul{list-style:none;margin:0;padding:0}
.ht-toc>li{margin:0 0 12px}
.ht-toc>li>a{font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--cp-text-soft);text-decoration:none}
.ht-toc ul li a{display:block;padding:4px 10px;margin:1px 0;border-radius:8px;font-size:13.5px;color:var(--cp-text);text-decoration:none;line-height:1.35}
.ht-toc ul li a:hover{background:var(--cp-surface-soft,rgba(0,0,0,.05));color:var(--cp-accent)}
.ht-main{min-width:0;outline:none}
.ht-g{margin:0 0 30px}
.ht-g>h2{font-size:22px;margin:4px 0 14px;display:flex;align-items:center;gap:10px}
.ht-r{border:1px solid var(--cp-border);border-radius:14px;background:var(--cp-surface);padding:16px 20px 14px;margin:0 0 12px;scroll-margin-top:76px;outline:none;transition:box-shadow .3s,border-color .3s}
.ht-r.hl{border-color:var(--cp-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--cp-accent) 25%,transparent)}
.ht-r h3{margin:0 0 4px;font-size:17px;position:relative}
.ht-anchor{position:absolute;left:-16px;opacity:0;color:var(--cp-text-soft);text-decoration:none;font-weight:400}
.ht-r:hover .ht-anchor,.ht-anchor:focus{opacity:1}
.ht-why{margin:0 0 10px;color:var(--cp-text-soft);font-size:14px}
.ht-steps{margin:0 0 6px;padding-left:22px;font-size:14.5px;line-height:1.55}
.ht-steps li{margin:3px 0}
.ht-tips{margin:8px 0 4px;padding:8px 12px 8px 28px;border-radius:10px;background:color-mix(in srgb,var(--cp-accent) 8%,var(--cp-surface));font-size:13.5px;line-height:1.5}
.ht-tips li::marker{content:"💡 "}
.ht-r code{font-family:var(--mono);font-size:12.5px;padding:1px 5px;border-radius:5px;background:var(--cp-surface-soft,rgba(0,0,0,.06));overflow-wrap:anywhere}
.ht-r a{color:var(--cp-link,var(--cp-accent))}
.ht-open{margin:10px 0 0}
.ht-open .btn{text-decoration:none}
.ht-none{grid-column:2;margin:0;color:var(--cp-text-soft)}
@media (max-width:900px){
  .ht-body{grid-template-columns:minmax(0,1fr);gap:12px;padding:14px 12px 60px}
  .ht-nav{position:static;max-height:none;overflow:visible;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
  .ht-toc{display:none}
  .ht-tocsel{display:block;width:100%;font:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--cp-border);border-radius:10px;background:var(--cp-surface);color:var(--cp-text)}
  .ht-count{margin:0 4px}
  .ht-none{grid-column:1}
  .ht-r{padding:14px 14px 12px}
  .ht-anchor{display:none}
}
@media (max-width:640px){.howto .brand .bt{display:none}.howto .pill.ver{display:none}}
.ht-none .lnk{background:none;border:0;padding:0;font:inherit;color:var(--cp-link,var(--cp-accent));text-decoration:underline;cursor:pointer}