/* Signal path Option B · Blueprint / Circuit (Vera). Restyle of A. Tokens only; scoped to [data-opt="B"]. */
.vth .flow-opt[data-opt="B"] .bp-frame { position: relative; padding: 10px 0 0 10px; background:
  repeating-linear-gradient(90deg, var(--border-main) 0 1px, transparent 1px 10px) top left / 100% 4px no-repeat,
  repeating-linear-gradient(90deg, var(--text-muted) 0 1px, transparent 1px 50px) top left / 100% 7px no-repeat,
  repeating-linear-gradient(180deg, var(--border-main) 0 1px, transparent 1px 10px) top left / 4px 100% no-repeat,
  repeating-linear-gradient(180deg, var(--text-muted) 0 1px, transparent 1px 50px) top left / 7px 100% no-repeat; }
.vth .flow-opt[data-opt="B"] .bp-svg { width: 100%; height: auto; display: block; }
.vth .flow-opt[data-opt="B"] .bp-svg * { vector-effect: non-scaling-stroke; }
.vth .flow-opt[data-opt="B"] .bp-svg .node { fill: var(--panel-bg-solid); stroke: var(--border-light); stroke-width: 1; }
.vth .flow-opt[data-opt="B"] .bp-svg .zone.on .node, .vth .flow-opt[data-opt="B"] .bp-svg .dev.on .node { fill: var(--panel-bg-solid); stroke: var(--accent-blue); stroke-width: 1; }
.vth .flow-opt[data-opt="B"] .bp-svg .bp-bar { fill: var(--border-main); transition: fill .25s; }
.vth .flow-opt[data-opt="B"] .bp-svg .bp-src-bar { fill: var(--accent-yellow); }
.vth .flow-opt[data-opt="B"] .bp-svg .zone.on .bp-bar { fill: var(--accent-blue); }
.vth .flow-opt[data-opt="B"] .bp-svg .dev.on .bp-bar { fill: var(--accent-green); }
.vth .flow-opt[data-opt="B"] .bp-svg .bp-br { font-size: 16px; fill: var(--border-main); }
.vth .flow-opt[data-opt="B"] .bp-svg .zone.on .bp-br, .vth .flow-opt[data-opt="B"] .bp-svg .zone:hover .bp-br, .vth .flow-opt[data-opt="B"] .bp-svg .zone:focus-visible .bp-br { fill: var(--accent-blue); }
.vth .flow-opt[data-opt="B"] .bp-svg .wire { stroke: var(--text-muted); stroke-dasharray: 1 4; opacity: .5; animation: none; }
.vth .flow-opt[data-opt="B"] .bp-svg.has-sel .wire:not(.on) { opacity: .35; }
.vth .flow-opt[data-opt="B"] .bp-svg .wire.on { stroke: var(--accent-blue); stroke-width: 3.5; stroke-dasharray: none; stroke-linecap: round; opacity: 1; }
.vth .flow-opt[data-opt="B"] .bp-svg .bp-sweep { fill: none; stroke: var(--bg-color); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 18 900; opacity: 0; }
.vth .flow-opt[data-opt="B"] .bp-svg .bp-sweep.on { opacity: .85; animation: bp-sweep 1.6s linear infinite; }
.vth .flow-opt[data-opt="B"] .bp-svg .bp-jn { fill: var(--bg-color); stroke: var(--text-muted); stroke-width: 1; }
.vth .flow-opt[data-opt="B"] .bp-svg .bp-jn.on { fill: var(--accent-blue); stroke: var(--accent-blue); }
.vth .flow-opt[data-opt="B"] .bp-svg .pulse { animation: none; }
.vth .flow-opt[data-opt="B"] .bp-svg .bp-seg { fill: var(--border-light); stroke: var(--border-main); stroke-width: .5; }
.vth .flow-opt[data-opt="B"] .bp-svg .dev.on .bp-seg { fill: var(--accent-green); stroke: var(--accent-green); animation: bp-lvl .9s ease-in-out infinite alternate; }
.vth .flow-opt[data-opt="B"] .bp-svg .bp-tag { font-size: 7px; letter-spacing: 1px; fill: var(--text-muted); }
.vth .flow-opt[data-opt="B"] .bp-svg .dev.on .bp-tag { fill: var(--accent-green); }
@keyframes bp-sweep { from { stroke-dashoffset: 18; } to { stroke-dashoffset: -400; } }
@keyframes bp-lvl { from { opacity: .3; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vth .flow-opt[data-opt="B"] .bp-svg * { animation: none !important; } }
/* FAQ accordions (Vera) */
.vth .vth-next { margin-top: 0; }
.vth .faq .faq-list details { border-bottom: 1px dotted var(--border-main); }
.vth .faq .faq-list details:last-child { border-bottom: 0; }
.vth .faq summary { list-style: none; cursor: pointer; display: flex; gap: 10px; align-items: baseline; padding: 10px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dark); line-height: 1.5; }
.vth .faq summary::-webkit-details-marker { display: none; }
.vth .faq summary::before { content: "[+]"; color: var(--accent-blue); flex: none; font-weight: 700; }
.vth .faq details[open] summary { color: var(--accent-blue); }
.vth .faq details[open] summary::before { content: "[\2212]"; }
.vth .faq summary:hover, .vth .faq summary:focus-visible { color: var(--accent-blue); outline: none; }
.vth .faq summary:focus-visible::before { outline: 1px dashed var(--accent-blue); outline-offset: 2px; }
.vth .faq details p { margin: 0 0 12px 34px; font-size: 13px; line-height: 1.55; color: var(--text-muted); }
@media (max-width: 520px) { .vth .faq details p { margin-left: 0; } }
.vth .faq .faq-list details > p { font-size: 12px; line-height: 1.6; max-width: 62ch; }