/* ThreadSync — island/bridge flow connectors (UI campaign item P2)
   External + fingerprinted by necessity: this site's CSP sets style-src 'self'
   with a single hash, so any inline <style> is silently dropped.

   ACCESSIBILITY CONTRACT — read before changing:
   every SVG here is decorative, aria-hidden="true" and focusable="false". The
   accessible description of this diagram is, and must remain, the real DOM text
   in .sov-node and .sov-bridge-line. Consult 20260801T091112Z found that
   wrapping this container in role="img" + aria-label caused assistive tech to
   suppress that text. Do not reintroduce a container label. */

.sov-flow-defs{position:absolute;width:0;height:0;overflow:hidden}

/* The flow variant replaces the flat 1px hairlines with gradient rails. */
.sov-bridge-line--flow::before,
.sov-bridge-line--flow::after{display:none !important}

.sov-bridge-line--flow{
  display:flex;
  align-items:center;
  gap:9px;
}

/* Rails stretch horizontally. Geometry is a <rect> with a gradient fill rather
   than a stroked <line>, so preserveAspectRatio="none" cannot distort it. */
.sov-flow-rail{
  flex:1 1 auto;
  min-width:18px;
  height:2px;
  display:block;
}

.sov-flow-arrow{
  flex:0 0 auto;
  width:9px;
  height:9px;
  display:block;
  opacity:.9;
}

/* Wide: the label must NOT shrink. Pairing flex-shrink with white-space:nowrap
   shrinks the box while the text keeps its full width, so the text spills over
   the following rail and reads as a strikethrough. Let the rails absorb the
   slack instead. */
.sov-bridge-line--flow > .sov-bridge-label{
  flex:0 0 auto;
  white-space:nowrap;
}

/* Narrow: now the label MUST be able to shrink, or it overflows the diagram.
   Safe here only because wrapping is enabled at the same time — min-width:0 is
   the part that actually lets a flex item narrow past its content width. */
@media (max-width:760px){
  .sov-flow-rail{min-width:0}
  .sov-bridge-line--flow{gap:7px}
  .sov-bridge-line--flow > .sov-bridge-label{
    flex:0 1 auto;
    min-width:0;
    white-space:normal;
    text-align:center;
  }
}

/* Decoration never survives a stated preference for less of it. */
@media (prefers-contrast:more){
  .sov-flow-rail,.sov-flow-arrow{opacity:.35}
}
@media (prefers-reduced-transparency:reduce){
  .sov-flow-rail,.sov-flow-arrow{opacity:.5}
}