/* RFQ Pilot 1.18: the block diagram per PCB (React Flow), the revamped RFQ inputs, and stress and DFMEA as in the Design Blocks circuit page */

/* ---------- canvas ---------- */
.cvf .cvbar { gap: 6px }
.cvf .cvbar .small[aria-pressed="true"] { background: var(--sunk) }
.cvf-tabs { display: flex; gap: 2px; padding: 6px 12px 0; background: var(--surface); border-bottom: 1px solid var(--line); overflow-x: auto; flex: none }
.cvf-tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 14px 7px; border: 1px solid transparent; border-bottom: 0; border-radius: 8px 8px 0 0; background: transparent; color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; min-width: 120px; margin-bottom: -1px; text-align: left }
.cvf-tabs button span { font-size: 11.5px; color: var(--muted); white-space: nowrap }
.cvf-tabs button:hover { background: var(--sunk) }
.cvf-tabs button[aria-selected="true"] { background: var(--bg); border-color: var(--line) }
.cvf-tabs button.fail b::after, .cvf-tabs button.warn b::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--crit); margin-left: 6px; vertical-align: middle }
.cvf-tabs button.warn b::after { background: var(--warn) }
.cvf-main { flex: 1; min-width: 0; position: relative; background: var(--bg) }
.cvf-flow { position: absolute; inset: 0 }
.cvf-legend { position: absolute; left: 12px; bottom: 10px; display: flex; gap: 12px; font-size: 11.5px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; pointer-events: none; z-index: 5 }
.cvf-legend span { display: inline-flex; align-items: center; gap: 5px } .cvf-legend i { width: 16px; height: 3px; border-radius: 2px; display: inline-block }
.cvf-legend .k-pwr { background: #B4472A } .cvf-legend .k-led { background: #D98A00 } .cvf-legend .k-sig { background: repeating-linear-gradient(90deg, #2F6FB0 0 4px, transparent 4px 7px) } .cvf-legend .k-ctl { background: repeating-linear-gradient(90deg, #2F6FB0 0 4px, transparent 4px 7px); opacity: .7 } .cvf-legend .k-bus { background: repeating-linear-gradient(90deg, #7B4BB7 0 2px, transparent 2px 5px) }
.cvf-pal { width: 252px }
.cvf-palh { display: flex; flex-direction: column; gap: 6px; position: sticky; top: -8px; background: var(--surface); padding: 6px 0 6px; z-index: 1 }
.cvf-palh b { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted) }
.cvf-palh input { width: 100%; box-sizing: border-box }
.cvf-pnote { font-size: 12px; margin: 2px 0 8px }
.cvf-pg { margin: 8px 0 4px } .cvf-pgh { font-size: 11.5px; font-weight: 600; color: var(--muted); margin: 0 0 4px; display: flex; gap: 6px; align-items: center }
.cvf-pg.fit .cvf-pi { border-color: var(--good) }
.cvf-pi { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); margin-bottom: 4px; cursor: grab; font-size: 12.5px }
.cvf-pi:hover { border-color: var(--lamp) } .cvf-pi.cur { background: var(--sunk) }
.cvf-pi .chip { flex: none } .cvf-pin { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25 } .cvf-pin small { color: var(--muted); font-size: 11px }
.cvf-pi button { flex: none }
.cvf-sh { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 4px }
.cvf .cvside h4 { margin-top: 12px }
.cvf-list { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px }
.cvf-act { margin: 10px 0 4px; gap: 6px; flex-wrap: wrap; align-items: center }
.cvf-act button.on { background: var(--sunk) }
.cvf-conn { border: 1px solid var(--line); border-radius: 8px; padding: 8px; margin: 6px 0; display: flex; flex-direction: column; gap: 8px; background: var(--bg) }
.cvf-cg { display: flex; flex-direction: column; gap: 3px } .cvf-cg > b { font-size: 12px }
.cvf-ci { text-align: left; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 12.5px; cursor: pointer }
.cvf-ci:hover { border-color: var(--lamp) }
.cvf .cvopt.bad { opacity: .85 }
.cvf-bad summary { cursor: pointer; font-size: 12.5px; color: var(--crit); margin: 6px 0 }
table.mini2 { font-size: 12px } table.mini2 td, table.mini2 th { padding: 3px 6px }

