/* /lead-attribution/cross-domain-tracking/ only: the metro line, the address bar cleaner,
   the host label splitter, the rollout path and the storage inspector. Prefix xd-. */

/* ---------- hero: the metro line ---------- */
.xd-metro{border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-deep);overflow:hidden;font:400 .8rem/1.5 var(--sk-mono)}
.xd-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.6rem .9rem;border-bottom:1px solid var(--sk-line);color:var(--sk-text-3);font-size:.7rem;letter-spacing:.04em}
.xd-btn{padding:.25rem .55rem;border:1px solid var(--sk-line-2);border-radius:3px;background:none;color:var(--sk-text-2);font:500 .68rem var(--sk-mono);cursor:pointer}
.xd-line{position:relative;margin:0;padding:1.1rem 1rem .4rem 3.1rem;list-style:none;--at:3}
.xd-line::before{content:'';position:absolute;left:1.55rem;top:1.9rem;bottom:2.4rem;width:4px;margin-left:-2px;border-radius:2px;background:linear-gradient(180deg,var(--sk-people) 0 30%,var(--sk-ai) 30% 66%,var(--sk-search) 66%)}
.xd-st{position:relative;min-height:4.9rem;padding:.15rem 0 .9rem;opacity:.4;transition:opacity .4s}
.xd-st.on{opacity:1}
.xd-dot{position:absolute;left:-1.95rem;top:.25rem;width:1rem;height:1rem;border-radius:50%;background:var(--sk-deep);border:3px solid var(--sk-text-4);transition:border-color .3s,transform .3s}
.xd-st.on .xd-dot{border-color:var(--sk-text)}
.xd-st.here .xd-dot{transform:scale(1.25);border-color:var(--sk-ai)}
.xd-st b{display:block;font:700 1rem var(--sk-sans);color:var(--sk-text)}
.xd-st small{display:block;color:var(--sk-text-4);font-size:.7rem}
.xd-how{display:block;margin-top:.3rem;color:var(--sk-text-2);font:400 .8rem/1.45 var(--sk-sans)}
.xd-how i{display:inline-block;margin-right:.35rem;padding:.05rem .4rem;border:1px solid var(--sk-ai);border-radius:3px;font:500 .66rem var(--sk-mono);font-style:normal;color:var(--sk-ai)}
.xd-train{position:absolute;left:1.55rem;top:1.35rem;width:1.5rem;height:1.5rem;margin-left:-.75rem;border-radius:50%;background:var(--sk-ai);box-shadow:0 0 0 5px rgba(235,104,52,.25);transition:top .9s cubic-bezier(.5,0,.3,1);pointer-events:none}
.xd-train span{position:absolute;left:1.9rem;top:50%;transform:translateY(-50%);display:none}
.xd-sum{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:0;padding:.6rem .9rem;border-top:1px solid var(--sk-line);color:var(--sk-text-3);font-size:.7rem}
.xd-sum b{color:var(--sk-text)}

