/* Class transfer step by step: the row of steps, the panels of the quests, the rows of the hub tables. */
.cq-o{margin:-.3rem 0 1rem;color:var(--mu);font-size:.95rem}
.cq-o a.lq{font-weight:500}
.cq-way{margin:.2rem 0 1rem;font-size:.95rem}
.cq-way b{color:var(--hi);font-weight:600}
.cq-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:6px;list-style:none;margin:1.2rem 0 .5rem;padding:0}
.cq-nav a{display:flex;align-items:flex-start;gap:10px;height:100%;padding:10px 12px;border:1px solid transparent;border-radius:var(--r);background:var(--card);color:var(--tx2)}
.cq-nav a:hover{background:var(--card2);text-decoration:none}
.cq-nav img{flex:0 0 auto;margin-left:auto;border-radius:3px}
.cq-nav .on a{border-color:var(--ac);background:var(--card2)}
.cq-n{flex:0 0 28px;height:28px;display:grid;place-items:center;border-radius:2px;background:var(--red);color:#fff;font-weight:700;font-size:.9rem}
.cq-nav .ok .cq-n{background:var(--ok);font-size:0}
.cq-nav .ok .cq-n::after{content:"\2713";font-size:1rem}
.cq-s{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.cq-s b{color:var(--hi);font-weight:600}
.cq-s small{margin-top:3px}
.cq-pr{margin:.2rem 0 .8rem;color:var(--mu);font-size:.88rem}
.cq-exp{max-width:86ch;font-size:.92rem}
.cq-p{margin-top:1.4rem}
.cq-p>h2{margin-top:0}
.cq-p .callout{max-width:86ch}
.cq-f{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:1.2rem 0 .4rem;padding-top:12px;border-top:1px solid var(--line)}
.cq-f:empty{display:none}
.cq-done,.cq-reset{padding:9px 16px;border:0;border-radius:var(--r);background:var(--red);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.cq-done:hover,.cq-reset:hover{background:var(--red-h)}
.cq-reset{background:var(--card2);color:var(--tx2);font-weight:500}
.cq-reset:hover{background:var(--bar);color:var(--hi)}
/* rows of the hub: the phrase people search by, the quest names as its description */
.cq-t .qo{display:block;margin-top:2px;color:var(--mu);font-size:.84rem}
.cq-t small{color:var(--mu)}
@media (max-width:640px){
  .cq-nav{grid-template-columns:1fr 1fr}
  .cq-nav img{display:none}
}
/* a guide card with its banner (tools/build_guide_pics.py) on top */
.gcards a.gp{padding:0 0 13px;overflow:hidden}
.gcards a.gp img{display:block;width:100%;height:auto;aspect-ratio:600/270;margin-bottom:8px;background:var(--in)}
.gcards a.gp b,.gcards a.gp span{margin:0 15px}