/*
 * The new-member flow (060): the Plan and Done steps, the starter-picture
 * picker and "Save & exit". Tokens only — every value is a csds variable.
 * The stepper itself is the design system's (`ui.css`).
 *
 * Rules on lists and paragraphs are scoped under `.cs-intake` because the
 * page's `.csds-content p` / `.csds-content ul` (0,1,1) out-rank one class.
 */

.cs-intake {
	max-width: 760px;
	margin: 0 auto;
}

/* The Plan step's comparison table (068) needs the content's full width:
   six plans side by side do not fit 760px. Its words keep the reading
   width. */
.cs-intake.cs-intake--plans {
	max-width: none;
}

.cs-intake--plans > :not(.csds-plans) {
	max-width: 760px;
}

.cs-intake .cs-intake__title {
	margin: 0 0 var(--csds-space-2);
	color: var(--csds-ink);
	font: var(--csds-heading-section);
}

.cs-intake .cs-intake__lead,
.cs-intake .cs-intake__line {
	margin: 0 0 var(--csds-space-4);
	padding: 0;
	color: var(--csds-ink-muted);
	font: var(--csds-body-default);
}

.cs-intake__notice {
	margin-bottom: var(--csds-space-4);
}

/* ---- Plan step ---- */

.cs-intake .cs-intake__plans {
	display: grid;
	gap: var(--csds-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-intake .cs-intake__plan {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--csds-space-1) var(--csds-space-4);
	align-items: center;
	margin: 0;
	padding: var(--csds-space-4);
	background: var(--csds-surface-panel);
	border: var(--csds-border-hairline) solid var(--csds-border-default);
}

.cs-intake .cs-intake__plan--held {
	border-color: var(--csds-state-win);
}

.cs-intake__plan-head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--csds-space-1) var(--csds-space-3);
	align-items: baseline;
}

.cs-intake__plan-name {
	color: var(--csds-ink);
	font: var(--csds-heading-card);
}

.cs-intake__plan-price {
	color: var(--csds-gold-light);
	font: var(--csds-body-default);
}

.cs-intake .cs-intake__plan-limits,
.cs-intake .cs-intake__plan-extras {
	grid-column: 1;
	margin: 0;
	padding: 0;
	font: var(--csds-body-caption);
}

.cs-intake__plan-limits {
	color: var(--csds-ink);
}

.cs-intake__plan-extras {
	color: var(--csds-ink-muted);
}

.cs-intake a.cs-intake__plan-go {
	grid-column: 2;
	grid-row: 1 / span 3;
	text-decoration: none;
}

@media (max-width: 480px) {
	.cs-intake .cs-intake__plan {
		grid-template-columns: 1fr;
	}

	.cs-intake a.cs-intake__plan-go {
		grid-column: 1;
		grid-row: auto;
		margin-top: var(--csds-space-2);
	}
}

/* ---- Done step ---- */

.cs-intake__made {
	display: flex;
	gap: var(--csds-space-4);
	align-items: center;
	margin-bottom: var(--csds-space-4);
}

.cs-intake__made-avatar {
	width: 96px;
	height: 96px;
	object-fit: cover;
}

.cs-intake__made-name {
	color: var(--csds-ink);
	font: var(--csds-display-name);
}

.cs-intake__made-plan {
	color: var(--csds-ink-muted);
	font: var(--csds-body-caption);
}

.cs-intake__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--csds-space-3);
}

.cs-intake .cs-intake__actions a.csds-btn {
	text-decoration: none;
}

/* ---- Starter pictures, on the create form ---- */

.cs-starter-avatars {
	margin: var(--csds-space-3) 0 0;
	padding: 0;
	border: 0;
}

.cs-starter-avatars legend {
	margin-bottom: var(--csds-space-2);
	color: var(--csds-ink-muted);
	font: var(--csds-body-caption);
}

.cs-starter-avatars__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--csds-space-2);
}

