dialog {
	background-color: var(--color-surface);
	border: none;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-modal);
	left: 50%;
	margin: 0;
	padding: 0;
	position: fixed;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;
	min-width: 42ch;
	max-width: 90vw;
	max-height: 85vh;
	overflow-y: auto;
}

/* One signal only: the same pencilled edge the card has. Anything heavier —
   the card's blank fill, say — would read as the disabled state a read-only
   item already uses. Compounded with --accented so it outweighs that rule's
   `border` shorthand, which would otherwise reset the style back to solid. */
.form-container--accented.form-container--maybe {
	border-style: dashed;
}

.form-container.form-container--accented {
	--accent-tint: color-mix(
		in srgb,
		var(--form-accent) 10%,
		var(--color-surface)
	);
	--accent-tint-strong: color-mix(
		in srgb,
		var(--form-accent) 18%,
		var(--color-surface)
	);
	--accent-ink: color-mix(in srgb, var(--form-accent) 55%, var(--color-text));

	border: 2px solid var(--form-accent);
	border-radius: var(--radius-lg);

	form:not(.button_to) {
		.form-field:not([hidden]) {
			label {
				color: var(--accent-ink);
			}

			input,
			select {
				background-color: var(--accent-tint);

				&:focus {
					box-shadow: 0 0 0 2px var(--form-accent);
				}
			}
		}

		/* The selected sticker wears a ring in --form-accent, which already
		   tracks the modal, so only the hover tint needs saying here. */
		.sticker-select-wrapper .sticker-option:hover {
			background-color: var(--accent-tint);
		}
	}

	.form-submit {
		background: linear-gradient(
			135deg,
			var(--form-accent) 0%,
			color-mix(in srgb, var(--form-accent) 70%, var(--color-text)) 100%
		);
	}
}