/* 委托页步骤（10-18 · Claude Opus 5.5 · 子代理 qui-page；site/gen/quest_steps.py 出结构，只在 /quests/ 引用，不动 site.css）
   每步：圆圈序号＋细竖线串起来；role 小标签；how（从哪来）一行小字，点了到地图。 */
.qs-blk-stx{grid-column:1/-1}
.qst{list-style:none;margin:2px 0 0;padding:0;counter-reset:qst}
.qst-s{position:relative;counter-increment:qst;padding:2px 0 8px 30px;line-height:1.7;color:var(--ink)}
.qst-s:last-child{padding-bottom:2px}
.qst-s::before{content:counter(qst);position:absolute;left:0;top:4px;box-sizing:border-box;width:20px;height:20px;border-radius:50%;
  border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink-2);font:700 11.5px/17px var(--font);text-align:center;font-variant-numeric:tabular-nums}
.qst-s:not(:last-child)::after{content:"";position:absolute;left:9.5px;top:26px;bottom:2px;width:1.5px;border-radius:1px;background:var(--line)}
.qst-t>span{vertical-align:middle}
.qst-role{display:inline-block;margin:0 7px 0 0;padding:0 6px;border-radius:4px;font:700 11.5px/19px var(--font);letter-spacing:.04em;vertical-align:1px;
  background:color-mix(in srgb,var(--ink-2) 10%,var(--surface));color:var(--ink-2)}
.qst-r-go{background:color-mix(in srgb,var(--accent-2) 13%,var(--surface));color:var(--accent-2)}
.qst-r-get,.qst-r-deliver{background:color-mix(in srgb,var(--lk-item) 15%,var(--surface));color:var(--lk-item)}
.qst-r-fight{background:color-mix(in srgb,var(--bad) 13%,var(--surface));color:var(--bad)}
.qst-r-talk{background:color-mix(in srgb,var(--lk-char) 12%,var(--surface));color:var(--lk-char)}
/* 结构化的步骤：取得/交付/战斗那一步的圆圈用强调色，一眼看出「真正要干的事」 */
.qst-x .qst-s:has(.qst-r-get)::before,.qst-x .qst-s:has(.qst-r-deliver)::before{border-color:var(--lk-item);color:var(--lk-item)}
.qst-x .qst-s:has(.qst-r-fight)::before{border-color:var(--bad);color:var(--bad)}
.qst a.lk-place{font-weight:600;white-space:nowrap}
.qst a.lk-item{white-space:nowrap}
.qst a.lk-item[data-tt]{text-decoration:underline dotted color-mix(in srgb,currentColor 55%,transparent);text-underline-offset:3px}
.qst img.itd-inline-icon{vertical-align:-4px;margin:0 2px 0 3px}
/* how：从哪来 */
.qst-how{display:flex;flex-wrap:wrap;align-items:center;gap:3px 14px;margin:1px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}
.qst-how::before{content:"哪里拿";flex:none;padding:0 5px;border:1px solid var(--line);border-radius:3px;font-size:11px;line-height:16px;color:var(--muted)}
.qst-h{display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 2px}
.qst-hw{display:inline-flex;align-items:center;gap:4px;color:var(--ink-2);text-decoration:none}
.qst-hw b{font-weight:600;color:var(--accent-2)}
.qst-hw:hover b{text-decoration:underline;text-underline-offset:2px}
.qst-hw span{color:var(--ink-2)}
.qst-hi{width:16px;height:16px;flex:none;object-fit:contain}
.qst-h a:not(.qst-hw){color:var(--accent-2)}
@media (max-width:640px){
  .qst-s{padding-left:27px}
  .qst-how{gap:2px 10px}
}
/* 只在某几条线才这样做的步骤：主角小头像 */
.qst-rts{display:inline-flex;margin:0 6px 0 0;vertical-align:-4px}
.qst-rts img{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--surface);background:var(--surface-2);object-fit:cover}
.qst-rts img+img{margin-left:-5px}
.qst-h .qst-rts{margin-right:4px;vertical-align:0}
.qst-h .qst-rts img{width:16px;height:16px}
/* 步骤里的人物头像别太大（site.css 正文里是 28–32px） */
.qst .lk-char .lk-av{width:20px !important;height:20px !important;vertical-align:-5px;margin-right:2px}
/* 悬停提示框里「哪里买／哪里拿」分行（提示框挂在 body 上，这条只在委托页生效） */
.tip .tip-b{white-space:pre-line}
/* /quests/#q-046 这种深链：展开后滚到这一行时别被吸顶的站头挡住标题 */
.qs-row{scroll-margin-top:112px}
@media (max-width:640px){.qs-row{scroll-margin-top:124px}}
/* 「哪里拿」那行小字里的人名（charchain 自动加的头像小块）只留名字 */
.qst-how a.cch img,.qst-how .lk-char .lk-av{display:none !important}
.qst-how a.cch{padding:0;background:none;color:var(--ink-2);margin:0}
.qst .cch{padding:0 7px 0 1px;margin:0 1px}
.qst .cch img{width:20px;height:20px}