.cs-starter-avatars__opt {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	background: var(--csds-surface-raised);
	border: var(--csds-border-thick) solid var(--csds-border-default);
	cursor: pointer;
}

.cs-starter-avatars__opt img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cs-starter-avatars__opt--none span {
	color: var(--csds-ink-muted);
	font: var(--csds-body-caption);
}

/* The radio stays in the page for keyboard and screen reader; the picture is
   what shows. The ring moves with the choice and with focus. */
.cs-starter-avatars__opt input {
	position: absolute;
	opacity: 0;
	inset: 0;
	margin: 0;
	cursor: pointer;
}

.cs-starter-avatars__opt:has(input:checked) {
	border-color: var(--csds-state-win);
}

.cs-starter-avatars__opt:has(input:focus-visible) {
	outline: var(--csds-border-thick) solid var(--csds-gold-light);
	outline-offset: 2px;
}

/* ---- Save & exit ---- */

.wrestler-manage-form .cs-intake-save-exit {
	display: block;
	width: 100%;
	margin-top: var(--csds-space-3);
	padding: var(--csds-space-3);
	background: var(--csds-surface-panel);
	border: var(--csds-border-hairline) solid var(--csds-border-default);
	color: var(--csds-ink);
	font: var(--csds-body-button);
	text-transform: uppercase;
	cursor: pointer;
}

.wrestler-manage-form .cs-intake-save-exit:focus-visible {
	outline: var(--csds-border-thick) solid var(--csds-gold-light);
	outline-offset: 2px;
}

.wrestler-manage-form .cs-intake-save-exit[disabled] {
	opacity: 0.45;
	cursor: not-allowed;
}

/* ---- The create form: three steps beside a preview ---- */

/* `#manage-wrestler-form` is 425px wide in the form's own stylesheet
   (index.css, one id). Beside a preview it takes the column instead.
   The preview is the larger column (user, 2026-09-26): the wrestler being
   made is the subject of the page, the form is how it is made. */
.cs-wcreate {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: var(--csds-space-5);
	align-items: start;
}

.cs-wcreate #manage-wrestler-form {
	max-width: none;
	min-width: 0;
}

.cs-wcreate .cs-wsub-tabs {
	display: flex;
	gap: var(--csds-space-1);
	margin: 0 0 var(--csds-space-4);
	padding: 0;
	list-style: none;
	border-bottom: var(--csds-border-hairline) solid var(--csds-border-default);
}

.cs-wcreate .cs-wsub-tabs li {
	flex: 1 1 0;
	margin: 0;
	padding: 0;
}

.cs-wsub-tab {
	width: 100%;
	margin-bottom: calc(-1 * var(--csds-border-hairline));
	padding: var(--csds-space-2) var(--csds-space-1);
	background: none;
	border: 0;
	border-bottom: var(--csds-border-thick) solid transparent;
	color: var(--csds-ink-muted);
	font: var(--csds-heading-label);
	letter-spacing: var(--csds-heading-label-letter-spacing);
	text-transform: uppercase;
	cursor: pointer;
}

.cs-wsub-tab.is-done {
	color: var(--csds-state-win);
}

.cs-wsub-tab.is-current {
	border-bottom-color: var(--csds-crimson);
	color: var(--csds-ink);
}

.cs-wsub-tab:focus-visible,
.cs-wsub__nav button:focus-visible {
	outline: var(--csds-border-thick) solid var(--csds-gold-light);
	outline-offset: 2px;
}

.cs-wcreate .cs-wsub__lead {
	margin: 0 0 var(--csds-space-4);
	padding: 0;
	color: var(--csds-ink-muted);
	font: var(--csds-body-default);
}

.cs-wsub__nav {
	display: flex;
	gap: var(--csds-space-3);
	justify-content: space-between;
	align-items: center;
	margin-top: var(--csds-space-4);
}

