/* /integrations: page-local drawing parts, composed from site.css tokens only (no new colours). */

.cx.ok i{background:var(--ok)}
.cx.ok i::after{border-left-color:var(--ok)}

/* HS-INT-01, lower half: the connector bay dispatching outward, one port per connector */
.int-egress{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule)}
.int-eh{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;margin-bottom:12px}
.int-rows{display:grid;gap:10px}
.int-rows li{display:grid;grid-template-columns:minmax(0,1fr) 164px minmax(0,1fr);align-items:center}
.int-c,.int-d{padding:9px 12px;border-radius:6px;border:1px solid var(--nd-bd);background:var(--nd-bg);font:600 15px/1.3 var(--f-sans);color:var(--head)}
.int-c{border-color:var(--seal)}
.int-rows i{position:relative;height:28px}
.int-rows i::before{content:"";position:absolute;left:0;right:8px;top:50%;height:1.5px;background:var(--ok)}
.int-rows i::after{content:"";position:absolute;right:0;top:50%;margin-top:-5.25px;border:5.25px solid transparent;border-left:8px solid var(--ok);border-right:0}
.int-rows li i{background:linear-gradient(var(--seal),var(--seal)) calc(50% - 5px) 0/1.5px 100% no-repeat,linear-gradient(var(--seal),var(--seal)) calc(50% + 4px) 0/1.5px 100% no-repeat}
@container (max-width: 620px){
  .int-rows li{grid-template-columns:1fr;row-gap:0}
  .int-rows i{height:26px;margin-left:22px;width:1.5px;background:var(--ok)}
  .int-rows i::before{display:none}
  .int-rows i::after{right:auto;top:auto;bottom:-1px;left:-4.5px;margin:0;border:5.25px solid transparent;border-top:8px solid var(--ok);border-bottom:0}
  .int-rows li + li{margin-top:8px}
}

/* the connector index: names only (owner item 13: no third-party logos) */
.int-index li{font-size:16px}

/* ads: the exclusion on the traffic line */
.int-sub{display:block;margin-top:2px;font-weight:500;color:var(--body)}
.dg-f .chips{margin-top:0}

/* refunds: one confirmed signal, two results */
.int-fan{display:grid;grid-template-columns:minmax(0,.8fr) 64px minmax(0,1.2fr);align-items:center}
.int-fork{position:relative;align-self:stretch}
.int-fork::before{content:"";position:absolute;left:0;right:50%;top:50%;height:1.5px;background:var(--ok)}
.int-fork::after{content:"";position:absolute;left:50%;right:0;top:25%;bottom:25%;border:1.5px solid var(--ok);border-right:0}
.int-two{display:grid;gap:18px}
.int-two .nd{padding:12px 16px}
.int-two .nd-t{font-size:16.5px}
@container (max-width: 560px){
  .int-fan{grid-template-columns:1fr}
  .int-fork{height:18px;margin-left:22px}
  .int-fork::before,.int-fork::after{display:none}
  .int-fork i{position:absolute;left:0;top:0;bottom:0;width:1.5px;background:var(--ok)}
  /* one rail runs on from the signal past both results, with a tick into each: both come from the one signal */
  .int-two{gap:12px;padding-left:44px}
  .int-two li::after{content:"";position:absolute;left:-23px;top:-1px;bottom:-13px;width:1.5px;background:var(--ok)}
  .int-two li:last-child::after{bottom:50%}
  .int-two li::before{content:"";position:absolute;left:-23px;width:14px;top:50%;height:1.5px;background:var(--ok)}
  .int-two li .nd-t::before{content:"";position:absolute;left:-10px;top:50%;margin-top:-4.5px;border:5.25px solid transparent;border-left:8px solid var(--ok);border-right:0}
}

/* siem: the egress guard */
.int-gate .lanes li{grid-template-columns:1fr;padding:10px 0}
.int-gate .bd-cross{padding:0}
@container (min-width: 621px){
  .int-gate{grid-template-columns:minmax(0,170px) 44px minmax(0,170px) 44px minmax(0,1fr)}
}

/* keys: revoke */
.int-keys{align-items:center}
.int-revoke{justify-content:flex-start;align-items:flex-start;column-gap:22px}
.int-revoke .bd-cross{padding:0}
.int-revoke .dg-s + .dg-s{margin-top:4px}

.int-tight{margin-top:6px}

@media (max-width:699px){
  .int-index{--c:2!important}
  /* a link that wraps keeps its arrow after the last word, not at the column's edge */
  #constant .more{display:block}
  #constant .more svg{display:inline-block;margin-left:10px;vertical-align:-2px}
}

/* the "any other" mark on the catch-all connector note (the source's plus) */
.int-plus{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--acc);color:var(--acc);font:600 16px/1 var(--f-sans)}