/* Account module ------------------------------------------------------------
   Loaded on every account/* page, so every rule is scoped to an fy-account- class.
   1. Sign-in / registration / recovery split screen (layout 'bare')
   2. Forms shared by the account pages (field states, password rules, choices)
   3. Result cards (logout, reset link) and settings cards
   (The dashboard, account/view, has its own file: account-view.css.)

   Reusable classes (owner: group A; ask before changing them):
   .fy-account-form          on a <form class="fy-form">: enables the field states below
     .fy-field.is-invalid    red field; put <p class="fy-error-text" id="X_error" hidden>[icon]<span></span></p>
                             in the field and point aria-describedby at it
     .fy-label-row           label with a small link on the right ("Forgot password?")
     .fy-account-form__actions / __legal   button stack under a form / small legal line
   .fy-account-pair          two fields side by side (one column on phones)
   .fy-account-group         <fieldset> with a <legend> drawn as a heading with a rule
   .fy-account-rules         password checklist; li[data-rule] lights up (see account/_password-tools.php)
   .fy-account-match         live "fields match" hint, p[data-fy-match="other id"]
   .fy-account-choice        large radio pills (label > input[type=radio] + text)
   .fy-account-date          three labelled date selects (.fy-account-date__part > label + select)
   .fy-account-settings      form card + side column grid of a settings page (account/_settings-aside.php)
     .fy-account-settings__lede  one-line explanation at the top of the form card (icon + text)
   .fy-account-settings-card  form card of a settings page (max 46rem on its own, full column inside .fy-account-settings)
   .fy-account-settings__intro + __icon   icon tile, heading and text at the top of a settings card
   .fy-account-current       dashed box showing a current value ("Current address: ...")
   .fy-account-tips          "Good to know" list (h2 + ul > li > icon + text)
   .fy-account-hint          side note under a form (add to .fy-alert)
   .fy-account-divider       "or" divider between two actions
   .fy-account-result (+ __actions)  centred result card: poring, h1, text, stacked buttons
   .fy-account-back          centred row of "back" links
   Auth split screen: .fy-account-auth (+ --wide) > account/_auth-art.php + .fy-account-auth__main >
   .fy-card.fy-account-auth__card (+ .fy-account-switch folder tabs, .fy-account-auth__head) + .fy-account-auth__alt
   (the links under the card; a glass panel of the card's width from 1100px, where the site background shows)
   ------------------------------------------------------------------------- */

/* 1. Split screen ------------------------------------------------------------ */
.fy-account-auth {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

/* Art panel: a short banner above the form on phones and tablets. */
.fy-account-auth__art {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	min-height: clamp(200px, 30vw, 290px);
	padding: var(--sp-8) var(--gutter) var(--sp-8);
	overflow: hidden;
	text-align: center;
}
.fy-account-auth__art > picture {
	position: absolute;
	inset: 0;
	z-index: -2;
	/* the banner melts into the page below it instead of ending on a line */
	-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
	mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 100%);
}
.fy-account-auth__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
}
.fy-account-auth__art--register .fy-account-auth__img { object-position: 50% 58%; }
.fy-account-auth__art::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	/* ends transparent over the fading picture: no solid band where the banner meets the page */
	background:
		linear-gradient(180deg,
			color-mix(in srgb, var(--bg) 35%, transparent) 0%,
			color-mix(in srgb, var(--bg) 10%, transparent) 30%,
			color-mix(in srgb, var(--bg) 48%, transparent) 56%,
			color-mix(in srgb, var(--bg) 55%, transparent) 76%,
			color-mix(in srgb, var(--bg) 45%, transparent) 88%,
			transparent 100%);
}

.fy-account-auth__welcome {
	position: relative;
	display: grid;
	justify-items: center;
	gap: var(--sp-2);
	max-width: 34rem;
}
.fy-account-auth__crest img {
	display: block;
	width: clamp(124px, 20vw, 156px);
	height: auto;
	filter: drop-shadow(0 8px 18px rgba(8, 4, 24, .65));
}
.fy-account-auth__line {
	margin: 0;
	color: var(--text);
	font: 600 clamp(1.15rem, 1rem + .8vw, 1.5rem)/1.2 var(--font-display);
	letter-spacing: .005em;
	text-shadow: 0 2px 14px rgba(8, 4, 24, .9), 0 1px 2px rgba(8, 4, 24, .7);
	text-wrap: balance;
}
/* A two-phrase line ("Lost your key? Let's get you back in.") only breaks between its phrases. */
.fy-account-auth__phrase { display: inline-block; }
.fy-account-auth__sub {
	display: none;
	margin: 0;
	color: var(--text-2);
	font-size: .98rem;
	line-height: 1.5;
	text-shadow: 0 1px 10px rgba(8, 4, 24, .95);
}

