/* ---------- Cooperation page: title + flowchart ---------- */

/* chart: inline SVG, one wide layout and one tall layout (swap at 48rem) */
.chart { --chart-line: color-mix(in oklch, var(--color-ink) 38%, transparent); margin: 0; padding: clamp(0.75rem, 3vw, 2.5rem); border: 1px solid var(--color-rule); border-radius: 1.5rem 0 1.5rem 0; background: linear-gradient(var(--rule-blueprint) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, var(--rule-blueprint) 1px, transparent 1px) 0 0 / 24px 24px, var(--color-paper-2); }
.chart__svg { display: block; width: 100%; height: auto; max-width: 62rem; margin-inline: auto; overflow: visible; }
.chart__svg--wide { display: none; }
@media (min-width: 48rem) { .chart__svg--wide { display: block; } .chart__svg--tall { display: none; } }
@media (max-width: 47.99rem) { .chart__svg--tall { max-width: 26rem; } }

.chart text { font-family: var(--font-body); font-size: 15px; font-weight: 500; fill: var(--color-ink); text-anchor: middle; dominant-baseline: central; }
.chart .edge { fill: none; stroke: var(--chart-line); stroke-width: 2; stroke-linejoin: round; }
.chart .edge--next { stroke: var(--color-accent); }
.chart marker path { fill: var(--chart-line); }
.chart .node rect { fill: var(--color-paper); stroke: var(--chart-line); stroke-width: 1.5; }
.chart .node--pill rect { fill: var(--color-paper-3); }
.chart .branch--project .card { fill: color-mix(in oklch, var(--color-accent) 9%, var(--color-paper)); stroke: var(--color-accent); stroke-width: 2; }
.chart .branch--lab .card { fill: color-mix(in oklch, var(--color-navy-deep) 9%, var(--color-paper)); stroke: var(--color-navy-deep); stroke-width: 2; }
.chart .node--merge rect { fill: var(--color-navy-deep); stroke: var(--color-navy-deep); }
.chart .node--merge text { fill: var(--color-accent-ink); }
.chart .node--merge text.small { font: 500 11px/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.85; }
.chart .node--merge text.strong { font-weight: 600; font-size: 17px; }

/* hover / focus one branch: the other dims (needs :has, ignored where unsupported) */
.chart .branch { outline: none; transition: opacity var(--dur-mid) var(--ease-out); }
.chart__svg:has(.branch--project:hover, .branch--project:focus-visible) .branch--lab,
.chart__svg:has(.branch--lab:hover, .branch--lab:focus-visible) .branch--project { opacity: 0.4; }
.chart .branch:focus-visible .card { stroke-width: 3; }
@media (prefers-reduced-motion: reduce) { .chart .branch { transition: none; } }

/* card text inside the SVG (foreignObject) */
.chart__card { display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; height: 100%; padding: 0 1.25rem; box-sizing: border-box; font-family: var(--font-body); color: var(--color-ink-2); }
.chart__card strong { font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--color-navy-text); }
.chart__card span { font-size: 14px; line-height: 1.6; }