/* The emailed sign-in code step on /login (signin-verify.js).
   Tabler's own tokens throughout, so light and dark follow the page. */

.frm-verify .sv-code {
	min-height: 2.75rem;                         /* 44px target */
	font-family: var(--tblr-font-monospace, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
	font-size: 1.5rem;                           /* never under 16px: no zoom on phones */
	letter-spacing: .5em;
	text-align: center;
	padding-left: calc(.75rem + .5em);           /* letter-spacing adds a trailing gap; balance it */
}

.frm-verify .sv-code[aria-invalid="true"] {
	border-color: var(--tblr-danger);
}

.frm-verify .sv-code:focus-visible {
	box-shadow: 0 0 0 .25rem rgba(var(--tblr-primary-rgb), .25);
}

.frm-verify .sv-field-error {
	margin-top: .25rem;
	font-size: .875em;
	color: var(--tblr-danger);
}

.frm-verify .sv-field-error::before {
	content: "!";                                /* not colour alone */
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin-right: .35em;
	border-radius: 50%;
	background: var(--tblr-danger);
	color: var(--tblr-white, #fff);
	font-size: .8em;
	font-weight: 700;
	line-height: 1.1em;
	text-align: center;
}

.frm-verify .sv-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .25rem 1rem;
	margin-top: .75rem;
}

.frm-verify .sv-link {
	min-height: 2.75rem;
	padding-left: 0;
	padding-right: 0;
}

.frm-verify .sv-link[aria-disabled="true"] {
	color: var(--tblr-secondary);
	text-decoration: none;
	cursor: default;
}

.frm-verify .sv-link[aria-busy="true"] {
	cursor: progress;
}

.frm-verify .sv-link:focus-visible,
.frm-verify .form-check-input:focus-visible {
	outline: 2px solid var(--tblr-primary);
	outline-offset: 2px;
}

.frm-verify [data-sv-submit][aria-busy="true"] {
	cursor: progress;
}