/**
 * Diagrams: the report's graphics drawn in code (includes/raskin/diagrams.php).
 *
 * Each figure holds two drawings and decides by its own width which one
 * shows: the wide one as printed, the compact one, with the key under it,
 * where the labels beside it would shrink below about 13px. The hub turns
 * compact under 720px, the focus areas under 640px; in Stakeholders &
 * Mission's 5/7 aside the hub is 780px wide from a 1440px window.
 *
 * The entrance: diagram.js marks the figure pending, then in view, and each
 * part runs its keyframes after the delay its style attribute sets (--d;
 * --t, a sweep's duration). Without the script, or with reduced motion, the
 * figure is never pending and shows its final state. See
 * docs/association.md, "The two diagrams", and the style guide's Images page.
 */

.sba-c .sba-dg,
.sba-dg {
	margin: 0;
	container-type: inline-size;
	color: var(--sba-charcoal);
	font-family: var(--sba-font-sans);
}

.sba-dg .sba-dg-svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.sba-dg .sba-dg-svg text {
	fill: currentColor;
}

/* ---- Which drawing ---------------------------------------------------------- */

.sba-dg .sba-dg-compact,
.sba-dg .sba-dg-compact-heading {
	display: none;
}

/* The key: for screen readers beside the wide drawing (an SVG with role
   img hides its text), in view under the compact one. */
.sba-dg .sba-dg-key,
.sba-dg .sba-dg-only-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@container (max-width: 719.98px) {
	.sba-dg-hub .sba-dg-wide {
		display: none;
	}

	.sba-dg-hub .sba-dg-compact {
		display: block;
	}

	.sba-dg-hub .sba-dg-key {
		position: static;
		width: auto;
		height: auto;
		margin: 24px 0 0;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}
}

@container (max-width: 639.98px) {
	.sba-dg-focus .sba-dg-wide {
		display: none;
	}

	.sba-dg-focus .sba-dg-compact,
	.sba-dg-focus .sba-dg-compact-heading {
		display: block;
	}

	.sba-dg-focus .sba-dg-key {
		position: static;
		width: auto;
		height: auto;
		margin: 24px 0 0;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}
}

/* ---- The hub ---------------------------------------------------------------- */

.sba-dg .sba-dg-hub-group,
.sba-dg .sba-dg-hub-center {
	font-weight: 700;
}

.sba-dg .sba-dg-hub-center {
	letter-spacing: -0.02em;
}

.sba-dg .sba-dg-leader {
	fill: none;
	stroke: var(--sba-slate-light);
	stroke-width: 2.5;
}

/* ---- The focus areas -------------------------------------------------------- */

.sba-dg .sba-dg-slide text,
.sba-dg .sba-dg-focus-segment,
.sba-dg .sba-dg-focus-number,
.sba-dg .sba-dg-focus-ring-name {
	font-weight: 700;
}

.sba-dg .sba-dg-svg :is(.sba-dg-slide text, .sba-dg-focus-ring-name) {
	fill: #fff;
}

.sba-dg .sba-dg-svg .sba-dg-focus-number {
	fill: var(--sba-charcoal);
}

.sba-dg .sba-dg-compact-heading {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 28px;
	text-align: center;
}

/* ---- The key and the legend ------------------------------------------------- */

.sba-dg .sba-dg-key ul,
.sba-dg .sba-dg-key ol,
.sba-dg .sba-dg-legend {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sba-dg .sba-dg-key,
.sba-dg .sba-dg-legend {
	font-size: 14px;
	line-height: 20px;
}

.sba-dg .sba-dg-key-groups {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 20px 24px;
}

.sba-dg .sba-dg-key-term,
.sba-dg .sba-dg-key-heading {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
}

.sba-dg .sba-dg-key-groups ul {
	display: grid;
	gap: 4px;
	margin-top: 8px;
}

.sba-dg .sba-dg-key li li,
.sba-dg .sba-dg-key-segments li,
.sba-dg .sba-dg-legend li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sba-dg .sba-dg-swatch {
	flex: none;
	width: 12px;
	height: 12px;
	border-radius: 3px;
}

.sba-dg .sba-dg-swatch-bar {
	width: 4px;
	height: 16px;
	border-radius: 2px;
}

.sba-dg .sba-dg-key-segments {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 16px;
	margin-top: 12px;
}

.sba-dg .sba-dg-number {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
}

/* The legend, as printed: two columns under the circle, a large swatch
   beside each; one column under the compact drawing. */
.sba-dg .sba-dg-legend {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 32px;
	margin-top: 24px;
	color: var(--sba-slate);
}

.sba-dg .sba-dg-legend li {
	align-items: flex-start;
	gap: 12px;
}

.sba-dg .sba-dg-swatch-large {
	width: 32px;
	height: 30px;
	border-radius: 4px;
}

@container (max-width: 639.98px) {
	.sba-dg .sba-dg-legend {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---- The entrance ----------------------------------------------------------- */

@keyframes sba-dg-draw {
	from { stroke-dashoffset: 1; }
	to { stroke-dashoffset: 0; }
}

@keyframes sba-dg-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes sba-dg-pop {
	from {
		opacity: 0;
		transform: scale(0.9);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes sba-dg-rise {
	from { transform: translateY(100%); }
	to { transform: none; }
}

@keyframes sba-dg-slide {
	from {
		opacity: 0;
		transform: translateX(-48px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.sba-dg .sba-dg-pop,
.sba-dg .sba-dg-rise,
.sba-dg .sba-dg-slide {
	transform-box: fill-box;
	transform-origin: center;
}

/* A sweep is a stroke drawn along its path (pathLength 1): ring segments,
   the inner ring, the mask that draws the dashed ring. */
.sba-dg.is-pending .sba-dg-sweep {
	stroke-dasharray: 1 1;
	stroke-dashoffset: 1;
}

.sba-dg.is-pending :is(.sba-dg-fade, .sba-dg-pop, .sba-dg-slide) {
	opacity: 0;
}

.sba-dg.is-pending .sba-dg-rise {
	transform: translateY(100%);
}

.sba-dg.is-in .sba-dg-sweep {
	animation: sba-dg-draw var(--t, 0.5s) linear var(--d, 0s) both;
}

.sba-dg.is-in .sba-dg-fade {
	animation: sba-dg-fade 0.3s ease-out var(--d, 0s) both;
}

.sba-dg.is-in .sba-dg-pop {
	animation: sba-dg-pop 0.4s ease-out var(--d, 0s) both;
}

.sba-dg.is-in .sba-dg-rise {
	animation: sba-dg-rise 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) var(--d, 0s) both;
}

.sba-dg.is-in .sba-dg-slide {
	animation: sba-dg-slide 0.35s ease-out var(--d, 0s) both;
}

@media (prefers-reduced-motion: reduce) {
	.sba-dg.is-in :is(.sba-dg-sweep, .sba-dg-fade, .sba-dg-pop, .sba-dg-rise, .sba-dg-slide) {
		animation: none;
	}
}