/* Form column */
.fy-account-auth__main {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-5);
	padding: 0 var(--gutter) var(--section-y);
}
.fy-account-auth__card {
	width: 100%;
	max-width: 30rem;
	--card-pad: clamp(1.35rem, .9rem + 2vw, 2.4rem);
}
.fy-account-auth--wide .fy-account-auth__card { max-width: 38rem; }
.fy-account-auth__head { margin-bottom: var(--sp-6); }
.fy-account-auth__head .fy-eyebrow { margin-bottom: var(--sp-2); }
.fy-account-auth__head h1 { margin: 0; font-size: clamp(1.75rem, 1.45rem + 1.2vw, 2.3rem); }
.fy-account-auth__head p { margin: var(--sp-2) 0 0; color: var(--text-3); font-size: .95rem; line-height: 1.55; }
.fy-account-auth__head p a { font-weight: 700; }

.fy-account-auth__alt {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .35rem var(--sp-5);
	max-width: 38rem;
	margin: 0;
	color: var(--text-3);
	font-size: .92rem;
	text-align: center;
}
.fy-account-auth__alt a { font-weight: 700; }

@media (min-width: 560px) {
	.fy-account-auth__sub { display: block; }
}

@media (min-width: 960px) {
	.fy-account-auth {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
		min-height: calc(100vh - var(--header-h));
		min-height: calc(100svh - var(--header-h));
	}
	/* The column runs the full height of the form; the art inside it stays in view. It has no edge of its own:
	   the art fades out towards the form and the footer, so it melts into the page behind it (the site
	   background art from 1100px, the night sky below that). */
	.fy-account-auth__aside { align-self: stretch; }
	.fy-account-auth__art {
		/* eased fades (no visible end): the picture towards the form, and the night under it */
		--fy-auth-fade-x: linear-gradient(90deg, #000 0%, #000 56%, rgba(0, 0, 0, .9) 66%, rgba(0, 0, 0, .55) 78%, rgba(0, 0, 0, .15) 90%, transparent 100%);
		--fy-auth-night-x: linear-gradient(90deg, #000 0%, #000 60%, rgba(0, 0, 0, .85) 72%, rgba(0, 0, 0, .4) 86%, rgba(0, 0, 0, .1) 95%, transparent 100%);
		--fy-auth-night-y: linear-gradient(180deg, #000 0%, #000 calc(100% - 5rem), rgba(0, 0, 0, .45) calc(100% - 2.25rem), transparent 100%);
		position: sticky;
		top: var(--header-h);
		align-items: flex-start;
		justify-content: flex-end;
		height: calc(100vh - var(--header-h));
		height: calc(100svh - var(--header-h));
		min-height: 560px;
		padding: var(--sp-12) clamp(2rem, .5rem + 3vw, 4rem) var(--sp-16);
		text-align: left;
	}
	/* Night under the art and the welcome line: it hides the site background behind them (no double
	   exposure) and thins out towards the form and the footer, where that background takes over. */
	.fy-account-auth__art::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -3;
		background: radial-gradient(48% 34% at 24% 78%, rgba(140, 87, 248, .13), transparent 70%), var(--bg);
		-webkit-mask-image: var(--fy-auth-night-x), var(--fy-auth-night-y);
		-webkit-mask-composite: source-in;
		mask-image: var(--fy-auth-night-x), var(--fy-auth-night-y);
		mask-composite: intersect;
	}
	/* the shade lives inside the picture here (below), so it fades out with it */
	.fy-account-auth__art::after { display: none; }
	/* The wide sign-in scene keeps its storybook proportions: it fills the top of the
	   panel and melts into the night, so it is never blown up past its source size. */
	.fy-account-auth__art--login > picture {
		bottom: auto;
		height: 74%;
		-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%), var(--fy-auth-fade-x);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%), var(--fy-auth-fade-x);
		mask-composite: intersect;
	}
	.fy-account-auth__art--login .fy-account-auth__img { object-position: 14% 40%; }
	/* The registration scene fits the column whole: both groups of heroes stay in view at the top
	   and melt into the night, and the crest and welcome line sit below them, not on top of them. */
	.fy-account-auth__art--register > picture {
		bottom: auto;
		height: auto;
		aspect-ratio: 1920 / 1275;
		-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%), var(--fy-auth-fade-x);
		-webkit-mask-composite: source-in;
		mask-image: linear-gradient(180deg, #000 0%, #000 58%, transparent 100%), var(--fy-auth-fade-x);
		mask-composite: intersect;
	}
	.fy-account-auth__art--register .fy-account-auth__img { object-position: 50% 50%; }
	/* Dusk on both scenes: a violet multiply tint (strong on the bright registration sky, so it sits in
	   Freya's night instead of fighting it), then a shade that calms the top under the header. */
	.fy-account-auth__art > picture::before,
	.fy-account-auth__art > picture::after {
		content: "";
		position: absolute;
		inset: 0;
	}
	.fy-account-auth__art > picture::before {
		background: linear-gradient(180deg, #4e3cad 0%, #8a74e2 55%, #b3a2f0 100%);
		mix-blend-mode: multiply;
		opacity: .2;
	}
	.fy-account-auth__art--register > picture::before { opacity: .55; }
	.fy-account-auth__art > picture::after {
		background:
			linear-gradient(180deg,
				color-mix(in srgb, var(--bg) 40%, transparent) 0%,
				transparent 24%,
				transparent 50%,
				color-mix(in srgb, var(--bg) 60%, transparent) 100%);
	}
	.fy-account-auth__welcome { justify-items: start; max-width: 30rem; }
	.fy-account-auth__crest img { width: 210px; }
	.fy-account-auth__line { font-size: clamp(1.6rem, 1rem + 1.2vw, 2.15rem); }
	.fy-account-auth__main {
		align-self: stretch;
		justify-content: center;
		padding: var(--sp-12) var(--gutter);
	}
}

/* From 1100px the site background art shows behind the form column, and on wide screens the knight's bright
   armour and sword sit right under the links below the card. Those links get a quiet glass panel of the card's
   width: they read on any part of the art, and the panel reads as the card's footer. */
@media (min-width: 1100px) {
	.fy-account-auth__main { gap: var(--sp-4); }
	.fy-account-auth__alt {
		width: 100%;
		max-width: 30rem;
		padding: .85rem 1.25rem;
		border: 1px solid var(--line);
		border-radius: var(--r-lg);
		background: color-mix(in srgb, var(--surface) 88%, transparent);
		-webkit-backdrop-filter: blur(14px) saturate(130%);
		backdrop-filter: blur(14px) saturate(130%);
		box-shadow: var(--shadow-md), var(--inner-hi);
	}
	.fy-account-auth--wide .fy-account-auth__alt { max-width: 38rem; }
}

/* Wide screens: the form column keeps its card within the page column (50vw - 600px from the right), so the card
   does not sit on the knight of the site background at the right edge. */
@media (min-width: 1100px) {
	.fy-account-auth__main { padding-right: max(var(--gutter), calc(50vw - 600px)); }
	/* The registration card keeps its full 38rem there: its column takes the room the card needs from the art column
	   (at most 52% of the width), so the card still ends at the page column instead of shrinking to about 520px. */
	.fy-account-auth--wide { grid-template-columns: minmax(0, 1.08fr) minmax(min(52%, 38rem + var(--gutter) + max(var(--gutter), 50vw - 600px)), 1fr); }
}

/* Folder tabs on top of the recovery card: "Reset password" and "Recover username". */
.fy-account-switch {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--sp-6);
	border-bottom: 1px solid var(--line);
	border-radius: var(--r-lg) var(--r-lg) 0 0;
	background: var(--surface-sunken);
	overflow: hidden;
}
.fy-account-switch a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	min-height: 54px;
	padding: .6rem .7rem;
	border-bottom: 2px solid transparent;
	color: var(--text-3);
	font: 600 .95rem/1.15 var(--font-display);
	text-align: center;
	text-decoration: none;
	transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fy-account-switch a + a { border-left: 1px solid var(--line); }
