/* route.css —— 路线组件样式（树、比较、Pareto、证据抽屉、记分卡）
 * 铁律：本文件没有裸色值，颜色只走 var(--vx-*)（色值入口是 vendor/vx/vx.css，暗色由 <html data-theme="dark"> 切换）。
 * 状态不只靠颜色：叶子命中＝实线＋✓，未命中＝实线＋✕，未知＝虚线＋?。
 * 先藏后显的起始态只在组件自己加的 .rt-pre/.rc-pre/.rp-pre/.sc-pre 下生效；renderStatic() 或 html.vx-static 直接停在终态。
 */
:root{
  --rt-hit:var(--vx-ok); --rt-miss:var(--vx-warn); --rt-unk:var(--vx-muted);
  --rt-step:.32s;
}
.rt-wrap,.rc-wrap,.rp-wrap,.sc,.ed{font-family:var(--vx-font);color:var(--vx-ink);font-size:15px;line-height:1.5}
.rt-wrap button,.rc-wrap button,.rp-wrap select,.ed button{font:inherit}

/* ───────── 路线树 ───────── */
.rt-wrap{background:var(--vx-panel);border:1px solid var(--vx-line);border-radius:8px;overflow:hidden}
.rt-bar-ui{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:10px 14px;border-bottom:1px solid var(--vx-line);background:var(--vx-paper)}
.rt-seg{display:inline-flex;border:1px solid var(--vx-line);border-radius:8px;overflow:hidden}
.rt-seg button{border:0;background:var(--vx-paper);color:var(--vx-ink);font-size:14px;padding:6px 12px;cursor:pointer}
.rt-seg button+button{border-left:1px solid var(--vx-line)}
.rt-seg button[aria-pressed="true"]{background:var(--vx-brand);color:var(--vx-paper)}
.rt-replay{border:1px solid var(--vx-line);border-radius:8px;background:var(--vx-paper);color:var(--vx-ink);font-size:14px;padding:6px 12px;cursor:pointer}
.rt-replay:hover,.rt-seg button:hover:not([aria-pressed="true"]){background:var(--vx-brand-soft)}
.rt-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:14px;color:var(--vx-muted)}
.rt-lg{display:inline-flex;align-items:center;white-space:nowrap}
.rt-sw{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;font-style:normal;font-size:12px;font-weight:600;margin-right:6px;background:var(--vx-paper)}
.rt-sw-hit{border:2px solid var(--rt-hit);color:var(--rt-hit)}
.rt-sw-miss{border:2px solid var(--rt-miss);color:var(--rt-miss)}
.rt-sw-unk{border:2px dashed var(--rt-unk);color:var(--rt-unk)}
.rt-sw-tier{display:inline-flex;gap:2px;margin-right:6px}
.rt-sw-tier b{width:9px;height:7px;border-radius:2px;background:var(--vx-brand)}
.rt-sw-tier b:last-child{background:var(--vx-line)}
.rt-sw-flag{display:inline-grid;place-items:center;min-width:24px;height:20px;padding:0 5px;border-radius:10px;margin-right:6px;background:var(--vx-warn);color:var(--vx-paper);font-style:normal;font-size:12px;font-weight:600}
.rt-stage{overflow:auto;padding:10px}
.rt-svg{display:block;margin:0 auto;max-width:none;overflow:visible}
.rt-svg text{font-family:var(--vx-font)}

.rt-node{cursor:pointer;outline:none;transition:opacity .25s ease}
.rt-card{fill:var(--vx-paper);stroke:var(--vx-line);stroke-width:2;transition:stroke .5s ease calc(var(--rt-d,0)*var(--rt-step) + .45s)}
.rt-role-target .rt-card{stroke:var(--vx-brand);stroke-width:2.5}
.rt-role{font-size:13px;font-weight:600;fill:var(--vx-brand)}
.rt-fb{font-size:12px;fill:var(--vx-muted)}
.rt-pill{fill:transparent;stroke:transparent;stroke-width:1.5;transition:fill .5s ease calc(var(--rt-d,0)*var(--rt-step) + .45s),stroke .5s ease calc(var(--rt-d,0)*var(--rt-step) + .45s)}
.rt-pilltx{font-size:14px;font-weight:600;fill:var(--vx-muted);transition:fill .5s ease calc(var(--rt-d,0)*var(--rt-step) + .45s)}
.rt-av-hit .rt-card{stroke:var(--rt-hit)}
.rt-av-hit .rt-pill{fill:color-mix(in srgb,var(--rt-hit) 14%,var(--vx-paper));stroke:var(--rt-hit)}
.rt-av-hit .rt-pilltx{fill:var(--rt-hit)}
.rt-av-miss .rt-card{stroke:var(--rt-miss)}
.rt-av-miss .rt-pill{fill:color-mix(in srgb,var(--rt-miss) 12%,var(--vx-paper));stroke:var(--rt-miss)}
.rt-av-miss .rt-pilltx{fill:var(--rt-miss)}
.rt-av-unk .rt-card{stroke:var(--rt-unk);stroke-dasharray:7 5}
.rt-av-unk .rt-pill{stroke:var(--rt-unk);stroke-dasharray:4 3}
.rt-av-unk .rt-pilltx{fill:var(--rt-unk)}
/* 入场前：叶子还没"点亮"，描边与徽标先回到中性色 */
.rt-pre .rt-av-hit .rt-card,.rt-pre .rt-av-miss .rt-card,.rt-pre .rt-av-unk .rt-card{stroke:var(--vx-line)}
.rt-pre .rt-pill{fill:transparent;stroke:transparent}
.rt-pre .rt-pilltx{fill:var(--vx-muted)}

