/* hybridbox application relationship diagrams. */
.relationship-map { width: 100%; min-width: 0; background: #f8f7f1; }
.relationship-svg { width: 100%; height: auto; display: block; overflow: visible; }
.relationship-mobile { display: none; }
.relationship-map .relation-part { transition: opacity 180ms ease; }
.relationship-map[data-focus="data"] .relationship-svg > .relation-part:not([data-flow~="data"]),
.relationship-map[data-focus="credentials"] .relationship-svg > .relation-part:not([data-flow~="credentials"]),
.relationship-map[data-focus="network"] .relationship-svg > .relation-part:not([data-flow~="network"]),
[data-focus="data"] > .relationship-map .relationship-svg > .relation-part:not([data-flow~="data"]),
[data-focus="credentials"] > .relationship-map .relationship-svg > .relation-part:not([data-flow~="credentials"]),
[data-focus="network"] > .relationship-map .relationship-svg > .relation-part:not([data-flow~="network"]) { opacity: .36; }
.relationship-map[data-focus="data"] .relation-edge[data-flow~="data"] > path,
.relationship-map[data-focus="credentials"] .relation-edge[data-flow~="credentials"] > path,
.relationship-map[data-focus="network"] .relation-edge[data-flow~="network"] > path { stroke-width: 2.5; }
@media (max-width: 900px) {
  .relationship-desktop { display: none; }
  .relationship-mobile { display: block; max-width: 460px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .relationship-map .relation-part { transition: none; }
}