.fy-account-switch a:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.fy-account-switch a[aria-current="page"] {
	border-bottom-color: var(--gold-300);
	background: linear-gradient(180deg, rgba(140, 87, 248, .04), rgba(140, 87, 248, .16));
	color: var(--text);
}
.fy-account-switch a[aria-current="page"] .fy-i { color: var(--gold-300); }
.fy-account-switch .fy-i { width: 1.05em; height: 1.05em; }

/* Side note under a recovery form */
.fy-account-hint { margin: var(--sp-6) 0 0; font-size: .92rem; }
.fy-account-hint a { font-weight: 800; }

/* Mode switch inside the username recovery form (e-mail or character name) */
.fy-account-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; margin: 0; }
.fy-account-modes .fy-tab { justify-content: center; }

/* Locked account notice on the login page */
.fy-account-banned { display: grid; gap: .5rem; }
.fy-account-banned p { margin: 0; }

/* "or" divider between the main action and the alternatives */
.fy-account-divider {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin: var(--sp-6) 0 var(--sp-5);
	color: var(--text-4);
	font: 800 .7rem/1 var(--font-body);
	letter-spacing: .16em;
	text-transform: uppercase;
}
.fy-account-divider::before, .fy-account-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* "Good to know" list under the recovery forms */
.fy-account-tips {
	margin: var(--sp-6) 0 0;
	padding: var(--sp-5) 0 0;
	border-top: 1px solid var(--line);
}
.fy-account-tips h2 {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: 0 0 var(--sp-3);
	font-size: 1.02rem;
}
.fy-account-tips h2 .fy-i { color: var(--gold-300); }
.fy-account-tips ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.fy-account-tips li { display: flex; gap: .6rem; margin: 0; color: var(--text-3); font-size: .9rem; line-height: 1.5; }
.fy-account-tips li .fy-i { flex: none; width: 1rem; height: 1rem; margin-top: .2rem; color: var(--violet-300); }