.rt-rcard{fill:var(--vx-brand-soft);stroke:var(--vx-brand);stroke-width:1.5}
.rt-kind-unknown .rt-rcard{stroke-dasharray:6 4}
.rt-kind-enzymatic .rt-rcard{fill:color-mix(in srgb,var(--vx-ok) 12%,var(--vx-paper));stroke:var(--vx-ok)}
.rt-tier-none .rt-rcard{fill:color-mix(in srgb,var(--vx-warn) 8%,var(--vx-paper));stroke:var(--vx-warn)}
.rt-rt{font-size:13px;font-weight:600;fill:var(--vx-ink)}
.rt-n{font-size:12px;fill:var(--vx-muted)}
.rt-bar{fill:var(--vx-line)}
.rt-bar.rt-fill{fill:var(--vx-brand)}
.rt-dot{fill:var(--vx-warn)}
.rt-sev-info .rt-dot{fill:var(--vx-muted)}
.rt-ftx{font-size:11px;font-weight:600;fill:var(--vx-paper)}
.rt-ring{fill:none;stroke:var(--vx-warn);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.rt-sev-info .rt-ring{stroke:var(--vx-muted)}
.rt-in:not(.rt-static) .rt-ring{animation:rt-pulse 1s ease-out 3 forwards;animation-delay:calc(var(--rt-d,0)*var(--rt-step) + .75s)}
@keyframes rt-pulse{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}

.rt-pop{transform-box:fill-box;transform-origin:center;
  transition:opacity .45s ease calc(var(--rt-d,0)*var(--rt-step)),transform .45s cubic-bezier(.2,.7,.2,1) calc(var(--rt-d,0)*var(--rt-step))}
.rt-pre .rt-pop{opacity:0;transform:scale(.88)}
.rt-edge{fill:none;stroke:var(--vx-muted);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0;
  transition:stroke-dashoffset .4s ease calc((var(--rt-d,1) - 1)*var(--rt-step) + .12s),opacity .05s linear calc((var(--rt-d,1) - 1)*var(--rt-step) + .12s),stroke .25s ease}
.rt-pre .rt-edge{stroke-dashoffset:1;opacity:0}
.rt-tip{fill:var(--vx-muted);fill:context-stroke}

/* 选中与高亮路径 */
.rt-node:hover .rt-card,.rt-node:hover .rt-rcard{stroke-width:3}
.rt-node:focus-visible .rt-card,.rt-node:focus-visible .rt-rcard,.rt-sel .rt-card,.rt-sel .rt-rcard{stroke:var(--vx-accent);stroke-width:3.5}
.rt-wrap[data-hl] .rt-node:not(.rt-on){opacity:.3}
.rt-wrap[data-hl] .rt-edge:not(.rt-on){opacity:.3}
.rt-edge.rt-on{stroke:var(--vx-brand);stroke-width:3}

/* 终态：截图、导出、html.vx-static */
.rt-static .rt-pop,.rt-static .rt-edge,.rt-static .rt-card,.rt-static .rt-pill,.rt-static .rt-pilltx,
html.vx-static .rt-pop,html.vx-static .rt-edge,html.vx-static .rt-card,html.vx-static .rt-pill,html.vx-static .rt-pilltx{transition:none!important}
.rt-static .rt-ring,html.vx-static .rt-ring{animation:none!important;opacity:0}

/* ───────── 证据抽屉 ───────── */
.ed-host{position:relative;overflow:hidden}
.ed{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);z-index:5;display:flex;flex-direction:column;background:var(--vx-paper);border-left:1px solid var(--vx-line);
  transform:translateX(102%);visibility:hidden;transition:transform .34s cubic-bezier(.2,.7,.2,1),visibility 0s linear .34s}
