/**
 * Hosterwise — domain transfers (inc/provisioning/transfers-account.php):
 * - /nom-de-domaine/: transfer form of the « Transfert » section and the hero link;
 * - « Mes noms de domaine » (light canvas): incoming transfer cards, outgoing transfer panel,
 *   row links. Design v2 tokens only (STYLEGUIDE.md); components (hw-notice, hw-badge,
 *   hw-checklist, hw-btn, hw-field) come from main.css.
 */

/* ---- /nom-de-domaine/ ---------------------------------------------------- */

.hw-dsearch__transfer {
	margin: 0.85rem 0 0;
	font-size: var(--hw-fs-sm);
}

.hw-xfer-form__form {
	display: grid;
	gap: 0.5rem;
	max-width: 36rem;
}

.hw-xfer-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
}

.hw-xfer-form__row .hw-input {
	flex: 1 1 14rem;
	min-width: 0;
	font-family: var(--hw-font-mono);
}

.hw-xfer-form__row .hw-btn { flex: 0 0 auto; }

.hw-xfer-form__error {
	margin: 0;
	font-weight: 600;
}

.hw-xfer-form__error a {
	margin-left: 0.35em;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.hw-xfer-form .hw-help { margin: 0; }

@media (max-width: 520px) {
	.hw-xfer-form__row .hw-btn { width: 100%; }
}

/* ---- « Mes noms de domaine »: row links ------------------------------------ */

.hw-xfer-link {
	max-width: 11rem;
	font-size: var(--hw-fs-xs);
	font-weight: 600;
	line-height: 1.35;
	text-align: right;
	color: var(--hw-light-cyan, var(--hw-link));
	text-decoration: underline;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	text-underline-offset: 0.2em;
}

.hw-xfer-link:hover,
.hw-xfer-link:focus-visible { text-decoration-color: currentColor; }

.hw-xfer-ready { white-space: nowrap; }

/* ---- Cards (incoming transfer, outgoing panel) ---------------------------- */

.hw-xfer-card {
	display: grid;
	gap: var(--hw-space-4);
	padding: clamp(1.15rem, 0.8rem + 1.6vw, 2rem);
	border: 1px solid var(--hw-border);
	border-radius: var(--hw-radius-xl, 28px);
	background: var(--hw-surface);
	box-shadow: var(--hw-light-shadow-sm);
	scroll-margin-top: calc(var(--hw-header-h, 76px) + 1rem);
}

.hw-xfer-card:focus { outline: none; }

.hw-xfer-card:target,
.hw-xfer-card:focus-visible {
	border-color: var(--hw-light-cyan, var(--hw-border-strong));
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--hw-light-cyan, #0074a3) 18%, transparent), var(--hw-light-shadow-sm);
}

.hw-xfer-card--transfer_failed { border-color: color-mix(in srgb, var(--hw-danger) 35%, transparent); }

.hw-xfer-card > * { margin: 0; }

.hw-xfer-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.9rem;
}

.hw-xfer-card__eyebrow {
	flex-basis: 100%;
	margin: 0;
	font-size: var(--hw-fs-2xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--hw-text-faint);
}

.hw-xfer-card__title {
	margin: 0;
	font-size: var(--hw-fs-xl, 1.5rem);
	letter-spacing: -0.015em;
	overflow-wrap: anywhere;
}

.hw-xfer-card__intro,
.hw-xfer-card__status,
.hw-xfer-card__note {
	color: var(--hw-text-muted);
	font-size: var(--hw-fs-sm);
}

.hw-xfer-card__status,
.hw-xfer-card__note {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
}

.hw-xfer-card__status {
	padding: 0.85rem 1rem;
	border-radius: var(--hw-radius);
	background: var(--hw-light-bg);
	color: var(--hw-text);
}

.hw-xfer-card__icon {
	--hw-icon-size: 1.15rem;
	flex: none;
	margin-top: 0.1rem;
	color: var(--hw-light-cyan, var(--hw-cyan));
}

.hw-xfer-card__note {
	padding-top: var(--hw-space-3);
	border-top: 1px solid var(--hw-border-soft, var(--hw-border));
	font-size: var(--hw-fs-xs);
}

.hw-xfer-card__reason { font-size: var(--hw-fs-xs); opacity: 0.9; overflow-wrap: anywhere; }

.hw-xfer-card .hw-notice form { margin: 0; }

/* ---- Steps ------------------------------------------------------------------ */