/* 2. Forms ---------------------------------------------------------------- */
.fy-account-form .fy-field { align-content: start; }
.fy-account-form .fy-label-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .25rem var(--sp-3);
}
.fy-account-form .fy-label-row a { font-size: .85rem; font-weight: 700; }
.fy-account-form .fy-help { margin: 0; }
.fy-account-form .fy-error-text {
	display: flex;
	align-items: flex-start;
	gap: .4rem;
	margin: 0;
	line-height: 1.4;
}
.fy-account-form .fy-error-text .fy-i { flex: none; width: 1rem; height: 1rem; margin-top: .1rem; }
.fy-account-form .fy-error-text[hidden] { display: none; }
/* no one-word last line under a narrow field (setError() and create.php keep "e-mail" in one piece) */
.fy-account-auth .fy-error-text > span { text-wrap: pretty; }
.fy-account-form .fy-field.is-invalid input:not([type="radio"]):not([type="checkbox"]),
.fy-account-form .fy-field.is-invalid select {
	border-color: var(--rose-400);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rose-400) 20%, transparent);
}
.fy-account-form .fy-field.is-valid input:not([type="radio"]):not([type="checkbox"]) { border-color: color-mix(in srgb, var(--mint-400) 55%, transparent); }
.fy-account-form .fy-field.is-invalid .fy-account-choice label { border-color: color-mix(in srgb, var(--rose-400) 70%, transparent); }
.fy-account-form__actions { display: grid; gap: var(--sp-3); margin-top: var(--sp-1); }
.fy-account-form__legal { margin: 0; color: var(--text-3); font-size: .86rem; line-height: 1.5; text-align: center; }
.fy-account-form__legal a { font-weight: 700; }

/* Two fields side by side on roomy screens */
.fy-account-pair { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 620px) {
	.fy-account-auth--wide .fy-account-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/* an empty live hint takes no row (no extra gap), so the error lines of two fields side by side line up */
	.fy-account-auth--wide .fy-account-pair .fy-account-match:empty { position: absolute; }
}