.cs-wsub__nav .cs-wsub__next,
.cs-wsub__nav #manage-submit {
	margin-left: auto;
}

.cs-wsub__back,
.cs-wsub__next {
	padding: var(--csds-space-2) var(--csds-space-4);
	font: var(--csds-body-button);
	text-transform: uppercase;
	cursor: pointer;
}

.cs-wsub__back {
	background: none;
	border: var(--csds-border-hairline) solid var(--csds-border-default);
	color: var(--csds-ink-muted);
}

/* Blood, not crimson: ink on crimson is 4.13:1 at this size. */
.cs-wsub__next {
	background: var(--csds-blood);
	border: var(--csds-border-hairline) solid var(--csds-blood);
	color: var(--csds-ink);
}

/* The Create button keeps its look from index.css, sized to sit in the row. */
.cs-wcreate .cs-wsub__nav #manage-submit {
	display: inline-block;
	width: auto;
	padding: var(--csds-space-2) var(--csds-space-5);
}

/* ---- Preview ---- */

.cs-wpreview {
	position: sticky;
	top: calc(var(--csds-topbar-height-desktop, 0px) + var(--csds-space-4));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--csds-space-3);
	padding: var(--csds-space-6);
	text-align: center;
}

.cs-wpreview__avatar-wrap {
	width: min(100%, 320px);
	aspect-ratio: 1;
	background: var(--csds-surface-raised);
	border: var(--csds-border-hairline) solid var(--csds-border-default);
}

.cs-wpreview__avatar {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cs-wpreview__name {
	color: var(--csds-ink);
	font: var(--csds-display-title);
	overflow-wrap: anywhere;
}

.cs-wpreview__meta {
	color: var(--csds-ink-muted);
	font: var(--csds-body-lead);
}

.cs-wcreate .cs-wpreview__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--csds-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each style tag is a fixed-width box, its icon above its name (062). A
   long name wraps; the row's boxes keep one height (flex stretch). */
.cs-wcreate .cs-wpreview__tags li {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--csds-space-1);
	width: 100px;
	margin: 0;
	padding: var(--csds-space-2) var(--csds-space-1);
	border: var(--csds-border-hairline) solid var(--csds-border-default);
	color: var(--csds-ink);
	font: var(--csds-body-default);
	text-align: center;
}

.cs-wpreview__tag-icon {
	display: block;
	width: auto;
	max-width: 100%;
	height: 64px;
	object-fit: contain;
	font-size: 40px; /* An emoji icon. */
	line-height: 64px;
}

.cs-wpreview__tag-name {
	overflow-wrap: anywhere;
}

.cs-wpreview__plan {
	margin-top: var(--csds-space-2);
	padding-top: var(--csds-space-3);
	border-top: var(--csds-border-hairline) solid var(--csds-border-default);
	color: var(--csds-ink-muted);
	font: var(--csds-body-default);
}

.cs-wpreview__plan b {
	color: var(--csds-ink);
}

/* Narrow screens: one column, the preview first, compact and not sticky.
   At 960px the form's 40% would be under 380px. */
@media (max-width: 960px) {
	.cs-wcreate {
		grid-template-columns: minmax(0, 1fr);
	}

	.cs-wpreview {
		position: static;
		padding: var(--csds-space-4);
		gap: var(--csds-space-1);
		order: -1;
		display: grid;
		grid-template-columns: 72px 1fr;
		column-gap: var(--csds-space-3);
		align-items: center;
		text-align: left;
	}

	.cs-wpreview__avatar-wrap {
		grid-row: 1 / span 4;
		width: 72px;
		height: 72px;
	}

	.cs-wpreview__name {
		font: var(--csds-display-name);
	}

	.cs-wpreview__meta,
	.cs-wcreate .cs-wpreview__tags li,
	.cs-wpreview__plan {
		font: var(--csds-body-caption);
	}

	.cs-wcreate .cs-wpreview__tags {
		justify-content: flex-start;
	}

	/* Beside the 72px avatar there is room for three narrower boxes. */
	.cs-wcreate .cs-wpreview__tags li {
		width: 64px;
		padding: var(--csds-space-1);
	}

	.cs-wpreview__tag-icon {
		height: 36px;
		font-size: 24px;
		line-height: 36px;
	}

	.cs-wpreview__plan {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}
}