/* cards drawn by React Flow */
.cvf .react-flow { --xy-node-border-radius: 10px; background: var(--bg) }
.cvf .react-flow__node { cursor: pointer }
.cvf .react-flow__node.draggable { cursor: grab }
.rfn { position: relative; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-left: 5px solid #9AA6B2; border-radius: 10px; padding: 8px 10px 0 10px; font-size: 12px; box-sizing: border-box; box-shadow: 0 1px 2px rgba(22, 32, 43, .07); font-family: var(--f-body, inherit) }
.rfn > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.rfn.drv { box-shadow: 0 1px 3px rgba(22, 32, 43, .12) }
.rfn.sel { outline: 2px solid var(--ink); outline-offset: 1px }
.rfn.m-fail { border-color: var(--crit); border-left-color: var(--crit) !important; background: color-mix(in srgb, var(--crit) 5%, var(--surface)) }
.rfn.m-warn { border-color: var(--warn) }
.rfn-top { display: flex; align-items: center; gap: 6px; height: 18px }
.rfn-code { font-family: var(--f-mono, ui-monospace, monospace); font-size: 11px; font-weight: 600; background: var(--sunk); border-radius: 4px; padding: 0 5px; line-height: 16px }
.rfn-bad { display: inline-flex; width: 15px; height: 15px; border-radius: 50%; align-items: center; justify-content: center; color: #fff; background: var(--crit); font-weight: 700; font-size: 11px }
.rfn-bad.warn { background: var(--warn) }
.rfn-tag { font-size: 10.5px; color: #2F6FB0; border: 1px solid currentColor; border-radius: 99px; padding: 0 5px; line-height: 14px }
.rfn-pcb { font-size: 10.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: 0 5px; line-height: 14px }
.rfn-cost { margin-left: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums }
.rfn-title { font-weight: 600; font-size: 13px; line-height: 18px }
.rfn-sub { color: var(--muted); font-size: 11.5px; line-height: 16px }
.rfn-mono { font-family: var(--f-mono, ui-monospace, monospace); font-size: 11px; line-height: 16px; color: var(--ink) }
.rfn-att { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; white-space: normal !important }
.rfn-chip { font-family: var(--f-mono, ui-monospace, monospace); font-size: 11px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 6px; padding: 1px 6px; height: 20px; cursor: pointer }
.rfn-chip:hover { border-color: var(--lamp) } .rfn-chip.on { outline: 2px solid var(--ink) } .rfn-chip.m-fail { border-color: var(--crit); color: var(--crit) } .rfn-chip.m-warn { border-color: var(--warn) }
.rfn-leds { display: flex; flex-direction: column; gap: 3px; padding-top: 2px } .rfn-str { display: flex; gap: 3px; height: 9px; align-items: center; position: relative } .rfn-str i { width: 8px; height: 2px; background: #B7791F; margin-right: 1px } .rfn-leds span { width: 9px; height: 9px; border-radius: 50%; background: #F2A20C; border: 1px solid #8A5A00; box-sizing: border-box } .rfn-leds em { font-size: 10.5px; color: var(--muted); font-style: normal; margin-left: 2px; line-height: 10px } .rfn-leds .rfn-more { margin-left: 0 } .rfn-leds.mx .rfn-str i { background: #2F6FB0 }
.rfn.conn { border-left-width: 1px; border-style: solid; background: var(--surface); padding-top: 8px }
.rfn.conn.cl { border-right: 5px solid #5A6774 } .rfn.conn.cr { border-left: 5px solid #5A6774 }
.rfn-pins { margin-top: 4px; overflow: visible !important; white-space: normal !important }
.rfn-pin { display: flex; align-items: center; gap: 6px; height: 22px; font-size: 11.5px; border-top: 1px dashed var(--line); color: var(--muted) }
.rfn-pin.used { color: var(--ink) } .rfn-pin.extra { color: var(--warn) }
.rfn-pin i { width: 8px; height: 8px; border-radius: 2px; flex: none } .rfn-pin .mono { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .rfn-pin em { font-style: normal; font-size: 10.5px; color: var(--muted); flex: none }
.cvf .react-flow__handle.rf-h { width: 12px; height: 12px; min-width: 0; min-height: 0; border: 2px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px rgba(22, 32, 43, .25) }
.cvf .react-flow__handle.rf-h:hover { transform: translate(-50%, -50%) scale(1.35) }
.cvf .react-flow__handle.rf-h.react-flow__handle-right:hover { transform: translate(50%, -50%) scale(1.35) }
.cvf .react-flow__handle.rf-pin { width: 8px; height: 8px; min-width: 0; min-height: 0; border: 1.5px solid var(--surface); border-radius: 2px; cursor: default }
.cvf .react-flow__handle.connectingto, .cvf .react-flow__handle.valid { box-shadow: 0 0 0 3px var(--good) }
.cvf .react-flow__edge.selected path.react-flow__edge-path { filter: drop-shadow(0 0 2px rgba(22, 32, 43, .6)) }
.cvf .react-flow__minimap { border: 1px solid var(--line); border-radius: 6px }
.cvf-act label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted) }
.cvf-act select { font-size: 12.5px; padding: 3px 6px }
.cvf-ports { margin-top: 12px; font-size: 12.5px } .cvf-ports summary { cursor: pointer; font-weight: 600; color: var(--ink) }

/* ---------- stress and DFMEA, as on the Design Blocks circuit page ---------- */
.cp-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; margin: 4px 0 }
.cp-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.cp-tile span, .cp-tile small { font-size: 12px; color: var(--muted); overflow-wrap: anywhere }
.cp-tile b { font-family: var(--f-head); font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums }
.cp-tile.good { border-left: 3px solid var(--good) } .cp-tile.warn { border-left: 3px solid var(--warn) } .cp-tile.crit { border-left: 3px solid var(--crit) }
.cp-bar { position: relative; height: 8px; background: var(--sunk); border-radius: 4px; min-width: 110px; margin: 4px 0 3px }
.cp-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--good) }
.cp-bar i.warn { background: var(--warn) } .cp-bar i.fail { background: var(--crit) }
.cp-bar s { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); text-decoration: none }
table.cp-stress td { white-space: normal; vertical-align: top } table.cp-stress td:nth-child(2) { min-width: 200px } table.cp-stress td:nth-child(5) { min-width: 170px }
table.cp-stress td:first-child { min-width: 170px } table.cp-stress tr.grp td { background: var(--sunk); font-weight: 600 }
table.cp-stress tr.rx-more td { border-top-color: transparent }
tr.cp-ch td { background: color-mix(in srgb, var(--lamp) 12%, var(--surface)) }
.cp-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; align-self: flex-start }
.cp-seg button { border: 0; border-radius: 0; padding: 8px 14px; min-height: 36px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer }
.cp-seg button + button { border-left: 1px solid var(--line) }
.cp-seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface) }
.pills button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink) }
.cp-fmea td { font-size: 12.5px; vertical-align: top } .cp-fmea td.lsd { white-space: normal; min-width: 170px }
table.cp-stress td.num { white-space: nowrap }

