/*
	Planning callout - dev instrumentation. Because it's a dev instrument, not
	product surface, it's allowed raw color-coding here instead of the neutral
	token set. Base geometry still leans on the tokens so it sits calmly in the
	page while we work.

	Ported from the shared kit's action-callout.css (equanimity's copy), so
	the notes read the same in every app.
*/

/* The callout owns its spacing: when it's hidden, its margin leaves with it. */
.action-callout {
	margin-block: 1em;
	padding: 10px;
	border: 1px solid var(--stroke-secondary);
	background-color: var(--fill-secondary);
	color: var(--ink-secondary);

	summary {
		cursor: pointer;
	}

	summary span {
		opacity: 0.6;
	}

	.content {
		padding-block: 1.5em;
	}

	.content > * + * {
		margin-top: 0.8em;
	}

	li + li {
		margin-top: 0.3em;
	}

	pre {
		overflow-x: auto;
	}
}

/* Type color-coding. The colors are fixed, so each type also fixes its
   color scheme - otherwise the token inks inside flip with the page and go
   light-on-light in dark mode. */

.action-callout:is(.ux, .logic, .cta, .note, .question, .json) {
	color-scheme: light;
}

.action-callout.json {
	background-color: hsl(0 0% 94%);
}

.action-callout.ux {
	background-color: hsl(205 90% 94%);
}

.action-callout.logic {
	background-color: hsl(40 90% 90%);
}

.action-callout.cta {
	background-color: hsl(150 55% 90%);
}

.action-callout.note {
	background-color: hsl(48 95% 92%);
}

.action-callout.question {
	background-color: hsl(0 80% 95%);
	border: 2px dashed hsl(0 60% 45%);
}

.action-callout.video {
	color-scheme: dark;
	background-color: hsl(220 15% 20%);
}

/*
	Visibility. Callouts are hidden until someone asks for them, so the live
	site stays clear for visitors. The vision lenses (scripts/vision.js) put
	a class on <html> that brings them up on any page:

	- the "goals" lens shows the callouts
	- the "done" lens shows the ones marked done (on its own, only those)

	A page's goals sit in their own section under the page header. The
	section goes with its callouts, so a page with the lenses off - or with
	only resolved goals - has no empty band where they were.
*/

.action-callout,
.page-goals {
	display: none;
}

.goals-vision .action-callout {
	display: block;
}

.goals-vision .page-goals:has(.action-callout:not(.done)) {
	display: grid;
}

.goals-vision .action-callout.done {
	display: none;
}

.done-vision .action-callout.done {
	display: block;
}

.done-vision .page-goals:has(.action-callout.done) {
	display: grid;
}