/* assets/css/systems/info-systems/how-dns-domain-name-resolution-works-explained.css — 本页专属样式（en/zh 共用） */
/* ============ DNS 域名解析 · DNS name resolution ============ */
/* dns · merged from source <style>; scoped by body[data-topic="dns"] */

body[data-topic="dns"] .svg-title{fill:var(--strong);font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:.08em;text-anchor:middle;}
body[data-topic="dns"] .svg-sub{fill:#5b6a7d;font-size:12px;text-anchor:middle;}
body[data-topic="dns"] .tag{fill:#475569;font-family:var(--mono);font-size:13px;letter-spacing:.02em;}
body[data-topic="dns"] .tag-sm{fill:#5b6472;font-size:11px;}
body[data-topic="dns"] .legend{fill:#5b6472;font-size:11px;text-anchor:middle;}

/* 部件基础描边 */
body[data-topic="dns"] .part .body{stroke:#2563eb;stroke-width:1.6}
body[data-topic="dns"] .part .body2{stroke:#60a5fa;stroke-width:1.2}

/* 各部件区分色（中灰蓝值域内 · 未高亮禁近白）+ 动画延迟 */
body[data-topic="dns"] .part[data-id="part-browser"]{--db:0s;--base:#c2d1e4;--base2:#dde7f4}
body[data-topic="dns"] .part[data-id="part-recursive-resolver"]{--db:.55s;--base:#bccbe0;--base2:#d8e4f3}
body[data-topic="dns"] .part[data-id="part-root-server"]{--db:1.55s;--base:#bfcee2;--base2:#dae6f4}
body[data-topic="dns"] .part[data-id="part-tld-server"]{--db:2.65s;--base:#c6d3e5;--base2:#e0eaf5}
body[data-topic="dns"] .part[data-id="part-authoritative-server"]{--db:3.75s;--base:#c4d1e3;--base2:#dce7f3}
body[data-topic="dns"] .part[data-id="part-local-cache"]{--db:7.7s;--base:#cad6e7;--base2:#e3edf7}
body[data-topic="dns"] .part[data-id="part-result-ip"]{--db:7.7s;--base:#c0cfe6;--base2:#dbe6f4}

body[data-topic="dns"] .dns-node .body{fill:var(--base,#c2d1e4);animation:dns-fill-b 11s ease-in-out infinite var(--db,0s)}
body[data-topic="dns"] .dns-node .body2{fill:var(--base2,#dde7f4);animation:dns-fill-b2 11s ease-in-out infinite var(--db,0s)}
body[data-topic="dns"] .dns-node .body3{fill:#aab9cd;animation:dns-fill-b3 11s ease-in-out infinite var(--db,0s)}
body[data-topic="dns"] .dns-node{animation:dns-glow 11s ease-in-out infinite var(--db,0s)}
@keyframes dns-glow{0%,100%{filter:none}7%,13%{filter:drop-shadow(0 0 12px rgba(29,78,216,.5))}}
@keyframes dns-fill-b{0%,100%{fill:var(--base,#c2d1e4);stroke:#2563eb;stroke-width:1.6}7%,13%{fill:#9dc3f5;stroke:#1d4ed8;stroke-width:2.2}}
@keyframes dns-fill-b2{0%,100%{fill:var(--base2,#dde7f4);stroke:#60a5fa;stroke-width:1.2}7%,13%{fill:#c4daf8;stroke:#3b82f6;stroke-width:1.4}}
@keyframes dns-fill-b3{0%,100%{fill:#aab9cd}7%,13%{fill:#1d4ed8}}

/* 查询 / 应答 流：蓝=查询，绿=应答；虚线流动 + 按顺序点亮 */
body[data-topic="dns"] .dns-qa,
body[data-topic="dns"] .dns-ra,
body[data-topic="dns"] .dns-ql,
body[data-topic="dns"] .dns-rl{fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:10 8}
body[data-topic="dns"] .dns-qa,
body[data-topic="dns"] .dns-ql{stroke:#2563eb}
body[data-topic="dns"] .dns-ra,
body[data-topic="dns"] .dns-rl{stroke:#16a34a}
body[data-topic="dns"] .is-running .dns-qa,
body[data-topic="dns"] .is-running .dns-ra{animation:dns-march .7s linear infinite, dns-seq 11s ease-in-out infinite}
@keyframes dns-march{to{stroke-dashoffset:-18}}
@keyframes dns-seq{0%,100%{opacity:.16}7%,13%{opacity:1}}
body[data-topic="dns"] .is-running .dns-s1{animation-delay:0s,0s}
body[data-topic="dns"] .is-running .dns-s2{animation-delay:0s,1.1s}
body[data-topic="dns"] .is-running .dns-s3{animation-delay:0s,2.2s}
body[data-topic="dns"] .is-running .dns-s4{animation-delay:0s,3.3s}
body[data-topic="dns"] .is-running .dns-s5{animation-delay:0s,4.4s}
body[data-topic="dns"] .is-running .dns-s6{animation-delay:0s,5.5s}
body[data-topic="dns"] .is-running .dns-s7{animation-delay:0s,6.6s}
body[data-topic="dns"] .is-running .dns-s8{animation-delay:0s,7.7s}
body[data-topic="dns"] .dns-link{fill:none;stroke:#8ea0b5;stroke-width:1.4;stroke-dasharray:3 3}

/* 高亮态（页面引擎 is-active 时，换色 + 描边 + 发光） */
body[data-topic="dns"] .part.is-active .body{fill:#9dc3f5;stroke:#1d4ed8;stroke-width:2.2;animation:none}
body[data-topic="dns"] .part.is-active .body2{fill:#c4daf8;stroke:#3b82f6;stroke-width:1.4;animation:none}
body[data-topic="dns"] .part.is-active .body3{fill:#1d4ed8;animation:none}
body[data-topic="dns"] .part.is-active{filter:drop-shadow(0 0 12px rgba(29,78,216,.5));animation:none}

@media (prefers-reduced-motion:reduce){
  body[data-topic="dns"] .dns-node,
  body[data-topic="dns"] .dns-node .body,
  body[data-topic="dns"] .dns-node .body2,
  body[data-topic="dns"] .dns-node .body3,
  body[data-topic="dns"] .is-running .dns-qa,
  body[data-topic="dns"] .is-running .dns-ra{animation:none;opacity:1}
}