/* Group heading inside a long form */
.fy-account-group {
	display: grid;
	gap: var(--sp-5);
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}
.fy-account-group + .fy-account-group { margin-top: var(--sp-4); }
.fy-account-group > legend,
.fy-account-group__title {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: 100%;
	margin: 0 0 var(--sp-3);
	padding: 0;
	color: var(--text);
	font: 600 1.05rem/1.3 var(--font-display);
}
.fy-account-group > legend::after,
.fy-account-group__title::after { content: ""; flex: 1; height: 1px; margin-left: .35rem; background: var(--line); }
.fy-account-group__title .fy-i, .fy-account-group > legend .fy-i { color: var(--gold-300); }
.fy-account-group__note { margin: 0; color: var(--text-4); font: 700 .78rem/1.2 var(--font-body); letter-spacing: .02em; }

/* Password rules: a checklist that lights up while typing */
.fy-account-rules {
	display: grid;
	gap: .4rem;
	margin: 0;
	padding: .8rem .95rem;
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	background: var(--surface-sunken);
	color: var(--text-3);
	font-size: .86rem;
	line-height: 1.4;
	list-style: none;
}
.fy-account-rules li { display: flex; gap: .55rem; align-items: flex-start; margin: 0; transition: color var(--t-fast) var(--ease); }
.fy-account-rules li::before {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-top: .05rem;
	border: 2px solid var(--line-3);
	border-radius: 50%;
	transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.fy-account-rules li.is-met { color: var(--mint-300); }
.fy-account-rules li.is-met::before {
	border-color: var(--mint-400);
	background: var(--mint-400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23100b26' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.fy-account-rules li.is-broken { color: var(--rose-300); }
.fy-account-rules li.is-broken::before { border-color: var(--rose-400); }
.fy-account-rules__title { color: var(--text-2); font-weight: 800; }
.fy-account-rules__title::before { display: none; }

/* Live hint under a "confirm" field */
.fy-account-match { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--text-4); font-size: .84rem; font-weight: 700; }
.fy-account-match .fy-i { width: 1rem; height: 1rem; }
.fy-account-match.is-ok { color: var(--mint-300); }
.fy-account-match.is-off { color: var(--amber-300); }

/* Big choice pills (gender) */
.fy-account-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.fy-account-choice label {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 48px;
	padding: .5rem .9rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-md);
	background: var(--surface-sunken);
	color: var(--text-2);
	font: 600 1rem/1.2 var(--font-display);
	cursor: pointer;
	transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fy-account-choice label:hover { border-color: var(--line-3); color: var(--text); }
.fy-account-choice input[type="radio"] { margin: 0; }
.fy-account-choice label:has(input:checked) {
	border-color: var(--violet-400);
	background: color-mix(in srgb, var(--violet-500) 18%, transparent);
	color: var(--text);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet-400) 40%, transparent);
}
.fy-account-choice label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Birthdate: three labelled selects */
.fy-account-date { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .9fr); gap: .55rem; }
.fy-account-date__part { display: grid; gap: .3rem; min-width: 0; }
.fy-account-date__part label { color: var(--text-3); font: 800 .7rem/1.2 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.fy-account-date__part select { width: 100%; min-width: 0; padding-left: .75rem; padding-right: 2.1rem; background-position: right .55rem center; }

/* 3. Result and settings cards -------------------------------------------------- */
.fy-account-result { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; }
.fy-account-result > img { width: 104px; height: auto; animation: fy-bob 3.2s var(--ease-in-out) infinite; }
.fy-account-result h1 { margin: var(--sp-2) 0 0; font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.2rem); }
.fy-account-result p { max-width: 40ch; margin: 0; color: var(--text-2); }
.fy-account-result .fy-alert { width: 100%; margin: var(--sp-2) 0 0; text-align: left; }
.fy-account-result__actions { display: grid; gap: var(--sp-3); width: 100%; margin-top: var(--sp-4); }

/* Settings pages (change password, change e-mail): form card + side column (account/_settings-aside.php),
   the same composition as the transfer and rename pages. */
