/*
	Section goal - the target beside a heading that opens what the section is for
	(templates/components/section-goal.php). Scaffolding: basic structure only,
	to be refined by hand.

	Hidden until the goals lens is on. Absolutely positioned at its spot in the
	flow and pulled into the gutter, so turning goals on never moves anything.
*/

section-goal {
	display: none;
}

.goals-vision section-goal {
	display: block;
	position: absolute;
	margin-left: calc(-1 * (2em + var(--space-medium)));

	> button {
		display: grid;
		place-items: center;
		width: 2em;
		height: 2em;
		color: var(--ink-auxiliary);

		/* The button is `unstyled` (styles/components.css): no ring, no fill, so only people who know look for it. */
		&:is(:hover, :focus-visible) {
			color: var(--ink-primary);
		}

		&:active {
			box-shadow: none;
		}
	}

	.icon {
		width: 1.25em;
		height: 1.25em;
	}

	/* Goals vision is for larger screens only (Derek, 2026-11-10): narrow screens have no gutter to hold the target. */
	@media (max-width: 40em) {
		display: none;
	}
}

.section-goal-note {
	max-width: 40ch;
	padding: var(--space-medium);
	border: 1px solid var(--stroke-primary);
	background-color: var(--fill-primary);
	color: var(--ink-primary);

	p + p {
		margin-top: var(--space-small);
	}
}

@supports (top: anchor(bottom)) {
	.section-goal-note {
		position-anchor: auto;
		inset: auto;
		top: anchor(bottom);
		left: anchor(left);
		margin: var(--space-small) 0 0 0;
		position-try-fallbacks: flip-block, flip-inline;
	}
}