.ed[data-open="1"]{transform:none;visibility:visible;transition:transform .34s cubic-bezier(.2,.7,.2,1),visibility 0s}
.ed-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--vx-line);flex:none}
.ed-title{margin:0;font-size:16px;font-weight:600}
.ed-x{width:34px;height:34px;border:1px solid var(--vx-line);border-radius:8px;background:var(--vx-paper);color:var(--vx-ink);font-size:20px;line-height:1;cursor:pointer}
.ed-x:hover{background:var(--vx-brand-soft)}
.ed-body{overflow:auto;padding:4px 16px 20px;flex:1}
.ed-sec{padding:12px 0;border-bottom:1px solid var(--vx-line)}
.ed-sec:last-child{border-bottom:0}
.ed-sec h4{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--vx-muted)}
.ed-demo{margin:12px 0 0;padding:8px 10px;border:1px dashed var(--vx-warn);border-radius:8px;color:var(--vx-warn);font-size:14px}
.ed-scheme{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ed-mol{display:inline-block;min-width:60px;font-size:12px;color:var(--vx-muted);word-break:break-all}
.ed-mol svg{display:block;width:92px;height:76px}.ed-prod svg{width:112px}
.ed-plus,.ed-arrow{color:var(--vx-muted);font-size:20px}
.ed-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ed-tag{padding:2px 9px;border:1px solid var(--vx-line);border-radius:8px;font-size:14px}
.ed-tier-strong,.ed-tier-moderate{border-color:var(--vx-brand);color:var(--vx-brand)}
.ed-tier-weak{border-style:dashed}
.ed-tier-none{border-color:var(--vx-warn);color:var(--vx-warn)}
.ed-none{padding:12px;border:1px solid var(--vx-warn);border-radius:8px;background:color-mix(in srgb,var(--vx-warn) 8%,var(--vx-paper))}
.ed-none b{display:block;font-size:18px;color:var(--vx-warn)}
.ed-none p,.ed-sub{margin:6px 0 0;font-size:14px;color:var(--vx-muted)}
.ed-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.ed-prec{padding:10px 12px;border:1px solid var(--vx-line);border-radius:8px;display:grid;gap:5px}
.ed-prec-h{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.ed-rid{font-family:ui-monospace,Menlo,monospace;font-size:14px;font-weight:600}
.ed-src,.ed-ref,.ed-simk{font-size:13px;color:var(--vx-muted)}
.ed-pat{color:var(--vx-ink);font-weight:600}
.ed-sim{display:flex;align-items:center;gap:8px}
.ed-simbar{display:inline-block;width:110px;height:8px;border-radius:4px;background:var(--vx-line);overflow:hidden}
.ed-simbar b{display:block;height:100%;width:calc(var(--w)*100%);background:var(--vx-brand);transform-origin:left;transform:scaleX(0);transition:transform .7s cubic-bezier(.2,.7,.2,1) .25s}
.ed[data-open="1"] .ed-simbar b{transform:none}
.ed-simv{font-variant-numeric:tabular-nums;font-weight:600;font-size:14px}
.ed-ag{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ed-chip{padding:1px 8px;border:1px solid var(--vx-line);border-radius:8px;font-family:ui-monospace,Menlo,monospace;font-size:13px;background:var(--vx-panel)}
.ed-yrow{display:flex;align-items:baseline;gap:12px}
.ed-yval{font-size:20px;font-weight:600;color:var(--vx-muted)}
.ed-flag{padding:10px 12px;border:1px solid var(--vx-line);border-radius:8px}
.ed-flag.ed-sev-warn,.ed-flag.ed-sev-block{border-color:var(--vx-warn)}
.ed-flag b{font-size:15px}.ed-flag small{margin-left:8px;color:var(--vx-muted);font-size:13px}
.ed-flag p{margin:4px 0 0;font-size:14px}.ed-flag u{text-decoration:none;color:var(--vx-muted);margin-right:8px;font-size:13px}
.ed-dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:0;font-size:14px}.ed-dl dt{color:var(--vx-muted)}.ed-dl dd{margin:0}
.ed-static,.ed-static .ed-simbar b{transition:none!important}

/* ───────── 记分卡 ───────── */
.sc{background:var(--vx-paper);border:1px solid var(--vx-line);border-radius:8px;padding:12px 16px}
.sc-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;padding-bottom:6px}
.sc-title{font-size:16px;font-weight:600}
.sc-note{font-size:13px;color:var(--vx-muted)}
.sc-row{display:grid;grid-template-columns:76px 1fr;gap:4px 12px;align-items:center;padding:9px 0;border-top:1px solid var(--vx-line)}
.sc-k{font-size:14px;font-weight:600;color:var(--vx-muted)}
.sc-v,.sc-d{grid-column:2;font-size:14px}
.sc-v b{font-size:16px;font-variant-numeric:tabular-nums}
.sc-d{color:var(--vx-muted);font-size:13px}
.sc-bar{display:flex;gap:2px;height:14px;border-radius:7px;overflow:hidden;background:var(--vx-panel)}
.sc-seg{flex:var(--n) 1 0;min-width:6px;transform-origin:left center;transition:transform .7s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*.12s)}
.sc-pre .sc-seg{transform:scaleX(0)}
.sc-hit{background:var(--rt-hit)}.sc-miss{background:var(--rt-miss)}
.sc-unk{background:repeating-linear-gradient(45deg,var(--rt-unk) 0 3px,var(--vx-panel) 3px 6px)}
.sc-strong{background:var(--vx-brand)}.sc-mid{background:color-mix(in srgb,var(--vx-brand) 55%,var(--vx-paper))}
.sc-weak{background:color-mix(in srgb,var(--vx-brand) 28%,var(--vx-paper))}
.sc-none{background:repeating-linear-gradient(45deg,var(--vx-warn) 0 3px,var(--vx-panel) 3px 6px)}
.sc-lg{display:inline-flex;flex-wrap:wrap;gap:2px 12px}
.sc-sw{display:inline-block;width:12px;height:10px;border-radius:3px;margin-right:5px;vertical-align:baseline}
.sc-pips{display:flex;flex-wrap:wrap;gap:4px}
.sc-pip{width:18px;height:14px;border-radius:3px;background:var(--vx-line);transition:background .3s ease calc(var(--i,0)*.1s + .2s)}
.sc-pip.sc-on{background:var(--vx-brand)}
.sc-pre .sc-pip.sc-on{background:var(--vx-line)}
.sc-chips{display:flex;flex-wrap:wrap;gap:6px}
.sc-chip{padding:2px 9px;border:1px solid var(--vx-line);border-radius:8px;font-size:14px;background:var(--vx-paper)}
.sc-chip-ok{color:var(--vx-ok);border-color:var(--vx-ok)}
.sc-chip-warn{color:var(--vx-warn);border-color:var(--vx-warn)}
.sc-yield .sc-yval{font-size:16px;color:var(--vx-muted)}
.sc-yield .sc-v{font-size:13px;color:var(--vx-muted)}
.sc-warn{margin:8px 0 0;padding:8px 10px;border:1px solid var(--vx-warn);border-radius:8px;color:var(--vx-warn);font-size:14px}
.sc-static .sc-seg,.sc-static .sc-pip{transition:none!important}

