/* /applications/technology-integration/ — Draft F additions: the "how the pieces connect" architecture diagram
 * (idea from Draft B, redrawn as a friendly diagram on F's tokens). Loaded after outcomes.css. */

.ti-arch { margin: 0; background: var(--paper-2); border-radius: var(--radius); padding: clamp(20px, 3vw, 40px); }
.ti-arch__flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.ti-node { position: relative; display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1.5px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 16px 18px; }
.ti-node.is-you { border-color: var(--red); }
.ti-node b { font: 600 17px/1.25 var(--display); color: var(--ink); }
.ti-node > span:not(.ti-node__icon) { font-size: 14.5px; line-height: 1.45; color: var(--body); }
.ti-node em { margin-top: auto; align-self: flex-start; white-space: nowrap; font-style: normal; font-size: 13px; font-weight: 600; color: var(--red-dark); background: var(--red-soft); border-radius: 999px; padding: 4px 10px; }
.ti-node__icon { display: block; width: 40px; height: 40px; margin-bottom: 6px; }
.ti-node__icon svg { width: 40px; height: 40px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ti-node__icon .r { fill: var(--red); stroke: none; }
.ti-node__icon .g { fill: var(--safe); stroke: none; }
.ti-node__icon .s { stroke: var(--red); }

/* Connector arrows between nodes */
.ti-node:not(:last-child)::after {
	content: ""; position: absolute; top: 38px; right: -24px; width: 20px; height: 12px;
	background: no-repeat center / 20px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%23626a76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h16M12 1l5 5-5 5'/%3E%3C/svg%3E");
}

/* The vehicle loop */
.ti-loop { margin-top: clamp(24px, 3vw, 36px); background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px clamp(16px, 2.4vw, 28px); }
.oc .ti-loop__title { margin: 0 0 14px; font: 600 17px/1.3 var(--display); color: var(--ink); }
.ti-loop__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.ti-loop__steps li { position: relative; display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 1.35; color: var(--ink); background: var(--red-soft); border-radius: 999px; padding: 10px 16px 10px 10px; }
.ti-loop__steps li.is-safe { background: var(--safe-soft); }
.ti-loop__n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; font: 600 13px/1 var(--display); }
.is-safe .ti-loop__n { background: var(--safe); }
.ti-loop__steps li:not(:last-child)::after {
	content: ""; position: absolute; top: 50%; right: -24px; width: 20px; height: 12px; margin-top: -6px;
	background: no-repeat center / 20px 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12' fill='none' stroke='%23626a76' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h16M12 1l5 5-5 5'/%3E%3C/svg%3E");
}
.ti-arch figcaption { margin-top: 16px; font-size: 14px; line-height: 1.5; color: var(--mute); max-width: 70ch; }

@media (max-width: 1080px) {
	.ti-loop__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ti-loop__steps li:nth-child(2)::after { display: none; }
}
/* Stack vertically on narrow screens, arrows pointing down */
@media (max-width: 860px) {
	.ti-arch__flow, .ti-loop__steps { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.ti-node { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: start; }
	.ti-node__icon { grid-row: span 3; margin: 0; }
	.ti-node em { margin-top: 4px; }
	.ti-node:not(:last-child)::after, .ti-loop__steps li:not(:last-child)::after, .ti-loop__steps li:nth-child(2)::after {
		display: block; top: auto; bottom: -21px; right: auto; left: 50%; margin: 0 0 0 -10px; transform: rotate(90deg);
	}
	.ti-node:not(:last-child)::after { left: 34px; }
	.ti-loop__steps li:not(:last-child)::after { left: 23px; bottom: -20px; }
}