/*
 * Index Brands — claim and verification, §5.
 *
 * One pane visible at a time, selected by data-ib-step on the wrapper. Panes are
 * hidden with `display: none` rather than opacity so a hidden step's fields stay
 * out of the tab order.
 */

.ib-claim .ib-step {
	display: none;
}

.ib-claim[data-ib-step='taken']   .ib-step[data-ib-pane='taken'],
.ib-claim[data-ib-step='signin']  .ib-step[data-ib-pane='signin'],
.ib-claim[data-ib-step='email']   .ib-step[data-ib-pane='email'],
.ib-claim[data-ib-step='otp']     .ib-step[data-ib-pane='otp'],
.ib-claim[data-ib-step='welcome'] .ib-step[data-ib-pane='welcome'],
.ib-claim[data-ib-step='logos']   .ib-step[data-ib-pane='logos'] {
	display: block;
}

.ib-claim[data-ib-step='signin'] .ib-step[data-ib-pane='signin'] {
	display: grid;
}

.ib-claim .ib-claim__narrow {
	max-width: 440px;
	margin-inline: auto;
	padding: 64px 20px 80px;
}

.ib-claim .ib-claim__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: var(--r-pill);
	margin-bottom: 22px;
	overflow: hidden;
	padding: 8px;
	text-align: center;
	line-height: 1;
}

.ib-claim .ib-claim__h {
	font-size: 30px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.2;
	margin: 0 0 10px;
	text-wrap: balance;
}

.ib-claim .ib-claim__note {
	font-size: 15px;
	line-height: 1.6;
	color: var(--muted);
	margin: 0 0 26px;
	text-wrap: pretty;
}

.ib-claim .ib-claim__foot {
	font-size: 13.5px;
	color: var(--muted);
	margin: 18px 0 0;
	text-align: center;
}

.ib-claim .ib-claim__dot {
	color: var(--faint);
	margin-inline: 6px;
}

.ib-claim .ib-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-2);
	margin-bottom: 7px;
}

.ib-claim .ib-field {
	display: block;
	width: 100%;
	height: 56px;
	padding-inline: 18px;
	border: 1px solid var(--border);
	border-radius: var(--r-field);
	background: var(--white);
	font-family: inherit;
	font-size: 15.5px;
	color: var(--ink);
	margin-bottom: 16px;
}

.ib-claim .ib-field:focus {
	outline: none;
	border-color: var(--ink);
}

.ib-claim .ib-field.is-invalid {
	border-color: var(--error-border);
}

.ib-claim .ib-error {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--error);
	margin: -8px 0 16px;
}

.ib-claim .ib-hint {
	font-size: 13px;
	color: var(--green-ink);
	background: var(--green-soft);
	border-radius: 10px;
	padding: 9px 12px;
	margin: 0 0 16px;
	text-align: center;
}

.ib-claim .ib-strong {
	font-weight: 700;
	color: var(--ink);
}

/* The domain rule panel, §5.2 */
.ib-claim .ib-rule {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	background: var(--green-soft);
	border-radius: 14px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink-2);
	margin-bottom: 20px;
}

.ib-claim .ib-rule svg {
	flex-shrink: 0;
	margin-top: 1px;
	color: var(--green-ink);
}

.ib-claim .ib-btn-dark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 54px;
	padding-inline: 26px;
	font-size: 16px;
	font-weight: 600;
	font-family: inherit;
	color: var(--lime-ink);
	background: var(--lime);
	border: 0;
	border-radius: var(--r-pill);
	text-decoration: none;
	cursor: pointer;
}

/* Wise's primary is the only place the bright green fills a surface, so its
   hover deepens rather than changes hue. */
.ib-claim .ib-btn-dark:hover {
	background: var(--lime-hover);
}

.ib-claim .ib-btn-dark--wide {
	width: 100%;
}

/* §5.3: visually disabled until all six digits are present. */
.ib-claim .ib-btn-dark[disabled] {
	background: var(--border-soft);
	color: var(--faint);
	cursor: not-allowed;
}

.ib-claim .ib-link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-weight: 600;
	color: var(--green-ink);
	cursor: pointer;
	text-decoration: none;
}

/* ------------------------------------------------------------- sign in */

.ib-claim .ib-auth {
	grid-template-columns: 1fr;
	min-height: 70vh;
}

.ib-claim .ib-auth__cover {
	display: none;
}

