.hfl-flow-graph {
	margin-bottom: 22px;
}

.hfl-flow-graph__intro {
	margin: -4px 0 14px;
	font-size: 15px;
	line-height: 1.55;
	color: #555f6d;
}

.hfl-flow-graph__intro code { font-size: .9em; }
.hfl-flow-graph__viewport {
	overflow: auto;
	max-height: min( 72vh, 820px );
	border: 1px solid #dfe4ea;
	border-radius: 14px;
	background-color: #f7f9fc;
	background-image: radial-gradient( #d7dde6 1px, transparent 1px );
	background-size: 20px 20px;
	scrollbar-gutter: stable both-edges;
}
.hfl-flow-graph__canvas { position: relative; min-width: 100%; min-height: 500px; }
.hfl-flow-graph__edges { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; }
.hfl-flow-graph__edge { fill: none; stroke-width: 3; stroke-linecap: round; opacity: .95; }
.hfl-flow-graph__edge.is-success,
.hfl-flow-graph__edge.is-true { stroke: #0784ff; }
.hfl-flow-graph__edge.is-false { stroke: #f1b400; }
.hfl-flow-graph__edge.is-error { stroke: #e02626; }
.hfl-flow-graph__node { position: absolute; z-index: 2; width: 320px; padding: 0 18px 16px; border: 2px solid #d6dce4; border-radius: 17px; background: #fff; box-shadow: 0 7px 18px rgba( 31, 42, 55, .10 ); overflow: visible; box-sizing: border-box; }
.hfl-flow-graph__node.is-when { border-color: #7eafee; }
.hfl-flow-graph__node.is-and { border-color: #e0b754; }
.hfl-flow-graph__node.is-then,
.hfl-flow-graph__node.is-else { border-color: #9acb9c; }
.hfl-flow-graph__port {
	position: absolute;
	z-index: 6;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	box-shadow: 0 0 0 2px #fff;
	pointer-events: none;
	box-sizing: border-box;
}
.hfl-flow-graph__port.is-input {
	left: -5px;
	margin-top: -4.5px;
	background: #c7ccd5;
}
.hfl-flow-graph__port.is-output {
	right: -5px;
	margin-top: -4.5px;
}
.hfl-flow-graph__port.is-bottom {
	margin-left: -4.5px;
}
.hfl-flow-graph__port.is-success,
.hfl-flow-graph__port.is-true { background: #0784ff; }
.hfl-flow-graph__port.is-false { background: #f1b400; }
.hfl-flow-graph__port.is-error { background: #e02626; }
.hfl-flow-graph__node.is-connector {
	width: 86px;
	min-height: 54px;
	height: 54px;
	padding: 0;
	border: 0;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 4px 14px rgba( 31, 42, 55, .16 );
	overflow: visible;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #b8bdc8;
	font-size: 14px;
	font-weight: 800;
	font-style: italic;
	letter-spacing: .01em;
}
.hfl-flow-graph__node.is-connector strong { line-height: 1; }
.hfl-flow-graph__connector-dot {
	position: absolute;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-radius: 50%;
	background: #c7ccd5;
	box-shadow: 0 0 0 2px #fff;
}
.hfl-flow-graph__connector-dot.is-input { left: -4px; }
.hfl-flow-graph__connector-dot.is-output { right: -4px; background: #0784ff; }
.hfl-flow-graph__node-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 -18px 13px; padding: 9px 14px; background: #f2f5f8; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.hfl-flow-graph__node-head small { font-size: 11px; font-weight: 600; letter-spacing: 0; color: #697484; }
.hfl-flow-graph__node h5 { margin: 0 0 12px; font-size: 18px; line-height: 1.4; color: #1f2937; overflow-wrap: anywhere; }
.hfl-flow-graph__bindings { display: grid; gap: 8px; }
.hfl-flow-graph__binding { display: grid; grid-template-columns: minmax( 90px, .8fr ) minmax( 0, 1.5fr ); align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 1px solid #dfe4e9; border-radius: 9px; background: #fbfcfd; text-align: left; cursor: pointer; }
.hfl-flow-graph__binding span { font-size: 12px; font-weight: 700; color: #66717f; }
.hfl-flow-graph__binding strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: #202a36; }
.hfl-flow-graph__binding:hover,
.hfl-flow-graph__binding:focus-visible { border-color: var( --hfl-color-accent, #e8720c ); outline: none; }
.hfl-flow-graph__comparison { display: grid; gap: 8px; margin: 0 0 12px; padding: 10px; border: 1px solid #dde3ea; border-radius: 11px; background: #f8fafc; }
.hfl-flow-graph__comparison-operand { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.2fr ); gap: 7px; }
.hfl-flow-graph__comparison select,
.hfl-flow-graph__comparison input { width: 100%; min-width: 0; height: 34px; box-sizing: border-box; border: 1px solid #d4dae2; border-radius: 8px; background: #fff; color: #26313f; font: inherit; font-size: 12px; padding: 5px 7px; }
.hfl-flow-graph__comparison select:focus,
.hfl-flow-graph__comparison input:focus { border-color: #0784ff; outline: 2px solid rgba( 7, 132, 255, .16 ); }
.hfl-flow-graph__comparison-operator { text-align: center; color: #505b69; font-size: 12px; font-weight: 800; }
.hfl-flow-graph__comparison-source { display: flex; align-items: center; min-width: 0; height: 34px; box-sizing: border-box; padding: 5px 8px; border: 1px solid #d4dae2; border-radius: 8px; background: #fff; color: #354152; font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hfl-flow-graph__comparison-status { display: block; color: #697484; font-size: 11px; line-height: 1.35; }
.hfl-flow-graph__comparison-status.is-error { color: #a64545; }
.hfl-flow-graph__message { display: grid; gap: 6px; margin-top: 12px; }
.hfl-flow-graph__message span { font-size: 12px; font-weight: 800; color: #56616f; }
.hfl-flow-graph__message textarea { width: 100%; min-height: 72px; box-sizing: border-box; resize: vertical; padding: 9px 10px; border: 1px solid #d7dde4; border-radius: 9px; background: #fff; color: #1f2937; font: inherit; font-size: 13px; line-height: 1.45; }
.hfl-flow-graph__message textarea:focus { border-color: var( --hfl-color-accent, #e8720c ); outline: 2px solid color-mix(in srgb, var( --hfl-color-accent, #e8720c ) 24%, transparent); }
.hfl-flow-graph__notice { margin: 10px 0 14px; padding: 10px 12px; border-radius: 10px; background: #fff7e9; font-size: 14px; line-height: 1.5; color: #67522e; }
.hfl-flow-graph__mapping-focus { outline: 3px solid var( --hfl-color-accent, #e8720c ); outline-offset: 4px; }

@media ( max-width: 1100px ) {
	.hfl-flow-graph__viewport { max-height: 68vh; }
}

@media ( max-width: 700px ) {
	.hfl-flow-graph__viewport { max-height: 58vh; }
	.hfl-flow-graph__node:not(.is-connector) { width: 260px !important; }
	.hfl-flow-graph__binding,
	.hfl-flow-graph__comparison-operand { grid-template-columns: 1fr; gap: 5px; }
}