/* DNSSEC telemetry: seal states and the floating panel. Uses the host page's variables when present. */
.dt-seal{cursor:pointer;outline-offset:6px}
.dt-seal .mark-tick,.dt-seal .mark-dash,.dt-seal .mark-cross{fill:none;stroke:var(--paper,#fff);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity .25s}
.dt-seal .mark-seal{transition:fill .3s}
.dt-seal[data-dnssec="pending"] .mark-seal{fill:var(--ink-3,#7B8A99);animation:dt-pulse 1.4s ease-in-out infinite}
.dt-seal[data-dnssec="ok"] .mark-seal{fill:var(--proven,#1E7A52)}
.dt-seal[data-dnssec="ok"] .mark-tick{opacity:1}
.dt-seal[data-dnssec="warn"] .mark-seal{fill:var(--progress,#B07A12)}
.dt-seal[data-dnssec="warn"] .mark-dash{opacity:1}
.dt-seal[data-dnssec="bad"] .mark-seal{fill:var(--problem,#B3262E)}
.dt-seal[data-dnssec="bad"] .mark-cross{opacity:1}
@keyframes dt-pulse{50%{opacity:.45}}
.dt-own-seal{position:fixed;right:16px;bottom:16px;z-index:30;width:52px;height:52px;padding:0;border:0;background:none}
.dt-own-seal svg{width:100%;height:100%}

.dt-panel{position:fixed;z-index:40;width:min(520px,calc(100vw - 24px));max-height:calc(100vh - 24px);overflow:auto;
  background:var(--paper,#F7F9FB);color:var(--ink,#1A2B3C);border:1.5px solid var(--ink,#1A2B3C);outline:6px solid var(--paper,#F7F9FB);
  box-shadow:0 24px 60px rgba(10,20,30,.45);font-family:var(--text,system-ui,sans-serif);font-size:13.5px;line-height:1.4;
  font-feature-settings:"tnum" 1;transform-origin:50% 50%;cursor:default}
.dt-panel[hidden]{display:none}
.dt-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:12px 14px 10px;border-bottom:3px solid var(--ink,#1A2B3C)}
.dt-head h2{margin:0;font-family:var(--display,inherit);font-weight:700;font-size:20px;line-height:1.1}
.dt-dom{color:var(--blue,#1F5FA6)}
.dt-sub{margin:3px 0 0;color:var(--ink-2,#4A5B6C);font-size:12.5px}
.dt-panel button{font:inherit;font-family:var(--display,inherit);font-weight:600;color:inherit;background:transparent;
  border:1.5px solid var(--ink,#1A2B3C);padding:4px 10px;cursor:pointer}
.dt-panel button:hover{background:var(--blue-soft,#DCE8F5)}
.dt-rows{width:100%;border-collapse:collapse}
.dt-rows th,.dt-rows td{padding:6px 8px;border-bottom:1px solid var(--rule,#C3CFDA);vertical-align:top;text-align:left}
.dt-rows th{font-family:var(--display,inherit);font-weight:600;white-space:nowrap;padding-right:10px}
.dt-rows .dt-i{width:18px;text-align:center;font-weight:700}
.dt-rows .dt-d{color:var(--ink-2,#4A5B6C)}
.dt-rows .dt-ms{width:44px;text-align:right;color:var(--ink-3,#7B8A99);font-size:12px}
.dt-rows tr[data-state="ok"] .dt-i{color:var(--proven,#1E7A52)}
.dt-rows tr[data-state="bad"] .dt-i,.dt-rows tr[data-state="bad"] .dt-d{color:var(--problem,#B3262E)}
.dt-rows tr[data-state="warn"] .dt-i,.dt-rows tr[data-state="warn"] .dt-d{color:var(--progress,#B07A12)}
.dt-rows tr[data-state="pending"] .dt-i{color:var(--ink-3,#7B8A99);animation:dt-pulse 1s ease-in-out infinite}
.dt-rows tr.dt-context th,.dt-rows tr.dt-context .dt-i{color:var(--ink-3,#7B8A99)}
.dt-rows tr.dt-context:first-of-type th,.dt-rows tr:not(.dt-context) + tr.dt-context th,.dt-rows tr:not(.dt-context) + tr.dt-context td{border-top:1.5px solid var(--ink,#1A2B3C)}
.dt-verdict{margin:0;padding:10px 14px;font-weight:600;font-size:14.5px;border-left:6px solid var(--ink-3,#7B8A99)}
.dt-verdict:empty{display:none}
.dt-verdict[data-state="ok"]{border-left-color:var(--proven,#1E7A52);background:var(--proven-soft,#DDEFE6)}
.dt-verdict[data-state="warn"]{border-left-color:var(--progress,#B07A12);background:var(--progress-soft,#F6EBD3)}
.dt-verdict[data-state="bad"]{border-left-color:var(--problem,#B3262E);background:var(--problem-soft,#F6DEDF)}
.dt-foot{padding:10px 14px 12px;border-top:1.5px solid var(--ink,#1A2B3C)}
.dt-actions{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center;font-size:12.5px}
.dt-actions a{color:var(--blue,#1F5FA6)}
.dt-note,.dt-last{margin:8px 0 0;font-size:12px;color:var(--ink-2,#4A5B6C)}
.dt-last{margin-top:3px;color:var(--ink-3,#7B8A99)}
.dt-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.dt-seal[data-dnssec="pending"] .mark-seal,.dt-rows tr[data-state="pending"] .dt-i{animation:none}}
@media print{.dt-panel{display:none !important}}