/* §5.1: the cover appears at 980px and is hidden below it. */
@media (min-width: 980px) {
	.ib-claim .ib-auth {
		grid-template-columns: 1fr 1fr;
	}

	.ib-claim .ib-auth__cover {
		position: relative;
		display: block;
		overflow: hidden;
		border-radius: var(--r-card-lg);
		margin: 24px;
		background: linear-gradient(150deg, #F4F8ED, var(--lime-border));
	}
}

.ib-claim .ib-auth__form {
	display: flex;
	align-items: center;
}

.ib-claim .ib-auth__ring {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(31, 107, 79, 0.13);
	border-radius: var(--r-pill);
}

.ib-claim .ib-auth__ring--1 { width: 320px; height: 320px; }
.ib-claim .ib-auth__ring--2 { width: 500px; height: 500px; }
.ib-claim .ib-auth__ring--3 { width: 680px; height: 680px; }

.ib-claim .ib-auth__float {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--r-pill);
	font-size: 17px;
	font-weight: 700;
	letter-spacing: -0.02em;
	animation-name: ib-float;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

@keyframes ib-float {
	from { transform: translateY(-10px); }
	to   { transform: translateY(10px); }
}

@media (prefers-reduced-motion: reduce) {
	.ib-claim .ib-auth__float {
		animation: none;
	}
}

.ib-claim .ib-auth__title {
	position: absolute;
	inset-block-start: 34px;
	inset-inline-start: 34px;
	max-width: 15ch;
	font-size: 25px;
	font-weight: 600;
	letter-spacing: -0.03em;
	line-height: 1.25;
	color: var(--ink);
}

.ib-claim .ib-auth__foot {
	position: absolute;
	inset-block-end: 34px;
	inset-inline-end: 34px;
	font-size: 13.5px;
	color: var(--ink-2);
}

/* --------------------------------------------------------------- OTP */

.ib-claim .ib-otp {
	display: flex;
	gap: 9px;
	margin-bottom: 18px;
	/* Six cells read left-to-right whatever the page direction: the code is a
	   number, and reversing it would make people type it backwards. */
	direction: ltr;
}

.ib-claim .ib-otp__cell {
	flex: 1;
	min-width: 0;
	height: 62px;
	border: 1px solid var(--border);
	border-radius: var(--r-field);
	background: var(--white);
	font-family: inherit;
	font-size: 24px;
	font-weight: 600;
	text-align: center;
	color: var(--ink);
}

.ib-claim .ib-otp__cell:focus {
	outline: none;
	border-color: var(--ink);
}

/* §5.3: the border becomes ink once a cell is filled. */
.ib-claim .ib-otp__cell.is-filled {
	border-color: var(--ink);
}

/* ---------------------------------------------------------- onboarding */

.ib-claim .ib-onb {
	max-width: 780px;
	margin: 44px auto 80px;
	background: var(--white);
	border: 1px solid var(--border-soft);
	border-radius: var(--r-card-lg);
	padding: 34px;
}

.ib-claim .ib-onb__icon {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border: 1px dashed var(--border-dash);
	border-radius: 16px;
	margin-bottom: 22px;
}

.ib-claim .ib-onb__mark {
	width: 90px;
	height: 90px;
	border-radius: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 1;
}

.ib-claim .ib-onb__iconText {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.ib-claim .ib-onb__iconTitle {
	font-size: 15px;
	font-weight: 600;
}

.ib-claim .ib-onb__iconNote {
	font-size: 13px;
	color: var(--muted);
}

.ib-claim .ib-roles {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 8px;
}

.ib-claim .ib-role {
	min-height: 44px;
	padding-inline: 18px;
	border: 1px solid var(--border);
	border-radius: var(--r-pill);
	background: var(--white);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-2);
	cursor: pointer;
}

.ib-claim .ib-role[aria-checked='true'] {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--white);
}

.ib-claim .ib-onb__tiles {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
	margin-bottom: 26px;
}

@media (min-width: 700px) {
	.ib-claim .ib-onb__tiles {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ib-claim .ib-onb__tile {
	height: 150px;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	overflow: hidden;
	padding: 12px;
	text-align: center;
}

.ib-claim .ib-onb__tile--drop {
	border: 1px dashed var(--border-dash);
	color: var(--muted);
	font-size: 13px;
}

.ib-claim .ib-onb__tile--grey {
	background: var(--grey-soft);
}

.ib-claim .ib-onb__foot {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding-top: 22px;
	border-top: 1px solid var(--border-soft);
}

.ib-claim .ib-dots {
	display: inline-flex;
	gap: 5px;
}

.ib-claim .ib-dots span {
	width: 7px;
	height: 7px;
	border-radius: var(--r-pill);
	background: var(--border);
}

.ib-claim .ib-dots span.is-on {
	background: var(--ink);
}

.ib-claim .ib-onb__step {
	font-size: 13px;
	color: var(--muted);
}