/**
 * FLASK shared form controls — seven states (§1.5).
 *
 * 1 default  2 hover  3 focus  4 filled  5 error  6 disabled  7 success
 */

.flask-form {
	--ink: #1c1c1a;
	--mute: #6a6963;
	--line: #d6d3cb;
	--snow: #ffffff;
	--paper: #f2f0eb;
	--sage: #a7b1aa;
	--forest: #2e4b4a;
	--req: #6a6963;
	--error: #8b3a32;
	--error-bg: #f3e6e4;
	--success-bg: #c6dfd4;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.flask-form__field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	margin: 0;
}

.flask-form__label {
	margin: 0;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mute);
}

.flask-form__req {
	color: var(--req);
}

/* 1 — default */
.flask-form__control {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 14px 12px;
	border: 1px solid var(--line);
	border-radius: 0;
	background: var(--snow);
	color: var(--ink);
	font-family: Inter, system-ui, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	appearance: none;
	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.flask-form__control--select {
	padding-right: 36px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231C1C1A' stroke-width='1'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}

.flask-form__control::placeholder {
	color: #9a9891;
}

/* 2 — hover */
.flask-form__control:hover:not(:disabled):not(:focus):not(.is-error) {
	border-color: var(--ink);
}

/* 3 — focus */
.flask-form__control:focus,
.flask-form__control:focus-visible {
	outline: 1px solid var(--ink);
	outline-offset: 0;
	border-color: var(--ink);
}

/* 4 — filled */
.flask-form__control.is-filled,
.flask-form__control:not(:placeholder-shown):not(select),
.flask-form__control--select:not([value=""]):valid {
	border-color: var(--ink);
	color: var(--ink);
}

select.flask-form__control.is-filled {
	border-color: var(--ink);
}

/* 5 — error */
.flask-form__control.is-error,
.flask-form__control[aria-invalid="true"] {
	border-color: var(--error);
	background: #fffaf9;
}

.flask-form__field.is-error .flask-form__label {
	color: var(--error);
}

.flask-form__hint {
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: var(--mute);
}

.flask-form__hint--error {
	color: var(--error);
}

.flask-form__hint[hidden] {
	display: none !important;
}

/* 6 — disabled */
.flask-form__control:disabled,
.flask-form__control.is-disabled {
	opacity: 0.5;
	background: var(--paper);
	color: var(--mute);
	cursor: not-allowed;
}

/* 7 — success (control / notice) */
.flask-form__control.is-success {
	border-color: var(--forest);
	background: #f3f7f5;
}

.flask-form__notice {
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--ink);
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: var(--ink);
}

.flask-form__notice--success {
	background: var(--success-bg);
}

.flask-form__notice--error {
	background: var(--error-bg);
}

.flask-form__check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: var(--ink);
	cursor: pointer;
}

.flask-form__check input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	accent-color: var(--ink);
}

.flask-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin: 4px 0 0;
	padding: 16px;
	border: 1px solid var(--sage);
	border-radius: 2px;
	background: var(--sage);
	color: #fff;
	font-family: "IBM Plex Mono", ui-monospace, monospace;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.flask-form__submit:hover:not(:disabled),
.flask-form__submit:focus-visible:not(:disabled) {
	background: var(--forest);
	border-color: var(--forest);
}

.flask-form__submit:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.flask-form__submit.is-submitting {
	opacity: 0.7;
	cursor: wait;
}

.flask-form__submit.is-submitting .flask-form__submit-label {
	display: none;
}

.flask-form__submit.is-submitting .flask-form__submit-busy {
	display: inline !important;
}

.flask-form__submit-busy[hidden] {
	display: none !important;
}