/* ---------- 01: the address bar cleaner ---------- */
.xd-ctl{margin-top:1.75rem}
.xd-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;margin:0 0 .9rem}
.xd-lab{min-width:7.5rem;font:500 .72rem var(--sk-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sk-text-3)}
.xd-row .seg{padding:.5rem .75rem;font-size:.84rem}
.xd-flips{gap:.75rem}
.xd-flips .flip{font-size:.82rem;padding:.4rem .8rem}
.xd-br{border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-ink);overflow:hidden;--v:var(--sk-search)}
.xd-br[data-v="ignore"]{--v:var(--sk-bots)}
.xd-br[data-v="off"]{--v:var(--sk-text-4)}
.xd-br-bar{display:flex;align-items:center;gap:.8rem;padding:.65rem .8rem;background:#1b2631;border-bottom:1px solid var(--sk-line)}
.xd-br-dots{display:flex;gap:.3rem;flex:none}
.xd-br-dots i{width:.6rem;height:.6rem;border-radius:50%;background:#3a4a5a}
.xd-url{flex:1;min-width:0;margin:0;padding:.4rem .7rem;border-radius:999px;background:var(--sk-deep);font:400 .78rem/1.4 var(--sk-mono);color:var(--sk-text);overflow-wrap:anywhere}
.xd-q{color:var(--sk-ai);transition:opacity .5s,max-width .6s}
.xd-q.gone{opacity:0;text-decoration:line-through}
.xd-q.wipe{animation:xdWipe .9s ease-in both}
@keyframes xdWipe{0%{opacity:1;background:rgba(235,104,52,.25)}60%{opacity:.6;background:rgba(235,104,52,.25)}100%{opacity:0}}
.xd-br-body{padding:1.25rem 1.2rem 1.3rem}
.xd-ctx{margin:0 0 .9rem;color:var(--sk-text-3);font:400 .74rem/1.5 var(--sk-mono)}
.xd-ctx b{color:var(--sk-text)}
.xd-verdict{display:inline-block;margin:0 0 .7rem;padding:.3rem .8rem;border:2px solid var(--v);border-radius:4px;color:var(--v);font:800 1.3rem var(--sk-disp);text-transform:uppercase;letter-spacing:.02em}
.xd-verdict.pop{animation:xdPop .4s cubic-bezier(.2,1.6,.4,1) both}
@keyframes xdPop{from{transform:scale(1.4);opacity:0}to{transform:none;opacity:1}}
.xd-why{margin:0 0 1rem;color:var(--sk-text-2);line-height:1.55}
.xd-kv{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:0}
.xd-kv div{padding:.6rem .7rem;border:1px solid var(--sk-line);border-radius:4px}
.xd-kv dt{font:500 .64rem var(--sk-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sk-text-4)}
.xd-kv dd{margin:.2rem 0 0;color:var(--sk-text);font-size:.88rem}

/* ---------- 02: the host label splitter (paper) ---------- */
.xd-host{padding:1.4rem;border:1px solid var(--sk-paper-line);border-radius:8px;background:#fff;color:var(--sk-paper-ink)}
.xd-in{display:grid;grid-template-columns:3fr 2fr;gap:.8rem}
.xd-in label{display:flex;flex-direction:column;gap:.3rem;font:500 .68rem var(--sk-mono);letter-spacing:.06em;text-transform:uppercase;color:#4a5866}
.xd-in input{width:100%;padding:.6rem .7rem;border:1px solid #b9ae99;border-radius:4px;background:var(--sk-paper);color:var(--sk-paper-ink);font:500 .95rem var(--sk-mono);text-transform:none;letter-spacing:0}
.xd-in input:focus{outline:2px solid var(--sk-ai-deep);outline-offset:1px}
.xd-pre{display:flex;flex-wrap:wrap;gap:.4rem;margin:.9rem 0 0}
.xd-pre button{padding:.35rem .6rem;border:1px solid #b9ae99;border-radius:999px;background:transparent;color:var(--sk-paper-ink);font:500 .74rem var(--sk-mono);cursor:pointer}
.xd-pre button[aria-pressed="true"]{background:var(--sk-paper-ink);border-color:var(--sk-paper-ink);color:#fff}
.xd-labels{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;min-height:3.2rem;margin:1.3rem 0 .8rem;font:600 1.1rem var(--sk-mono)}
.xd-labels i,.xd-labels b{padding:.45rem .65rem;border-radius:4px;font-style:normal;animation:xdLab .35s ease-out both}
.xd-labels i{border:1px dashed #b9ae99;color:#6b7785}
.xd-labels b{background:var(--sk-ink);color:#fff}
.xd-labels b:last-child{box-shadow:inset 0 -3px 0 var(--sk-ai)}
.xd-labels em{font-style:normal;color:#6b7785;font-size:.9rem}
.xd-labels i:nth-child(2),.xd-labels b:nth-child(2){animation-delay:.06s}
.xd-labels i:nth-child(3),.xd-labels b:nth-child(3){animation-delay:.12s}
.xd-labels i:nth-child(4),.xd-labels b:nth-child(4){animation-delay:.18s}
@keyframes xdLab{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.xd-rule{margin:0 0 .8rem;color:var(--sk-paper-ink-2);line-height:1.55}
.xd-cookie{margin:0;padding:.8rem;border-radius:4px;background:var(--sk-ink);color:var(--sk-text-2);font:400 .74rem/1.5 var(--sk-mono);white-space:pre-wrap;overflow-wrap:anywhere}
.xd-cookie b{color:var(--sk-ai);font-weight:600}

/* ---------- 03: the rollout path ---------- */
.xd-path{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:1.5rem 0 0;padding:0;list-style:none}
.xd-path::before{content:'';position:absolute;left:0;right:0;top:1.05rem;height:3px;background:var(--sk-line-2)}
.xd-path::after{content:'';position:absolute;left:0;top:1.05rem;height:3px;width:var(--fill,100%);background:var(--sk-ai);transition:width .7s ease-out}
.xd-p{position:relative;padding:2.6rem 1rem 0 0;transition:opacity .4s}
.xd-anim .xd-p:not(.on){opacity:.35}
.xd-p::before{content:'';position:absolute;left:0;top:.45rem;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--sk-ai);border:3px solid var(--sk-ai);transition:all .3s}
.xd-anim .xd-p:not(.on)::before{background:var(--sk-ink);border-color:var(--sk-line-2)}
.xd-p i{display:block;font:500 .7rem var(--sk-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--sk-ai)}
.xd-p b{display:block;margin:.35rem 0 .3rem;font:700 1.02rem/1.3 var(--sk-sans)}
.xd-p span{display:block;color:var(--sk-text-2);font-size:.9rem;line-height:1.5}
.xd-fin::before{width:1.6rem;height:1.6rem;top:.3rem;background:var(--sk-search);border-color:var(--sk-search);box-shadow:0 0 0 5px rgba(27,175,122,.2)}
.xd-path[data-state="new"]{grid-template-columns:repeat(4,minmax(0,1fr))}
.xd-path[data-state="new"] .xd-wait{display:none}
.xd-wait i{color:var(--sk-bots)}
.xd-wait::before{border-color:var(--sk-bots);background:transparent}

/* ---------- 04: the storage inspector ---------- */
.xd-store{border:1px solid var(--sk-line-2);border-radius:8px;background:var(--sk-deep);overflow:hidden}
.xd-store-bar{padding:.6rem .9rem;border-bottom:1px solid var(--sk-line);color:var(--sk-text-3);font:500 .7rem var(--sk-mono);letter-spacing:.04em}
.xd-store table{width:100%;border-collapse:collapse;font:400 .78rem/1.4 var(--sk-mono)}
.xd-store th{padding:.5rem .8rem;text-align:left;font:500 .64rem var(--sk-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--sk-text-4);border-bottom:1px solid var(--sk-line)}
.xd-store td{padding:.6rem .8rem;border-bottom:1px solid var(--sk-line);color:var(--sk-text);overflow-wrap:anywhere;vertical-align:top}
.xd-store td:first-child{color:var(--sk-text-3)}
.xd-store tr{animation:xdRow .35s ease-out both}
@keyframes xdRow{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.xd-store .k-none td{color:var(--sk-text-4);text-align:center;font-style:italic}
.xd-store .k-none{display:none}
.xd-store[data-state="wait"] tbody tr,.xd-store[data-state="dnt"] tbody tr{display:none}
.xd-store[data-state="wait"] .k-none,.xd-store[data-state="dnt"] .k-none{display:table-row}
.xd-store[data-state="no"] .k-vid,.xd-store[data-state="no"] .k-src,.xd-store[data-state="no"] .k-ck{display:none}
.xd-store-say{margin:0;padding:.9rem;color:var(--sk-text-2);font-size:.92rem;line-height:1.5}

@media (max-width:980px){
  .xd-path,.xd-path[data-state="new"]{grid-template-columns:minmax(0,1fr);gap:1.1rem}
  .xd-path::before,.xd-path::after{left:.6rem;right:auto;top:0;bottom:0;width:3px;height:auto}
  .xd-path::after{height:var(--fill,100%);bottom:auto}
  .xd-p{padding:0 0 0 2.4rem}
  .xd-p::before{top:0}
}
@media (max-width:640px){
  .xd-in{grid-template-columns:1fr}
  .xd-kv{grid-template-columns:1fr}
  .xd-lab{min-width:0;width:100%}
}
@media (prefers-reduced-motion:reduce){
  .xd-train{display:none}
  .xd-labels i,.xd-labels b,.xd-store tr,.xd-verdict.pop,.xd-q.wipe{animation:none}
}