/*
 * XBLAH's Modding Tool website: account and sign-in pages (account/*, user/login,
 * user/register, user/recover-password, subscriptions/thanks).
 * Loaded with "xmt_styles": ["account"] in the page JSON. Builds on xmt.css. Prefix: x-acc-.
 */

.x-row--center { justify-content: center; }
.x-card-head--center { align-items: center; flex-wrap: wrap; }
.x-card-head .x-badge { margin-top: 2px; }

/* Card heading as a section title inside a card without x-card-head */
.x-card > h2.x-card-title { margin: 0; }

/* ------------------------------------------------------------------ overview */

.x-acc-pitch { font-size: 14px; color: #C1C1C3; text-wrap: pretty; }

.x-acc-thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.x-acc-thumb {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--x-card-border);
}
.x-acc-thumb .x-frame { border-radius: 0; }
.x-acc-thumb .x-media--empty .x-ms { font-size: 20px; }
.x-acc-thumb .x-media--empty span { display: none; }
.x-acc-thumb figcaption {
	padding: 6px 8px;
	font-size: 12px;
	color: var(--x-t1);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* "Read the documentation" row */
.x-acc-link {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 34px;
	font-size: 14px;
	color: var(--x-t1);
}
.x-acc-link > .x-ms:first-child { color: var(--x-t5); }
.x-acc-link-arrow { font-size: 16px; color: #5A5A5C; transition: transform 0.12s ease, color 0.12s ease; }
.x-acc-link:hover { color: var(--x-t0); }
.x-acc-link:hover .x-acc-link-arrow { color: var(--x-accent-text); transform: translateX(2px); }

/* Field + button on one line (Discord username) */
.x-acc-inline { display: flex; align-items: flex-end; gap: 10px; }
.x-acc-inline .x-field { flex: 1; }
@media (max-width: 480px) {
	.x-acc-inline { flex-direction: column; align-items: stretch; }
}

/* <details> whose summary is a button (Change account, Delete my account) */
.x-acc-reveal { display: block; }
.x-acc-reveal > summary { list-style: none; width: fit-content; }
.x-acc-reveal > summary::-webkit-details-marker { display: none; }
.x-acc-reveal > * + * { margin-top: 14px; }
.x-acc-reveal[open] > summary.x-btn--ghost { color: var(--x-t4); }
.x-acc-unlink { color: var(--x-t4); padding-left: 0; padding-right: 0; }
.x-acc-unlink:hover { color: var(--x-error); background: transparent; }

/* Tool sign-in state */
.x-acc-status {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0 0;
	border-top: 1px solid var(--x-line);
	font-size: 14px;
	color: var(--x-t1);
}
.x-acc-status > .x-ms { font-size: 19px; color: var(--x-ok); margin-top: 1px; }
.x-acc-status--off > .x-ms { color: var(--x-t5); }
.x-acc-status--off { color: var(--x-t3); }

/* ------------------------------------------------------------------ subscription */

.x-acc-invoices { margin: 0; padding: 0; list-style: none; }
.x-acc-invoices li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 0;
	border-top: 1px solid var(--x-line);
}
.x-acc-invoice-date { flex: 1; min-width: 0; font-size: 14px; color: var(--x-t1); }
.x-acc-invoice-amount { font-size: 13px; color: var(--x-t2); }
.x-acc-invoice-action {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	color: var(--x-t5);
}
.x-acc-invoice-action:hover { color: var(--x-t0); background: var(--x-field); }
@media (max-width: 380px) {
	.x-acc-invoices li { gap: 8px; }
}

.x-acc-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.x-acc-plan {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 14px;
	border-radius: 10px;
	background: var(--x-field);
	border: 1px solid var(--x-field-border);
}
.x-acc-plan.is-current { background: var(--x-adv-surface); border-color: var(--x-accent); }
.x-acc-plan-head { display: flex; align-items: center; gap: 8px; }
.x-acc-plan-head strong {
	flex: 1;
	min-width: 0;
	font-family: var(--x-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--x-t0);
}
.x-acc-plan-switch { font-size: 13px; font-weight: 600; }

/* ------------------------------------------------------------------ cancel */

.x-acc-narrow { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 18px; }

.x-acc-consequences { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.x-acc-consequences li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--x-t1); text-wrap: pretty; }
.x-acc-consequences li > .x-ms { font-size: 19px; color: var(--x-ok); }
.x-acc-consequences li.is-no > .x-ms { color: var(--x-error); }

.x-acc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.x-acc-chip { position: relative; display: inline-flex; }
.x-acc-chips .x-chip { background: transparent; }
.x-acc-chips input:checked + .x-chip { background: var(--x-adv-surface); border-color: var(--x-accent); color: var(--x-t0); }

/* ------------------------------------------------------------------ payment received */

.x-acc-thanks { align-items: center; background: none; }
.x-acc-thanks-inner {
	width: 100%;
	max-width: 520px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	text-align: center;
}
.x-acc-disc {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(127, 192, 138, 0.15);
	color: var(--x-ok);
}
.x-acc-disc .x-ms { font-size: 34px; }
.x-acc-disc--neutral { background: var(--x-field); color: var(--x-t4); }
.x-acc-thanks-title {
	font-family: var(--x-display);
	font-size: clamp(24px, 4vw, 30px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--x-t0);
	text-wrap: balance;
}
.x-acc-thanks-lead { font-size: 15px; color: var(--x-t3); text-wrap: pretty; overflow-wrap: anywhere; }

.x-acc-steps {
	width: 100%;
	margin: 0;
	padding: 16px;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
	border-radius: 12px;
	background: var(--x-card);
	border: 1px solid var(--x-card-border);
	text-align: left;
}
.x-acc-steps li { display: flex; align-items: flex-start; gap: 12px; }
.x-acc-steps .x-step-n { width: 24px; height: 24px; margin-top: 1px; }
.x-acc-steps li > div { display: flex; flex-direction: column; min-width: 0; }
.x-acc-steps strong { font-size: 14px; font-weight: 600; color: var(--x-t0); }
.x-acc-steps span { font-size: 13px; color: var(--x-t4); overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ profile */

.x-acc-avatar-row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.x-acc-avatar-row .x-avatar--lg { font-family: var(--x-display); }
.x-acc-avatar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.x-acc-avatar-text strong { font-size: 15px; font-weight: 600; color: var(--x-t0); overflow-wrap: anywhere; }
.x-acc-avatar-text .x-small { overflow-wrap: anywhere; }
.x-tip span { overflow-wrap: anywhere; }

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

.x-auth .cf-turnstile { min-height: 65px; max-width: 100%; overflow: hidden; }
.x-auth-card .x-tip { font-size: 13px; color: #C9E5CF; }
.x-auth-card .x-sub strong { color: var(--x-t1); font-weight: 600; overflow-wrap: anywhere; }

/* Long values never push the page sideways */
.x-kv > span:last-child { overflow-wrap: anywhere; }