/** Callout presentation and progressively disclosed editing controls. */

.plan-content [data-plan-type="note"],
.plan-callout-option[data-callout-type="note"] {
	--callout-accent: var(--color-gray-500);
	--callout-ink: var(--color-text-secondary);
	--callout-wash: var(--color-gray-100);
}

.plan-content [data-plan-type="tip"],
.plan-callout-option[data-callout-type="tip"] {
	--callout-accent: var(--color-success);
	--callout-ink: var(--color-success-ink);
	--callout-wash: var(--color-success-wash);
}

.plan-content [data-plan-type="important"],
.plan-callout-option[data-callout-type="important"] {
	--callout-accent: var(--color-brand);
	--callout-ink: var(--color-brand-ink);
	--callout-wash: var(--color-brand-wash);
}

.plan-content [data-plan-type="warning"],
.plan-callout-option[data-callout-type="warning"] {
	--callout-accent: var(--color-warning);
	--callout-ink: var(--color-warning-ink);
	--callout-wash: var(--color-warning-wash);
}

.plan-content [data-plan-type="danger"],
.plan-callout-option[data-callout-type="danger"] {
	--callout-accent: var(--color-destructive);
	--callout-ink: var(--color-destructive-ink);
	--callout-wash: var(--color-destructive-wash);
}

.plan-content [data-plan-type] {
	border: var(--edge-width) solid color-mix(in oklab, var(--callout-accent) 18%, transparent);
	padding: 0.875rem 1rem;
	margin-block: 1rem;
	border-radius: var(--radius-lg);
	background: color-mix(in oklab, var(--callout-wash) 68%, var(--color-page));
	box-shadow: inset 0 1px rgb(255 255 255 / 55%), var(--shadow-resting);
	transition:
		border-color var(--duration-fast) var(--ease-out),
		background var(--duration-fast) var(--ease-out);
}

.plan-content [data-plan-type]:focus-within {
	border-color: color-mix(in oklab, var(--callout-accent) 34%, transparent);
	background: color-mix(in oklab, var(--callout-wash) 82%, var(--color-page));
}

.plan-callout-heading {
	position: relative;
	display: flex;
	min-width: 0;
	min-height: 1.75rem;
	align-items: center;
	gap: 0.625rem;
}

.plan-callout-type {
	display: grid;
	width: 1.75rem;
	height: 1.75rem;
	flex: 0 0 auto;
	place-items: center;
	border: var(--edge-width) solid transparent;
	border-radius: var(--radius-md);
	background: transparent;
	color: var(--callout-ink);
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out),
		transform var(--duration-fast) var(--ease-out);
}

.plan-callout-type:hover:not(:disabled),
.plan-callout-type:focus-visible,
.plan-callout-type[aria-expanded="true"] {
	border-color: color-mix(in oklab, var(--callout-accent) 24%, transparent);
	background: color-mix(in oklab, var(--callout-accent) 16%, transparent);
}

.plan-callout-type:active:not(:disabled) {
	transform: scale(0.94);
}

.plan-callout-type:disabled {
	cursor: default;
}

.plan-callout-title {
	min-width: 0;
	max-width: 100%;
	flex: 1 1 auto;
	border-radius: var(--radius-sm);
	padding: 0.125rem 0.25rem;
	margin-inline-start: -0.25rem;
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: var(--text-sm--line-height);
	color: var(--callout-ink);
	overflow-wrap: anywhere;
	text-wrap: pretty;
	transition:
		background var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-fast) var(--ease-out);
}

.plan-callout-title[contenteditable="true"] {
	cursor: text;
}

.plan-callout-title[contenteditable="true"]:hover {
	background: color-mix(in oklab, var(--callout-accent) 7%, transparent);
}

.plan-callout-title[contenteditable="true"]:focus {
	background: var(--color-page);
	box-shadow: 0 0 0 1px color-mix(in oklab, var(--callout-accent) 25%, transparent);
	color: var(--color-text-primary);
}

.plan-callout-title:empty::before {
	content: attr(data-placeholder);
	color: var(--callout-ink);
	opacity: 0.76;
	pointer-events: none;
}

.plan-content [data-plan-body] {
	padding-inline-start: 2.375rem;
	color: var(--color-text-secondary);
}

.plan-content [data-plan-body] > :first-child {
	margin-block-start: 0.25rem;
}

.plan-content [data-plan-body] > :last-child {
	margin-block-end: 0;
}

.plan-callout-menu {
	z-index: 20;
	width: 10rem;
	padding: 0.25rem;
	border: var(--edge-width) solid var(--color-edge);
	border-radius: var(--radius-lg);
	background: var(--color-page);
	box-shadow: var(--shadow-overlay);
	animation: plan-callout-menu-in var(--duration-fast) var(--ease-out);
}

.plan-callout-option {
	display: grid;
	width: 100%;
	height: 2rem;
	grid-template-columns: 1.25rem 1fr 1rem;
	align-items: center;
	gap: 0.5rem;
	border: 0;
	border-radius: var(--radius-sm);
	padding-inline: 0.5rem;
	background: transparent;
	color: var(--color-text-secondary);
	font-size: var(--text-sm);
	text-align: left;
	cursor: pointer;
	transition:
		background var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out);
}

.plan-callout-option > svg:first-child {
	color: var(--callout-accent);
}

.plan-callout-option:hover,
.plan-callout-option[data-highlighted],
.plan-callout-option:focus-visible,
.plan-callout-option[data-state="checked"] {
	background: var(--color-hover);
	color: var(--color-text-primary);
}

.plan-callout-option > svg:last-child {
	justify-self: end;
}

@keyframes plan-callout-menu-in {
	from {
		opacity: 0;
		transform: translateY(-0.25rem) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.plan-callout-menu {
		animation: none;
	}
}