/* Explore connections (generated page support; source: _build/explore-connections.css) */
.xc-controls { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: end; margin: 1.25rem 0 1rem; }
.xc-controls .field { flex: 1 1 14rem; margin: 0; display: grid; gap: .3rem; }
.xc-controls .field label { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); }
.xc-zoom { display: flex; gap: .4rem; }
.xc-zoom .btn { padding: .55em .9em; min-width: 2.75rem; }
.xc-count { flex-basis: 100%; margin: 0; color: var(--graphite); font-size: var(--step--1); }
.xc-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.xc-stage.has-sel { grid-template-columns: minmax(0, 1fr) 22rem; }
.xc-svg { width: 100%; height: min(72vh, 720px); background: var(--white); border: 1px solid var(--rule); border-radius: var(--radius); touch-action: none; cursor: grab; display: block; }
.xc-svg.dragging { cursor: grabbing; }
.xc-svg line { stroke: #B9B4A8; stroke-width: .8; vector-effect: non-scaling-stroke; }
.xc-svg line.on { stroke: var(--asphalt); stroke-width: 2; }
.xc-svg circle { stroke: var(--white); stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; }
.xc-svg circle.sel { stroke: var(--asphalt); stroke-width: 3; }
.xc-svg circle.hit { stroke: var(--asphalt); stroke-width: 2; }
.xc-svg .dim { opacity: .12; }
.xc-svg text { font: 600 11px var(--font-body); fill: var(--asphalt); paint-order: stroke; stroke: var(--white); stroke-width: 3px; pointer-events: none; }
.xc-tip { position: absolute; z-index: 3; max-width: 20rem; background: var(--asphalt); color: var(--white); padding: .5rem .7rem; border-radius: var(--radius); font-size: var(--step--1); line-height: 1.35; pointer-events: none; }
.xc-tip b { display: block; }
.xc-panel { max-height: min(72vh, 720px); overflow: auto; font-size: var(--step--1); }
.xc-panel h2 { font-size: var(--step-1); line-height: 1.2; margin: .35rem 0 .5rem; }
.xc-panel h3 { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); margin: 1rem 0 .4rem; }
.xc-panel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.xc-panel .xc-sh { color: var(--graphite); display: block; }
.xc-panel .xc-open { margin-top: .5rem; }
.xc-legend ul { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: var(--step--1); }
.xc-dot { display: inline-block; width: .8em; height: .8em; border-radius: 50%; margin-right: .4em; vertical-align: -.05em; }
.xc-fallback h3 { font-size: var(--step-1); margin: 1.5rem 0 .5rem; }
.xc-list { padding-left: 1.1rem; display: grid; gap: .55rem; }
.xc-con { font-size: var(--step--1); padding-left: 1.1rem; margin-top: .2rem; color: var(--graphite); }
.xc-item[hidden], .xc-hub[hidden] { display: none; }
@media (max-width: 900px) {
  .xc-stage, .xc-stage.has-sel { grid-template-columns: 1fr; }
  .xc-svg { height: auto; aspect-ratio: 4 / 5; max-height: 70vh; }
  .xc-panel { max-height: none; }
}
@media (max-width: 640px) {
  .xc-controls .field { flex-basis: 100%; }
}