/* ---- Style cards (create page) ---- */

/* index.css boxes every `.wrestler-manage-form fieldset.form-group` (0,2,1);
   a style group is a row of cards, not a box. */
.cs-wcreate .wrestler-manage-form fieldset.cs-style-group {
	margin: 0 0 var(--csds-space-4);
	padding: 0;
	border: 0;
}

.cs-wcreate .wrestler-manage-form .cs-style-group legend {
	margin-bottom: var(--csds-space-2);
	padding: 0;
}

.cs-style-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--csds-space-2);
}

.cs-style-opt {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: var(--csds-space-2) var(--csds-space-3);
	background: var(--csds-surface-raised);
	border: var(--csds-border-hairline) solid var(--csds-border-default);
	color: var(--csds-ink);
	font: var(--csds-body-default);
	cursor: pointer;
}

/* Icon and description (061), from Fight Simulator's style list.
   `.form-group label { display: block }` (index.css, 0,1,1) beat the card's
   own `display: flex` above — invisible while a card held one line of text.
   Two classes (0,2,0) win it back. */
.cs-style-grid .cs-style-opt {
	display: flex;
	gap: var(--csds-space-2);
}

.cs-style-opt__icon {
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	object-fit: contain;
	font-size: 24px;
	line-height: 32px;
	text-align: center;
}

.cs-style-opt__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.cs-style-opt__desc {
	color: var(--csds-ink-muted);
	font: var(--csds-body-caption);
}

/* The radio stays for keyboard and screen reader; the card is what shows. */
.cs-style-opt input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.cs-style-opt:hover {
	border-color: var(--csds-ink-muted);
}

.cs-style-opt:has(input:checked) {
	border-color: var(--csds-state-win);
	box-shadow: inset 0 0 0 1px var(--csds-state-win);
}

.cs-style-opt:has(input:focus-visible) {
	outline: var(--csds-border-thick) solid var(--csds-gold-light);
	outline-offset: 2px;
}

/* Chosen in another slot: dimmed as a disabled button is (`.csds-btn[disabled]`). */
.cs-style-opt.is-taken {
	border-style: dashed;
	opacity: 0.45;
	cursor: not-allowed;
}

.cs-style-opt.is-taken input {
	cursor: not-allowed;
}

/* jQuery Validate writes its message inside the first card; the step's own
   check reports a missing style instead (intake.js). */
.cs-wcreate .cs-style-grid div.errorMessage {
	display: none;
}

.cs-wcreate .cs-style-hint {
	margin: 0;
	padding: 0;
	color: var(--csds-ink-muted);
	font: var(--csds-body-caption);
}

/* ---- Edit (062) ---- */

/* A locked style on edit: the held style as a card with no radio. Read-only,
   so no pointer, no hover and no "chosen" ring — it is a value, not a choice. */
.cs-style-grid .cs-style-opt.is-locked {
	background: var(--csds-surface-panel);
	color: var(--csds-ink-muted);
	cursor: default;
}

.cs-style-grid .cs-style-opt.is-locked:hover {
	border-color: var(--csds-border-default);
}

/* `.readonly-value` (index.css) boxes a value; inside a card the card is the box. */
.cs-style-opt .cs-style-opt__name.readonly-value {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: inherit;
}

/* The one save on edit sits under the tabs, where create has "Save & exit".
   `#manage-submit` (index.css, one id) sets a 30px gap; the id wins it back. */
.cs-wcreate--edit #manage-submit {
	margin-top: var(--csds-space-4);
}