/* ───────── 并排比较 ───────── */
.rc-wrap{background:var(--vx-panel);border:1px solid var(--vx-line);border-radius:8px;padding:12px}
.rc-sum{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin-bottom:10px;font-size:14px}
.rc-sum b{font-size:16px}
.rc-lg{display:inline-flex;align-items:center;gap:6px;color:var(--vx-muted);font-size:13px}
.rc-sw{display:inline-block;width:16px;height:12px;border-radius:3px;margin-left:8px}
.rc-sw-shared{background:var(--vx-paper);border:1px solid var(--vx-line);opacity:.7}
.rc-sw-diff{background:color-mix(in srgb,var(--vx-accent) 8%,var(--vx-paper));border:2px solid var(--vx-accent)}
.rc-sw-empty{border:1px dashed var(--vx-muted)}
.rc-scroll{overflow-x:auto}
.rc-grid{display:grid;grid-template-columns:repeat(var(--rc-cols),minmax(272px,1fr));gap:10px;min-width:calc(var(--rc-cols)*272px)}
.rc-head{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-bottom:2px solid var(--vx-brand)}
.rc-head b{font-size:16px}.rc-head span{font-size:13px;color:var(--vx-muted)}
.rc-slot{display:flex;transition:opacity .45s ease calc(var(--i,0)*.14s),transform .45s cubic-bezier(.2,.7,.2,1) calc(var(--i,0)*.14s)}
.rc-slot>*{flex:1}
.rc-pre .rc-slot{opacity:0;transform:translateY(12px)}
.rc-cell{display:block;width:100%;text-align:left;color:var(--vx-ink);background:var(--vx-paper);border:1px solid var(--vx-line);border-radius:8px;padding:10px;cursor:pointer}
.rc-shared{opacity:.72;background:var(--vx-panel)}
.rc-shared:hover{opacity:1}
.rc-diff{border:2px solid var(--vx-accent);background:color-mix(in srgb,var(--vx-accent) 8%,var(--vx-paper));padding:9px}
.rc-empty{display:grid;place-items:center;min-height:120px;cursor:default;color:var(--vx-muted);font-size:14px;border:1px dashed var(--vx-muted);background:transparent}
.rc-sel{outline:3px solid var(--vx-brand);outline-offset:2px}
.rc-cell:focus-visible{outline:3px solid var(--vx-accent);outline-offset:2px}
.rc-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;font-size:13px}
.rc-meta span{padding:1px 8px;border:1px solid var(--vx-line);border-radius:8px}
.rc-tier-strong,.rc-tier-moderate{border-color:var(--vx-brand)!important;color:var(--vx-brand)}
.rc-tier-none{border-color:var(--vx-warn)!important;color:var(--vx-warn)}
.rc-tag{margin-left:auto;font-weight:600}
.rc-diff .rc-tag{border-color:var(--vx-accent)!important;color:var(--vx-accent)}
.rc-scheme{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.rc-mol{display:inline-block;font-size:12px;color:var(--vx-muted);word-break:break-all}
.rc-mol svg{display:block;width:96px;height:72px}.rc-prod svg{width:116px}
.rc-plus,.rc-arrow{color:var(--vx-muted);font-size:18px}
.rc-note{margin-top:8px;font-size:13px;color:var(--vx-muted)}
.rc-flag{color:var(--vx-warn);font-weight:600}
.rc-in:not(.rc-static) .rc-diff{animation:rc-flash 1s ease-out 2;animation-delay:calc(var(--i,0)*.14s + .7s)}
@keyframes rc-flash{0%{outline:3px solid var(--vx-accent);outline-offset:0}100%{outline:3px solid transparent;outline-offset:9px}}
.rc-static .rc-slot,html.vx-static .rc-slot{transition:none!important}
.rc-static .rc-diff{animation:none!important}

/* ───────── Pareto 散点 ───────── */
.rp-wrap{background:var(--vx-panel);border:1px solid var(--vx-line);border-radius:8px;padding:12px;overflow-x:auto}
.rp-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:8px;font-size:14px}
.rp-bar label{display:inline-flex;align-items:center;gap:6px;color:var(--vx-muted)}
.rp-bar select{max-width:100%;padding:5px 8px;border:1px solid var(--vx-line);border-radius:8px;background:var(--vx-paper);color:var(--vx-ink);font-size:14px}
.rp-note{flex-basis:100%;font-size:13px;color:var(--vx-muted)}
.rp-svg{display:block;width:100%;min-width:560px;max-width:780px;height:auto;margin:0 auto}
.rp-svg text{font-family:var(--vx-font)}
.rp-grid{stroke:var(--vx-line);stroke-width:1;stroke-dasharray:4 6}
.rp-axis{stroke:var(--vx-muted);stroke-width:1.5}
.rp-tick{font-size:14px;fill:var(--vx-muted);font-variant-numeric:tabular-nums}
.rp-axlab{font-size:14px;font-weight:600;fill:var(--vx-ink)}
.rp-better{font-size:14px;fill:var(--vx-muted)}
.rp-front{fill:none;stroke:var(--vx-brand);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.55;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1s ease .7s}
.rp-pre .rp-front{stroke-dashoffset:1}
.rp-pt{cursor:pointer;outline:none;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.rp-pop{transform-box:fill-box;transform-origin:center;transition:transform .5s cubic-bezier(.3,1.4,.5,1) calc(var(--i,0)*.12s + .15s),opacity .3s ease calc(var(--i,0)*.12s + .15s)}
.rp-pre .rp-pop{transform:scale(0);opacity:0}
.rp-dot{fill:var(--vx-paper);stroke:var(--vx-muted);stroke-width:2.5}
.rp-lab{font-size:15px;font-weight:600;fill:var(--vx-ink)}
.rp-pt[data-front="1"] .rp-dot{fill:var(--vx-brand);stroke:var(--vx-brand)}
.rp-pt[data-front="1"] .rp-lab{fill:var(--vx-paper)}
.rp-halo{fill:none;stroke:transparent;stroke-width:3}
.rp-pt:hover .rp-halo,.rp-pt:focus-visible .rp-halo{stroke:var(--vx-line)}
.rp-sel .rp-halo{stroke:var(--vx-accent)!important}
.rp-static .rp-pop,.rp-static .rp-front,.rp-static .rp-pt{transition:none!important}