.fy-account-settings { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) {
	.fy-account-settings { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-8); }
	.fy-account-settings__aside { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
}
.fy-account-settings-card { max-width: 46rem; }
.fy-account-settings > .fy-account-settings-card { max-width: none; }
.fy-account-settings__lede {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
	margin: 0 0 var(--sp-6);
	padding-bottom: var(--sp-5);
	border-bottom: 1px solid var(--line);
	color: var(--text-2);
	line-height: 1.55;
}
.fy-account-settings__lede > .fy-i { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .15rem; color: var(--gold-300); }
.fy-account-settings__aside { display: grid; gap: var(--sp-5); }
/* Tablets: the two side cards sit next to each other under the form instead of stretching. */
@media (min-width: 640px) and (max-width: 959.98px) {
	.fy-account-settings__aside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
/* Phones: the main action spans the card (thumb reach), Cancel sits centred under it. */
@media (max-width: 559.98px) {
	.fy-account-settings-card .fy-cluster { display: grid; gap: var(--sp-2); }
	.fy-account-settings-card .fy-cluster > .fy-btn { width: 100%; }
}

/* "Signed in as" card */
.fy-account-whoami { --card-pad: var(--sp-5); display: grid; gap: var(--sp-4); }
.fy-account-whoami__top { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.fy-account-whoami__avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 15px;
	background: var(--grad-violet);
	color: #fff;
	font: 700 1.3rem/1 var(--font-display);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), var(--glow-violet);
}
.fy-account-whoami__who { display: grid; gap: .1rem; min-width: 0; margin: 0; }
.fy-account-whoami__who span { color: var(--text-3); font: 800 .68rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.fy-account-whoami__who strong { overflow: hidden; color: var(--text); font: 600 1.25rem/1.2 var(--font-display); text-overflow: ellipsis; white-space: nowrap; }
.fy-account-whoami__facts { display: grid; margin: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunken); }
.fy-account-whoami__facts > div { display: grid; gap: .15rem; padding: .65rem .9rem; }
.fy-account-whoami__facts > div + div { border-top: 1px solid var(--line); }
.fy-account-whoami__facts dt { display: flex; align-items: center; gap: .4rem; color: var(--text-3); font-size: .82rem; font-weight: 700; }
.fy-account-whoami__facts dt .fy-i { width: .95rem; height: .95rem; color: var(--violet-300); }
.fy-account-whoami__facts dd { margin: 0; color: var(--text); font-weight: 700; overflow-wrap: anywhere; }

/* History links under it */
.fy-account-related { --card-pad: var(--sp-5); }
.fy-account-related__title { display: flex; align-items: center; gap: .5rem; margin: 0 0 var(--sp-3); font-size: 1.1rem; }
.fy-account-related__title .fy-i { color: var(--gold-300); }
.fy-account-related ul { display: grid; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.fy-account-related li { margin: 0; }
.fy-account-related a {
	display: flex;
	align-items: center;
	gap: .65rem;
	min-height: 44px;
	padding: .5rem .7rem;
	border-radius: var(--r-sm);
	color: var(--text-2);
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fy-account-related a:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.fy-account-related a > .fy-i { flex: none; width: 1.05rem; height: 1.05rem; color: var(--violet-300); }
.fy-account-related a > span { flex: 1; min-width: 0; }
.fy-account-related a > .fy-account-related__chev { width: 1rem; height: 1rem; color: var(--text-4); transition: transform var(--t-fast) var(--ease); }
.fy-account-related a:hover > .fy-account-related__chev { transform: translateX(2px); color: var(--gold-300); }
.fy-account-settings__intro { display: flex; gap: var(--sp-4); align-items: flex-start; margin-bottom: var(--sp-6); }
.fy-account-settings__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 16px;
	background: rgba(140, 87, 248, .16);
	color: var(--violet-300);
}
.fy-account-settings__icon .fy-i { width: 26px; height: 26px; }
.fy-account-settings__intro h2 { margin: 0 0 .3rem; font-size: var(--fs-h3); }
.fy-account-settings__intro p { margin: 0; color: var(--text-3); }
.fy-account-current {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem .7rem;
	margin: 0;
	padding: .8rem 1rem;
	border: 1px dashed var(--line-2);
	border-radius: var(--r-md);
	color: var(--text-3);
	font-size: .92rem;
}
.fy-account-current strong { color: var(--text); font-weight: 800; word-break: break-all; }
.fy-account-current .fy-i { color: var(--violet-300); }
.fy-account-back { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }

@media (prefers-reduced-motion: reduce) {
	.fy-account-result > img { animation: none; }
}