/* dnssec-viz.css -- the live DNSSEC chain visualizer's rules, for the one
   wiki page that carries it (/wiki/tools/dnssec-viz, the ```dnssec-viz fence in
   scripts/build-wiki.mjs). Moved out of public/dnssec-viz.html's own <style>
   block when that page became a wiki page (the minimum front, 2026-10-05).

   The wiki's stylesheet names four of the colours this file reads under other
   names, so they are mapped here, on the block, to the wiki's own tokens:
   --accent and --ok-bright are the wiki's --lime, --cyan-1 its --cyan,
   --sem-type its --purple. Every other var() here is one wiki.css defines.
   Served under /*.css, immutable for a year: change a byte, bump ?v= in the
   builder. */
.dv{--accent:var(--lime,#b6ff00);--ok-bright:var(--lime,#b6ff00);--cyan-1:var(--cyan,#00e5ff);--sem-type:var(--purple,#b347ff);margin:1rem 0 1.6rem}
.dv .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dv .dv-steps-h{font-family:var(--mono);font-size:.85rem;font-weight:700;color:var(--text);margin:1rem 0 .3rem}
.dv .dv-form{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 .4rem}
.dv .dv-form input{flex:1 1 220px;min-width:0;background:#070b12;border:1px solid var(--border);border-radius:10px;
  padding:.6rem .8rem;font-family:var(--mono);font-size:.95rem;color:var(--text)}
.dv .dv-form input:focus{outline:none;border-color:var(--accent)}
.dv .dv-form button{font-family:var(--mono);font-size:.9rem;background:var(--accent);color:#0a0e14;font-weight:700;
  border:1px solid var(--accent);border-radius:10px;padding:.6rem 1.1rem;cursor:pointer}
.dv .dv-form button:disabled{opacity:.5;cursor:wait}
.dv .samples{font-family:var(--mono);font-size:.8rem;color:var(--text-dim);margin:0 0 .8rem}
.dv .samples .samp{background:none;border:none;padding:0;font:inherit;color:var(--cyan-1);cursor:pointer;text-decoration:underline dotted}
.dv .dv-vantage{font-family:var(--mono);font-size:.75rem;color:var(--text-dim);margin:.2rem 0 1rem}
.dv .dv-legend{display:flex;gap:1.1rem;flex-wrap:wrap;font-family:var(--mono);font-size:.8rem;color:var(--text-dim);
  margin:.6rem 0 .4rem;align-items:center}
.dv .dv-legend .fk{color:var(--sem-flag,#00e5ff);font-weight:700}
.dv .dv-legend .fk.off{color:var(--text-dim);font-weight:400}
.dv .dv-legend svg{vertical-align:middle}
.dv .dv-status{font-family:var(--mono);font-size:.82rem;color:var(--text-dim);margin:.6rem 0}
.dv .dv-wrap{position:relative;border:1px solid var(--border);border-radius:12px;background:#070b12;overflow-x:auto;
  margin:.4rem 0 1.2rem;min-height:120px}
.dv .dv-wrap{scrollbar-color:var(--border) #070b12}
.dv .dv-wrap svg{display:block}
/* graph */
.dv .dvz-colhead{font-family:var(--mono);font-size:16px;fill:var(--sem-host,#00e5ff);font-weight:700}
.dv .dvz-colsub{font-family:var(--mono);font-size:12px;fill:#8b98a5}
.dv .dvz-node rect{fill:#0c131c;stroke:var(--border);stroke-width:1;rx:8}
.dv .dvz-node:hover rect,.dv .dvz-node.pinned rect{stroke:var(--accent);stroke-width:1.5;cursor:pointer}
.dv .dvz-node text{font-family:var(--mono)}
.dv .dvz-t1{font-size:15px;fill:#e6edf3;font-weight:700}
.dv .dvz-t2{font-size:12.5px;fill:#9fb0bf}
.dv .dvz-t3{font-size:12.5px;font-weight:700}
.dv .dvz-t3.exp-ok{fill:var(--ok,#9fe000)}
.dv .dvz-t3.exp-warn{fill:var(--warn,#ff6a00)}
.dv .dvz-t3.exp-bad{fill:var(--bad,#ff2d95)}
.dv .dvz-badge{font-size:12px;font-weight:700}
/* header flags strip: same convention as the dig tool's flag tokens
   (--sem-flag + bold = set, the same pairing .ann-flag uses); dim = clear */
/* ── THE SEMANTIC PALETTE, IN SVG ─────────────────────────────────────────
   One colour, one meaning, and the same meanings the wiki and the dig tool
   use: hostnames and zone names cyan, addresses orange, record types purple,
   flags cyan and bold. A key tag is the thing you follow from box to box
   down the chain, so it gets the wiki's highlight treatment: lime, bold.
   Every fill reads a token style.css defines, with the token's own hex as
   the fallback so a missing definition cannot change the hue. */
.dv .dvz-node .s-host{fill:var(--sem-host,#00e5ff)}
.dv .dvz-node .s-addr{fill:var(--sem-addr,#ffa14a)}
.dv .dvz-node .s-type{fill:var(--sem-type,#b347ff);font-weight:700}
.dv .dvz-node .s-key{fill:var(--ok-bright,#b6ff00);font-weight:700}
.dv .dvz-node .s-dim{fill:var(--text-dim,#8595a4)}
.dv .dvtip .s-host{color:var(--sem-host,#00e5ff)}
.dv .dvtip .s-addr{color:var(--sem-addr,#ffa14a)}
.dv .dvtip .s-type{color:var(--sem-type,#b347ff);font-weight:700}
.dv .dvtip .s-key{color:var(--ok-bright,#b6ff00);font-weight:700}
.dv .dvz-flags{font-family:var(--mono);font-size:12.5px;cursor:help}
.dv .dvz-flags .fon{fill:var(--sem-flag,#00e5ff);font-weight:700}
.dv .dvz-flags .foff{fill:#8595a4}
.dv .dvz-flags .fsep{fill:#3d4a58}
.dv .dvz-node.k-ksk rect{stroke:color-mix(in srgb,var(--accent) 55%,var(--border))}
.dv .dvz-node.k-ds rect{stroke:color-mix(in srgb,var(--cyan-1,#39c) 55%,var(--border))}
.dv .dvz-node.k-warn rect{stroke:color-mix(in srgb,var(--warn,#ffc24b) 65%,var(--border))}
.dv .dvz-node.k-bad rect{stroke:color-mix(in srgb,var(--bad,#ff4d6d) 70%,var(--border))}
.dv .dvz-edge{fill:none;stroke-width:1.6}
/* THE WIRES RECEDE BEHIND THE TAGS. Verified in a browser at 1280 and at 2x
   (a second seat, 2026-09-10): the key tag and the edge running past it were
   the same lime at the same weight, so the eye could not separate the
   identifier you are following from the line joining the boxes. Lime already
   carries six meanings on this page; the tag is the newest and keeps the
   full-strength colour, and the edge, which is a relation and not a thing,
   drops back. */
.dv .dvz-edge.ok{stroke:var(--accent);opacity:.45}
.dv .dvz-edge.warn{stroke:var(--warn,#ffc24b);stroke-dasharray:5 4}
.dv .dvz-edge.bad{stroke:var(--bad,#ff4d6d)}
.dv .dvz-hit{fill:none;stroke:transparent;stroke-width:22;cursor:pointer}
.dv .dvz-anchor{font-family:var(--mono);font-size:12px;fill:var(--warn,#ffc24b);letter-spacing:.08em}
/* tooltip */
.dv .dvtip{position:absolute;z-index:30;max-width:min(480px,92vw);background:#0c131c;border:1px solid var(--accent);
  border-radius:10px;padding:.6rem .75rem;font-family:var(--mono);font-size:.8rem;color:var(--text-dim);
  box-shadow:0 8px 30px rgba(0,0,0,.6);pointer-events:none;line-height:1.55}
.dv .dvtip.pinned{pointer-events:auto}
.dv .dvtip h4{margin:0 0 .3rem;font-size:.85rem;color:var(--text);font-weight:700}
.dv .dvtip table{border-collapse:collapse;width:100%}
.dv .dvtip td{padding:.08rem .5rem .08rem 0;vertical-align:top}
.dv .dvtip td:first-child{color:#8595a4;white-space:nowrap}
.dv .dvtip td:last-child{color:#c7d6e6;word-break:break-all}
.dv .dvtip .vd{margin-top:.35rem;padding-top:.3rem;border-top:1px solid var(--border)}
.dv .dvtip .vd .ok{color:var(--ok,#b6ff00)} .dvtip .vd .warn{color:var(--warn,#ffc24b)} .dvtip .vd .bad{color:var(--bad,#ff4d6d)}
.dv .dvtip .close{position:absolute;top:.25rem;right:.45rem;color:#5c6b7a;cursor:pointer;display:none}
.dv .dvtip.pinned .close{display:block}
/* verdict + steps */
.dv .dv-verdict{font-family:var(--mono);font-size:.95rem;margin:.6rem 0;padding:.7rem .9rem;border:1px solid var(--border);border-radius:10px}
.dv .dv-verdict.ok{border-color:color-mix(in srgb,var(--ok,#b6ff00) 45%,var(--border));color:var(--ok,#b6ff00)}
.dv .dv-verdict.warn{border-color:color-mix(in srgb,var(--warn,#ffc24b) 55%,var(--border));color:var(--warn,#ffc24b)}
.dv .dv-verdict.bad{border-color:color-mix(in srgb,var(--bad,#ff4d6d) 55%,var(--border));color:var(--bad,#ff4d6d)}
.dv .dv-steps{font-size:.92rem;color:var(--text-dim);max-width:70ch}
.dv .dv-steps li{margin:.3rem 0}
.dv .dv-steps code{color:var(--cyan-1)}