/* 75 Connectivity (#rizeni). The script keeps aria-pressed on the chips and puts .is-dim on the
   lanes the chosen band does not use; the bare markup is "Vše". Dimming and flow: .ar-motion only. */

.ar-conn__grid { display: grid; gap: var(--wp--preset--spacing--60); }
.ar-conn__panel { display: grid; gap: var(--wp--preset--spacing--30); padding: clamp(0.75rem, 3vw, 2rem); background-color: var(--wp--preset--color--carbon); }
.ar-conn__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ar-conn__chips span { text-transform: none; } /* a unit keeps its case: GHz, not GHZ */
.no-js :is(.ar-conn__hint, .ar-conn__chips) { display: none; }

@media (min-width: 1024px) {
  .ar-conn__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: clamp(2.5rem, 5vw, 5rem); }
  .ar-conn__panel { order: -1; }
}

/* Text size is in viewBox units, against the scale: about 12 px on screen. */
.ar-conn__svg { --ar-conn-t: clamp(13px, 47px - 5.3vw, 20.5px); width: 100%; height: auto; }

@media (min-width: 1024px) {
  .ar-conn__svg { --ar-conn-t: clamp(13px, 29px - 1.34vw, 15.5px); }
}

.ar-conn__svg :where(path, rect, circle) { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ar-conn__bus { stroke: var(--wp--preset--color--iron); }
.ar-conn__line { stroke: var(--wp--preset--color--steel); }
.ar-conn__svg .ar-conn__joint { fill: var(--wp--preset--color--steel); } /* the computer's bus joins a drone lane */
.ar-conn__flow { stroke: var(--wp--preset--color--chartreuse); stroke-width: 2.5; stroke-dasharray: 6 14; }
.ar-conn__open { stroke: var(--wp--preset--color--silver); stroke-dasharray: 8 6; stroke-linecap: butt; }
.ar-conn__svg .ar-conn__relay { fill: var(--wp--preset--color--carbon); stroke: var(--wp--preset--color--steel); stroke-width: 1.5; }
.ar-conn__glyph { stroke: var(--wp--preset--color--mist); stroke-width: 1.75; }
.ar-conn__glyph circle { fill: var(--wp--preset--color--mist); }
.ar-conn__glyph--car rect { fill: var(--wp--preset--color--graphite); }
.ar-conn__glyph--car circle { fill: var(--wp--preset--color--chartreuse); stroke: none; }

.ar-conn__svg text { fill: var(--ar-fg-soft); font: 700 var(--ar-conn-t) var(--wp--preset--font-family--display); letter-spacing: var(--wp--custom--tracking--wide); }

.ar-conn__svg .ar-conn__label--soft { fill: var(--ar-fg-muted); }

/* Nodes are HTML in a foreignObject: a name wraps by itself at any text size. */
.ar-conn__node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 0.5em;
  border: 2px solid var(--wp--preset--color--steel);
  border-radius: 6px;
  background-color: color-mix(in srgb, var(--wp--preset--color--graphite) 70%, transparent);
  color: var(--ar-fg);
  font: 700 var(--ar-conn-t) / 1.15 var(--wp--preset--font-family--display);
  text-align: center;
  text-wrap: balance;
}

.ar-conn__node--own { border-style: dashed; }
.ar-conn__node--car { align-items: flex-end; padding-bottom: 0.9em; border-color: var(--wp--preset--color--mist); }

/* A lane the chosen band does not use dims and stops flowing. */
.ar-conn__link.is-dim { opacity: 0.4; }
.ar-conn__link.is-dim .ar-conn__flow { visibility: hidden; }
.ar-motion .ar-conn__link { transition: opacity var(--wp--custom--duration--slow) var(--ar-ease-expo); }

/* Live indicator, like the live dot: dashes run from the controller to the vehicle. */
.ar-motion .ar-conn__link:not(.is-dim) .ar-conn__flow { animation: ar-conn-flow 800ms linear infinite; }

@keyframes ar-conn-flow { to { stroke-dashoffset: -20; } }