.hw-xfer-steps {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.hw-xfer-step {
	position: relative;
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	gap: 0 0.95rem;
	padding-bottom: var(--hw-space-5);
}

.hw-xfer-step:last-child { padding-bottom: 0; }

/* Rail between the numbers. */
.hw-xfer-step:not(:last-child)::before {
	content: "";
	position: absolute;
	top: 2.5rem;
	bottom: 0.25rem;
	left: calc(1.125rem - 1px);
	width: 2px;
	border-radius: 2px;
	background: var(--hw-border);
}

.hw-xfer-step.is-done:not(:last-child)::before { background: color-mix(in srgb, var(--hw-success, #37c267) 55%, transparent); }

.hw-xfer-step__num {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--hw-border);
	border-radius: 50%;
	background: var(--hw-light-bg);
	font-family: var(--hw-font-head);
	font-weight: 800;
	font-size: var(--hw-fs-sm);
	color: var(--hw-text);
}

.hw-xfer-step.is-done .hw-xfer-step__num {
	border-color: transparent;
	background: var(--hw-success, #37c267);
	color: var(--hw-accent-ink, #fff);
}

.hw-xfer-step__num .hw-icon { --hw-icon-size: 1.05rem; }

.hw-xfer-step__body {
	display: grid;
	gap: 0.6rem;
	min-width: 0;
	padding-top: 0.3rem;
}

.hw-xfer-step__body > * { margin: 0; }

.hw-xfer-step__title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.7rem;
	margin: 0;
	font-family: var(--hw-font-head);
	font-weight: 700;
	color: var(--hw-text);
}

.hw-xfer-step__title .hw-badge .hw-icon { --hw-icon-size: 0.9em; margin-right: 0.25em; }

.hw-xfer-step__state {
	font-family: var(--hw-font-body);
	font-size: var(--hw-fs-2xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hw-text-faint);
}

.hw-xfer-step.is-done .hw-xfer-step__state { color: var(--hw-success-text, #1f7a43); }

.hw-xfer-step__text,
.hw-xfer-step__lead {
	font-size: var(--hw-fs-sm);
	color: var(--hw-text-muted);
}

.hw-xfer-checklist {
	gap: 0.4rem;
	margin: 0;
	font-size: var(--hw-fs-sm);
}

/* ---- Forms -------------------------------------------------------------------- */

.hw-xfer-code {
	display: grid;
	gap: 0.85rem;
	max-width: 34rem;
	padding: clamp(1rem, 0.8rem + 1vw, 1.35rem);
	border: 1px solid var(--hw-border);
	border-radius: var(--hw-radius);
	background: var(--hw-light-bg);
}

.hw-xfer-code .hw-field {
	display: grid;
	gap: 0.35rem;
	margin: 0;
}

.hw-xfer-code .hw-field--check { display: flex; }

.hw-xfer-code__input { font-family: var(--hw-font-mono); letter-spacing: 0.02em; }

.hw-xfer-code__submit { margin: 0; }

.hw-xfer-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
}

.hw-xfer-tag {
	display: grid;
	gap: 0.75rem;
	max-width: 30rem;
}

.hw-xfer-tag .hw-field { display: grid; gap: 0.35rem; margin: 0; }

.hw-xfer-tag .hw-field--check { display: flex; }

/* ---- Code shown once ------------------------------------------------------------ */

.hw-xfer-codebox {
	display: grid;
	gap: 0.55rem;
	padding: 1rem 1.1rem;
	border: 1px solid color-mix(in srgb, var(--hw-light-cyan, #0074a3) 35%, transparent);
	border-radius: var(--hw-radius);
	background: color-mix(in srgb, var(--hw-light-cyan, #0074a3) 6%, var(--hw-surface));
}

.hw-xfer-codebox > p { margin: 0; }

.hw-xfer-codebox__label {
	font-size: var(--hw-fs-xs);
	font-weight: 700;
	color: var(--hw-text);
}

.hw-xfer-codebox__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

.hw-xfer-codebox__code {
	flex: 1 1 12rem;
	min-width: 0;
	padding: 0.55rem 0.8rem;
	border: 1px solid var(--hw-border);
	border-radius: 8px;
	background: var(--hw-surface);
	font-family: var(--hw-font-mono);
	font-size: var(--hw-fs-md, 1.0625rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--hw-text);
	overflow-wrap: anywhere;
	user-select: all;
}

.hw-xfer-codebox__row .hw-btn .hw-icon { --hw-icon-size: 1em; margin-right: 0.35em; }

.hw-xfer-codebox__once {
	font-size: var(--hw-fs-xs);
	color: var(--hw-warning-text, #8a5a00);
	font-weight: 600;
}

/* ---- Outgoing panel ------------------------------------------------------------- */

.hw-xfer-out__back { font-size: var(--hw-fs-xs); }

.hw-xfer-out__back a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: 600;
}

.hw-xfer-out__back-icon { --hw-icon-size: 1em; transform: scaleX(-1); }

.hw-xfer-out__after {
	display: grid;
	gap: 0.35rem;
	padding: 1rem 1.15rem;
	border-radius: var(--hw-radius);
	background: var(--hw-light-bg-2, var(--hw-light-bg));
	font-size: var(--hw-fs-sm);
	color: var(--hw-text-muted);
}

.hw-xfer-out__after p { margin: 0; }

@media (max-width: 640px) {
	.hw-xfer-step { grid-template-columns: 2rem minmax(0, 1fr); gap: 0 0.75rem; }
	.hw-xfer-step__num { width: 2rem; height: 2rem; }
	.hw-xfer-step:not(:last-child)::before { left: calc(1rem - 1px); top: 2.25rem; }
	.hw-xfer-actions .hw-btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.hw-xfer-card { scroll-behavior: auto; }
}

/* ---- Narrow screens: nothing may widen the account column ------------------------ */

.hw-account-domains:has(.hw-xfer-card),
.hw-xfer-card,
.hw-xfer-step__body,
.hw-xfer-code,
.hw-xfer-code .hw-field,
.hw-xfer-tag .hw-field { min-width: 0; }

.hw-xfer-code .hw-input,
.hw-xfer-tag .hw-input { width: 100%; min-width: 0; }

.hw-xfer-card .hw-btn {
	max-width: 100%;
	white-space: normal;
	text-align: center;
}