/* 地点卡片里的委托就地展开步骤（10-18 · Claude Opus 5.5 · 子代理 qui-map）：只在世界地图页由 site/gen/pages_map.py 引用；脚本 assets/map_quests.js。
   「这一步在这里」用绿色（--mpq-here）：地图单选是白圈、搜索命中是金色、驿站路线是陶土红，三种都不用绿，一眼分得开。 */
.mp-app{--mpq-here:#2f8a57;--mpq-here-ink:#fff;--mpq-here-bg:color-mix(in srgb,#2f8a57 11%,var(--surface))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mp-app{--mpq-here:#4fb881;--mpq-here-ink:#0d1a12;--mpq-here-bg:color-mix(in srgb,#4fb881 15%,var(--surface))}}
:root[data-theme="dark"] .mp-app{--mpq-here:#4fb881;--mpq-here-ink:#0d1a12;--mpq-here-bg:color-mix(in srgb,#4fb881 15%,var(--surface))}

/* 委托行：右端一个小箭头表示能展开；本地点做哪几步的绿牌 */
.mp-qrow a.mpq-t{cursor:pointer}
.mp-qrow .mpq-chev,.mpq-more .mpq-chev{flex:none;width:7px;height:7px;margin:0 2px 3px 2px;border:solid var(--muted);border-width:0 2px 2px 0;rotate:45deg;transition:rotate .18s,margin .18s}
.mp-qrow li.mpq-open > a .mpq-chev{rotate:-135deg;margin:3px 2px 0 2px;border-color:var(--ink-2)}
/* 名字和「这里做第 N 步」叠两行：名字不被挤成两三个字 */
.mp-qrow .mpq-nm{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.mp-qrow .mpq-nm b{display:block;flex:none}
.mp-qrow .mpq-chip{display:inline-flex;align-items:center;gap:2px;margin-top:1px;color:var(--mpq-here);font-size:12.5px;font-weight:700;white-space:nowrap}
.mp-qrow .mpq-chip .mp-i-pin{color:inherit;font-size:12px}

/* 展开：和委托行连成一张卡（行下沿去圆角，展开区接着画边） */
.mp-qrow li.mpq-open > a{border-color:var(--gold);border-bottom-left-radius:0;border-bottom-right-radius:0;background:color-mix(in srgb,var(--gold) 12%,var(--surface))}
.mpq-box{margin-top:-1px;padding:6px 8px 9px;border:1px solid var(--gold);border-top:1px dashed color-mix(in srgb,var(--gold) 55%,var(--line));border-radius:0 0 6px 6px;background:var(--surface)}
.mpq-ol{list-style:none;margin:0;padding:0}
.mpq-s{position:relative;display:grid;grid-template-columns:22px minmax(0,1fr);gap:0 9px;padding:6px 7px 6px 5px;border-radius:6px}
/* 步骤之间的竖线（时间线）：从上一步的圆圈连到下一步 */
.mpq-s::before{content:"";position:absolute;left:15px;top:0;bottom:0;width:2px;background:var(--line)}
.mpq-s:first-child::before{top:17px}
.mpq-s:last-child::before{bottom:calc(100% - 17px)}
.mpq-s:only-child::before{display:none}
.mpq-n{position:relative;z-index:1;width:22px;height:22px;margin-top:1px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--line-strong);color:var(--ink-2);font:700 12px/1 var(--font);font-variant-numeric:tabular-nums}
.mpq-c{min-width:0}
.mpq-m{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:1px 0 1px;font-size:12px;line-height:1.5}
.mpq-role{color:var(--muted);font-weight:600;letter-spacing:.04em}
.mpq-rt{padding:0 6px;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink-2)}
.mpq-at{display:inline-flex;align-items:center;gap:2px;color:var(--mpq-here);font-weight:700}
.mpq-at .mp-i-pin{font-size:12px}
.mpq-z{margin:0;font-size:14px;line-height:1.65;color:var(--ink);overflow-wrap:anywhere}
.mpq-how{margin:3px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-2)}
/* 展开区在 .mp-qrow 里面：site.css 给 .mp-qrow a / b / .mp-i-pin 的整行样式不能带进步骤正文的链接 */
.mp-qrow .mpq-box a,.mp-qrow .mpq-box a:hover{display:inline;gap:0;padding:0;border:0;border-radius:0;background:none;font-size:inherit;min-width:0}
.mp-qrow .mpq-box a:hover{text-decoration:underline}
.mp-qrow .mpq-box b{flex:none;white-space:normal;overflow:visible}
.mp-qrow .mpq-box .mp-i-pin{color:inherit}
.mpq-box .db-pl,.mpq-box .lk{white-space:nowrap}
/* 这一步在当前地点：绿底＋左边绿条＋实心绿圈＋「在这里」 */
.mpq-s.is-here{background:var(--mpq-here-bg);box-shadow:inset 3px 0 0 var(--mpq-here)}
.mpq-s.is-here .mpq-n{background:var(--mpq-here);border-color:var(--mpq-here);color:var(--mpq-here-ink)}
.mpq-s.is-here::before{background:color-mix(in srgb,var(--mpq-here) 35%,var(--line))}
/* 选了主角线时，别的线才做的步骤变淡（不藏，照原文都列） */
.mpq-s.is-off{opacity:.5}
.mp-qrow .mpq-box a.mpq-go{display:inline-flex;align-items:center;margin:7px 0 0 36px;padding:3px 10px;border:1px solid color-mix(in srgb,var(--accent-2) 45%,var(--line));border-radius:999px;color:var(--accent-2);font-size:13px;font-weight:600;text-decoration:none}
.mp-qrow .mpq-box a.mpq-go:hover,.mp-qrow .mpq-box a.mpq-go:focus-visible{background:color-mix(in srgb,var(--accent-2) 10%,var(--surface));text-decoration:none}

/* 帝都那种一百多条：「再列出其余 N 条」＋按名字筛 */
.mpq-more{display:inline-flex;align-items:center;gap:6px;margin:2px 0 8px;padding:4px 12px;border:1px dashed var(--line-strong);border-radius:999px;background:transparent;color:var(--accent-2);font:inherit;font-size:13px;cursor:pointer}
.mpq-more:hover,.mpq-more:focus-visible{border-color:var(--accent-2);outline:none}
.mpq-more .mpq-chev{border-color:currentColor}
.mpq-find{display:block;width:100%;box-sizing:border-box;height:34px;margin:0 0 6px;padding:0 10px;border:1px solid var(--line-strong);border-radius:7px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px}
.mpq-find:focus{outline:2px solid color-mix(in srgb,var(--accent-2) 50%,transparent);outline-offset:0}

.mp-app .mp-card .mpq-z{font-size:14.5px}
@media (max-width:860px){
  .mpq-s{gap:0 8px;padding:6px 5px 6px 4px}
  .mpq-z{font-size:14px}
  .mp-qrow .mpq-box a.mpq-go{margin-left:34px}
}
@media (prefers-reduced-motion:reduce){.mp-qrow .mpq-chev{transition:none}}