/* ---------- RFQ inputs ---------- */
main:has(> .rq), main:has(.rq) { max-width: 1440px }
.rq { display: flex; gap: 20px; align-items: flex-start }
.rq-side { flex: 0 0 236px; position: sticky; top: 60px; max-height: calc(100vh - 76px); overflow: auto }
.rq-main { flex: 1; min-width: 0 }
.rtabs.rq-nav { position: static; flex-direction: column; gap: 2px; overflow: visible; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 8px; margin: 0 }
.rq-nav .rtg { padding: 8px 10px 4px !important; font-size: 10.5px }
.rq-nav button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 8px; color: var(--ink); font-size: 14px; white-space: normal }
.rq-nav button:hover { background: var(--sunk) }
.rq-nav button.on { background: color-mix(in srgb, var(--lamp) 16%, var(--surface)); border-color: transparent; box-shadow: none; font-weight: 600 }
.rq-n { flex: 0 0 22px; height: 22px; border-radius: 11px; background: var(--sunk); font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center }
.rq-nav button.on .rq-n { background: var(--lamp); color: var(--lamp-ink) }
.panel:has(> .rq-step) { background: transparent; border: 0; padding: 0; gap: 14px }
.panel:has(> .rq-step) > h3 { font-size: 22px; margin: 0 }
.rq-lead { margin: -8px 0 2px; color: var(--muted); font-size: 14px }
.rq-step { display: flex; flex-direction: column; gap: 14px }
.rq-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.rq-ch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px } .rq-ch h4 { margin: 0; font-size: 16px }
.rq-sub { margin: -6px 0 0; font-size: 13px; color: var(--muted) }
.rq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 16px; align-items: start }
.rq-f { display: flex; flex-direction: column; gap: 5px; min-width: 0 } .rq-f.wide { grid-column: 1 / -1 }
.rq-l { font-size: 13px; font-weight: 600; color: var(--ink) } .rq-req { color: var(--crit) }
.rq-f input[type=text], .rq-f input[type=number], .rq-f input:not([type]), .rq-f select { height: 40px; border-radius: 8px; width: 100%; box-sizing: border-box }
.rq-u { position: relative } .rq-u input { padding-right: 52px !important; width: 100%; box-sizing: border-box } .rq-u span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--muted); pointer-events: none }
.rq-h { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.4 }
.rq-seg { display: flex; flex-wrap: wrap; gap: 6px }
.rq-seg label { position: relative; display: inline-flex; flex-direction: column; justify-content: center; min-height: 36px; padding: 4px 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); font-size: 13px; cursor: pointer; color: var(--ink) }
.rq-seg label b { font-weight: 500 } .rq-seg label small { font-size: 12px; color: var(--muted) }
.rq-seg label:hover { border-color: var(--lamp) }
.rq-seg label.on { background: var(--ink); border-color: var(--ink); color: var(--surface) } .rq-seg label.on small { color: color-mix(in srgb, var(--surface) 75%, transparent) }
.rq-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none }
.rq-seg label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px }
.rq-seg.big { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) } .rq-seg.big label { border-radius: 10px; padding: 10px 14px; align-items: flex-start } .rq-seg.big label b { font-weight: 600 }
.rq-chk { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; min-height: 36px; margin-right: 18px; cursor: pointer } .rq-chk input { width: 17px; height: 17px }
.rq-chks { flex-direction: row; flex-wrap: wrap }
.rq-miss { font-size: 11.5px; font-weight: 600; color: #fff; background: var(--crit); border-radius: 10px; padding: 1px 8px; white-space: nowrap }
.rq-ok { font-size: 11.5px; color: var(--good); white-space: nowrap }
.rq-chg { font-size: 11.5px; font-weight: 500; color: var(--warn); background: color-mix(in srgb, var(--lamp) 16%, var(--surface)); border-radius: 8px; padding: 1px 7px; margin-left: 4px }
.rq-tip { margin: 0; font-size: 13px; background: var(--sunk); border-radius: 8px; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center }
.rq-sheet { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; border: 1px dashed var(--lamp); background: color-mix(in srgb, var(--lamp) 7%, var(--surface)); border-radius: 12px; padding: 14px 18px }
.rq-presets { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.rq-chip { min-height: 34px; padding: 0 13px; border-radius: 17px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; cursor: pointer; color: var(--ink) }
.rq-chip:hover { border-color: var(--lamp) } .rq-chip.dim { color: var(--muted) } .rq-chip.dash { border-style: dashed }
.rq-two { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap }
.rq-flist { flex: 1 1 220px; max-width: 270px; display: flex; flex-direction: column; gap: 8px; position: sticky; top: 64px }
.rq-fed { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 14px }
.rq-fi { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; color: var(--ink) }
.rq-fi:hover { border-color: var(--lamp) } .rq-fi.on { border: 2px solid var(--lamp); padding: 11px 13px; background: color-mix(in srgb, var(--lamp) 6%, var(--surface)) }
.rq-fit { display: flex; justify-content: space-between; gap: 8px; align-items: center } .rq-fit b { font-size: 15px }
.rq-fis { font-size: 12px; color: var(--muted) } .rq-fim { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.rq-fhead { padding: 14px 20px } .rq-fhr { flex-direction: row; align-items: center; justify-content: flex-end; gap: 10px; align-self: end; min-height: 40px }
.rq-more summary, .rq-sum { cursor: pointer; font-size: 13px; color: var(--accent); font-weight: 500 }
.rq-q { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 12px }
.rq-q:first-child { border-top: 0; padding-top: 0 } .rq-q > span:first-child, .rq-q > label:first-child { font-size: 14px; flex: 1 1 280px }
.rq-ptabs { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch }
.rq-ptab { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; color: var(--ink); min-width: 140px; text-align: left }
.rq-ptab span { font-size: 12px; color: var(--muted) } .rq-ptab .rq-miss { color: #fff } .rq-ptab.on { border: 2px solid var(--lamp); padding: 8px 13px }
.rq-cx { align-items: end }
.rq-search input { width: 100%; max-width: 360px; height: 40px; border-radius: 8px; box-sizing: border-box }
.rq-next { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap }
@media (max-width: 900px) { .rq { flex-direction: column; align-items: stretch } .rq-main { width: 100% } .rq-side { position: static; flex: none; width: 100%; max-height: none } .rtabs.rq-nav { flex-direction: row; flex-wrap: wrap } .rq-nav button { width: auto } .rq-flist { position: static; max-width: none } }
.rq-fi { align-items: stretch !important; justify-content: flex-start !important } .rq-fi > span { text-align: left; width: 100% }
.rq-rg .rq-grid { align-items: end }

/* ---------- Diagrams page: the per-PCB drawing, view only ---------- */
.bdv-tabs { border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; margin-bottom: -12px; padding-top: 6px }
.bdv-tabs:empty { display: none }
.bdv-wrap { position: relative; height: 540px; border: 1px solid var(--line); border-radius: 0 0 10px 10px; overflow: hidden; background: var(--bg) }
.bdv-flow { position: absolute; inset: 0 }
.bdv-tools { position: absolute; right: 10px; top: 10px; display: flex; gap: 4px; z-index: 5 } .bdv-tools button { background: var(--surface) }
.bdv-seg button { padding: 5px 12px; min-height: 30px; font-size: 13px }
.bdv-wrap .react-flow__handle { pointer-events: none }

/* ---------- canvas on a phone or narrow window: blocks behind a button, the panel under the drawing ---------- */
.cvf-palbtn { display: none }
@media (max-width: 820px) {
  .cvf .cvbar { padding: 6px 8px } .cvf .cvbar > b { width: 100% } .cvf .cvbar .grow { display: none }
  .cvf-palbtn { display: inline-flex }
  .cvf .cvbody { flex-direction: column; position: relative }
  .cvf .cvf-pal { display: none; position: absolute; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 20; box-shadow: 4px 0 16px rgba(0, 0, 0, .2) }
  .cvf.palopen .cvf-pal { display: block }
  .cvf .cvf-main { flex: 1 1 auto; min-height: 52vh }
  .cvf .cvside { width: auto; flex: 0 0 auto; max-height: 38vh; border-left: 0; border-top: 1px solid var(--line) }
  .cvf .cvhint { display: none }
  .cvf-legend { display: none }
  .bdv-wrap { height: 440px }
}
.cvf-tabs button { flex: none; min-width: max-content }
.cvf .react-flow__minimap { background: var(--surface) }
.cvf .react-flow__minimap-mask { fill: color-mix(in srgb, var(--bg) 70%, transparent) }
@media (max-width: 820px) { .cvf .react-flow__minimap { display: none } .cvf-tabs button { padding: 5px 10px 6px } }
/* single sheet: PCB frames behind their blocks, cables between connectors */
.react-flow__node-frame { pointer-events: none !important; cursor: default !important }
.rf-frame { border: 2px dashed color-mix(in srgb, var(--muted) 55%, transparent); border-radius: 14px; box-sizing: border-box; background: transparent }
.rf-frame.m-fail { border-color: color-mix(in srgb, var(--crit) 70%, transparent) }
.rf-frame-t { position: absolute; left: 14px; top: 10px; display: flex; gap: 10px; align-items: baseline; font-size: 15px; color: var(--ink) } .rf-frame-t span { font-size: 12px; color: var(--muted) }
.cvf .react-flow__handle.rf-cab { width: 10px; height: 14px; min-width: 0; border-radius: 3px; background: #5A6774; border: 2px solid var(--surface) }
.bdv-wrap.sheet { height: 760px; border-radius: 10px }
@media (max-width: 820px) { .bdv-wrap.sheet { height: 560px } }
.cvf .react-flow__edge-textbg { fill: var(--surface) } .cvf .react-flow__edge-text { fill: var(--ink) }
/* 1.22.5: port names in the canvas cards */
.cvf .rfn-pl, .rfn-pl { position: absolute; font-size: 10px; line-height: 14px; max-width: calc(50% - 12px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; pointer-events: none; opacity: .9 }
.rfn-pl.in { left: 9px; text-align: left }
.rfn-pl.out { right: 9px; text-align: right }
/* 1.22.5: section colour legend */
.seclg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin: 6px 0 10px }
.seclg span { display: inline-flex; align-items: center; gap: 6px } .seclg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block }
.secdot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: 0 }
.rq-anim { color: color-mix(in srgb, #7a3fd0 70%, var(--ink)); letter-spacing: .02em; }   /* 1.26.2: animation state in the function table */
/* 1.26.8: step 2, Vehicle connector */
.vc-bus { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px }
.vc-t td { vertical-align: top }
.vc-t td:nth-child(2) select { min-width: 190px }
.vc-d { display: flex; flex-wrap: wrap; gap: 6px 14px }
.vc-f { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); min-width: 120px }
.vc-f .rq-u, .vc-f select, .vc-f input { color: var(--ink, inherit) }
.vc-f small { font-size: 11px; max-width: 220px }
.vc-tag { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap }
.vc-pwr { color: #B4472A } .vc-sig { color: #2F6FB0 } .vc-bus { } .vc-tag.vc-bus { color: #7B4BB7 } .vc-gnd { color: #5A6774 }
.vc-f .rq-u { width: 150px }
.vc-f select { width: auto; max-width: 240px }
.vc-f > input { width: 150px }
.vc-t td:first-child input { width: 110px }