/*
 * Copamex Site -- the Artist area (1.8.0).
 *
 * The account panel, the registration gate, (1.9.0) the public profile
 * form and (1.10.0) the releases and the release form (`ArtistAccount`,
 * `ArtistRegistration`, `ArtistProfilePage`, `ArtistReleasesPage`,
 * `ArtistSubmitPage`), and the accent of ILM Register's sign-in form on
 * these pages. Everything is scoped to their own classes and drawn with the
 * site's design tokens (`--ilm-color-*`, `--ilm-radius-*`, `--ilm-spacing-*`,
 * from the Builder's Global Styles), so a change of palette there changes
 * this too. The page around them -- heading, sections, width -- is the
 * Builder's. Plain CSS, no build step.
 */

.copamex-artist {
	--copamex-artist-line: var(--ilm-color-border, rgba(255, 255, 255, 0.12));
	--copamex-artist-surface: var(--ilm-color-surface, #141416);
	--copamex-artist-muted: var(--ilm-color-fg-muted, #a1a1aa);
	display: grid;
	gap: var(--ilm-spacing-md, 24px);
	box-sizing: border-box;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.copamex-artist *,
.copamex-artist *::before,
.copamex-artist *::after {
	box-sizing: inherit;
}

.copamex-artist .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------- navigation */

.copamex-artist__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ilm-spacing-xs, 8px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.copamex-artist__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border: 1px solid var(--copamex-artist-line);
	border-radius: 999px;
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.copamex-artist__nav a:hover {
	border-color: var(--ilm-color-border-strong, #767680);
}

.copamex-artist__nav a[aria-current="page"] {
	border-color: var(--ilm-color-primary, #d10a0a);
	background: var(--ilm-color-primary, #d10a0a);
	color: var(--ilm-color-on-primary, #fff);
}

.copamex-artist__nav .copamex-artist__signout {
	margin-left: auto;
}

/* ---------------------------------------------------------------- cards */

.copamex-artist__card {
	padding: var(--ilm-spacing-md, 24px);
	border: 1px solid var(--copamex-artist-line);
	border-radius: var(--ilm-radius-md, 10px);
	background: var(--copamex-artist-surface);
}

.copamex-artist__card > :first-child {
	margin-top: 0;
}

.copamex-artist__card > :last-child {
	margin-bottom: 0;
}

.copamex-artist__card p {
	margin: 0 0 0.75rem;
	line-height: 1.6;
}

.copamex-artist__title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	line-height: 1.3;
}

/* A status is always words, with a mark beside them: never colour alone. */
.copamex-artist__status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.75rem !important;
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--ilm-color-border-strong, #767680);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
}

.copamex-artist__status::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--ilm-color-primary, #d10a0a);
}

.copamex-artist__facts {
	display: grid;
	grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
	gap: 0.5rem 1.5rem;
	margin: 0 0 1rem;
}

.copamex-artist__facts dt {
	color: var(--copamex-artist-muted);
}

.copamex-artist__facts dd {
	margin: 0;
	font-weight: 600;
}

.copamex-artist__muted,
.copamex-artist__note {
	color: var(--copamex-artist-muted);
	font-size: 0.9375rem;
}

/* ---------------------------------------------------------------- buttons */

.copamex-artist__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ilm-spacing-xs, 8px);
	margin: 1rem 0 0 !important;
}

.copamex-artist__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.625rem 1.25rem;
	border: 1px solid var(--ilm-color-border-strong, #767680);
	border-radius: var(--ilm-radius-sm, 6px);
	color: inherit;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.copamex-artist__button:hover {
	border-color: var(--ilm-color-fg, #fff);
}

.copamex-artist__button--primary {
	border-color: var(--ilm-color-primary, #d10a0a);
	background: var(--ilm-color-primary, #d10a0a);
	color: var(--ilm-color-on-primary, #fff);
}

.copamex-artist__button--primary:hover {
	border-color: var(--ilm-color-primary-hover, #b00000);
	background: var(--ilm-color-primary-hover, #b00000);
}

.copamex-artist a:focus-visible,
.copamex-artist__note--signed-in a:focus-visible {
	outline: 2px solid var(--ilm-color-focus-ring, #ff4d4d);
	outline-offset: 2px;
}

.copamex-artist__note--signed-in {
	margin: 0 0 var(--ilm-spacing-sm, 16px);
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--ilm-color-primary, #d10a0a);
	background: var(--ilm-color-surface, #141416);
}

/* ---------------------------------------------------------------- ILM Register's sign-in, on these pages */

.ilm-register-sign-in.ilm-register-embed {
	max-width: 32rem;
	padding: var(--ilm-spacing-md, 24px);
	border: 1px solid var(--ilm-color-border, rgba(255, 255, 255, 0.12));
	border-radius: var(--ilm-radius-md, 10px);
	background: var(--ilm-color-surface, #141416);
}

.ilm-register-sign-in input[type="text"],
.ilm-register-sign-in input[type="password"] {
	border-color: var(--ilm-color-border-strong, #767680);
	background: var(--ilm-color-bg, #0a0a0b);
}

.ilm-register-sign-in input[type="text"]:focus-visible,
.ilm-register-sign-in input[type="password"]:focus-visible,
.ilm-register-sign-in .ilm-register-button:focus-visible,
.ilm-register-sign-in a:focus-visible,
.ilm-register-sign-in input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--ilm-color-focus-ring, #ff4d4d);
	outline-offset: 2px;
}

.ilm-register-sign-in .ilm-register-button {
	min-height: 44px;
	border-color: var(--ilm-color-border-strong, #767680);
	border-radius: var(--ilm-radius-sm, 6px);
}

.ilm-register-sign-in .ilm-register-button--primary {
	border-color: var(--ilm-color-primary, #d10a0a);
	background: var(--ilm-color-primary, #d10a0a);
	color: var(--ilm-color-on-primary, #fff);
}

.ilm-register-sign-in .ilm-register-button--primary:hover {
	border-color: var(--ilm-color-primary-hover, #b00000);
	background: var(--ilm-color-primary-hover, #b00000);
}

.ilm-register-sign-in .ilm-register-sign-in__error {
	border-left-color: var(--ilm-color-primary, #d10a0a);
}

.ilm-register-sign-in .ilm-register-sign-in__lost {
	color: var(--ilm-color-link, #ff4d4d);
}

/* ---------------------------------------------------------------- the public profile form (1.9.0) */

.copamex-artist__subtitle {
	margin: 1.25rem 0 0.5rem;
	font-size: 1rem;
}

.copamex-artist__form {
	display: grid;
	gap: var(--ilm-spacing-md, 24px);
	margin-top: var(--ilm-spacing-sm, 16px);
}

.copamex-artist__fieldset {
	display: grid;
	gap: var(--ilm-spacing-sm, 16px);
	min-width: 0;
	margin: 0;
	padding: var(--ilm-spacing-sm, 16px);
	border: 1px solid var(--copamex-artist-line);
	border-radius: var(--ilm-radius-sm, 6px);
}

.copamex-artist__fieldset legend {
	padding: 0 0.5rem;
	font-weight: 700;
}

.copamex-artist__field {
	display: grid;
	gap: 0.375rem;
	min-width: 0;
}

.copamex-artist__field label {
	font-weight: 600;
}

.copamex-artist__required {
	color: var(--copamex-artist-muted);
	font-weight: 400;
}

.copamex-artist__field input[type="text"],
.copamex-artist__field input[type="url"],
.copamex-artist__field input[type="date"],
.copamex-artist__field select,
.copamex-artist__field textarea {
	width: 100%;
	min-height: 44px;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--ilm-color-border-strong, #767680);
	border-radius: var(--ilm-radius-sm, 6px);
	background: var(--ilm-color-bg, #0a0a0b);
	color: inherit;
	font: inherit;
	line-height: 1.5;
}

.copamex-artist__field textarea {
	resize: vertical;
}

.copamex-artist__field [aria-invalid="true"] {
	border-color: var(--ilm-color-primary, #d10a0a);
	border-width: 2px;
}

.copamex-artist__field--check {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	column-gap: 0.75rem;
}

.copamex-artist__field--check input[type="checkbox"] {
	width: 1.375rem;
	height: 1.375rem;
	margin: 0;
	accent-color: var(--ilm-color-primary, #d10a0a);
}

.copamex-artist__field--check .copamex-artist__help,
.copamex-artist__field--check .copamex-artist__error {
	grid-column: 1 / -1;
}

.copamex-artist__help {
	margin: 0 !important;
	color: var(--copamex-artist-muted);
	font-size: 0.875rem;
}

/* An error says so in words, after a mark: never colour alone. */
.copamex-artist__error {
	margin: 0 !important;
	font-size: 0.9375rem;
	font-weight: 600;
}

.copamex-artist__error::before {
	content: "⚠ ";
}

.copamex-artist__alert,
.copamex-artist__notice {
	margin: 0 0 var(--ilm-spacing-sm, 16px);
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--ilm-color-primary, #d10a0a);
	background: var(--ilm-color-bg, #0a0a0b);
}

.copamex-artist__alert ul {
	margin: 0.5rem 0 0;
	padding-left: 1.25rem;
}

.copamex-artist__alert a {
	color: inherit;
}

.copamex-artist__form input:focus-visible,
.copamex-artist__form select:focus-visible,
.copamex-artist__form textarea:focus-visible,
.copamex-artist__form button:focus-visible,
.copamex-artist__alert:focus-visible {
	outline: 2px solid var(--ilm-color-focus-ring, #ff4d4d);
	outline-offset: 2px;
}

button.copamex-artist__button {
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* ---------------------------------------------------------------- releases (1.10.0) */

.copamex-artist__releases {
	display: grid;
	gap: var(--ilm-spacing-sm, 16px);
	margin: var(--ilm-spacing-sm, 16px) 0 0;
	padding: 0;
	list-style: none;
}

.copamex-artist__release {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: var(--ilm-spacing-sm, 16px);
	align-items: start;
	padding-top: var(--ilm-spacing-sm, 16px);
	border-top: 1px solid var(--copamex-artist-line);
}

.copamex-artist__cover {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: var(--ilm-radius-sm, 6px);
	object-fit: cover;
}

.copamex-artist__cover--empty {
	background: var(--ilm-color-bg, #0a0a0b);
	border: 1px solid var(--copamex-artist-line);
}

.copamex-artist__release-body > :first-child {
	margin-top: 0;
}

.copamex-artist__current {
	display: flex;
	align-items: center;
	gap: var(--ilm-spacing-sm, 16px);
}

.copamex-artist__thumb {
	width: 96px;
	height: 96px;
	border-radius: var(--ilm-radius-sm, 6px);
	object-fit: cover;
}

.copamex-artist__fieldset {
	min-width: 0;
}

.copamex-artist__field input[type="file"] {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	font: inherit;
}

.copamex-artist__card--form .ilm-form {
	margin: 0;
}

@media (max-width: 600px) {
	.copamex-artist__release {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	.copamex-artist__cover {
		width: 64px;
		height: 64px;
	}

	.copamex-artist__fieldset {
		padding: var(--ilm-spacing-xs, 8px) var(--ilm-spacing-sm, 16px) var(--ilm-spacing-sm, 16px);
	}

	.copamex-artist__card,
	.ilm-register-sign-in.ilm-register-embed {
		padding: var(--ilm-spacing-sm, 16px);
	}

	.copamex-artist__facts {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.125rem;
	}

	.copamex-artist__facts dd {
		margin-bottom: 0.5rem;
	}

	.copamex-artist__nav .copamex-artist__signout {
		margin-left: 0;
	}

	.copamex-artist__button {
		flex: 1 1 100%;
	}
}