/* A theme resembling classic R4 */
/* Maison Neue regular/italic + bold/italic from Cloudinary */
@font-face {
	font-family: 'Maison Neue';
	src: url(https://res.cloudinary.com/radio4000/raw/upload/v1492541388/maisonneueweb-book_ee98sm.woff2) format('woff2');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Maison Neue';
	src: url(https://res.cloudinary.com/radio4000/raw/upload/v1492541388/maisonneueweb-bookitalic_szjrvl.woff2)
		format('woff2');
	font-weight: 400;
	font-style: italic;
}
@font-face {
	font-family: 'Maison Neue';
	src: url(https://res.cloudinary.com/radio4000/raw/upload/v1492541388/maisonneueweb-bold_rvmbzr.woff2) format('woff2');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Maison Neue';
	src: url(https://res.cloudinary.com/radio4000/raw/upload/v1492541388/maisonneueweb-bolditalic_awvcg5.woff2)
		format('woff2');
	font-weight: 700;
	font-style: italic;
}

/* the theme */
r4-app {
	--font: 'Maison Neue', system-ui, segoe ui, sans-serif, 'Segoe UI Symbol';
	--s-font: 16px;
	--s: 1rem;
	--s-line-height: 1.3125;
	--s-radius: calc(var(--s) / 4);
	--s-form: calc(var(--s) * 36);
	--s-textarea: calc(var(--s) * 5);
	--s-container: 75rem;
	--s-container--list: 50rem;
	--s-container--channel-card: 35rem;
	--s-font-s1: 0.8rem;
	--c-light: hsl(0deg 1% 88%);
	--c-dark: hsl(0deg 0% 8%);
	--c-purple: #5d1ae6;
	--c-purple-light: #999fff;
	--c-dark--accent: #9c8fff;
	--c-dark-lighter: hsl(0deg 2.6% 13%);

	/* new vars */
	--c-bg-button: hsl(0, 0%, 98%);
	/* --c-bg-button2: color-mix(in oklch, var(--c-bg-button) 50%, white 80%); */
	--c-bg-button2: lightgray;
	--c-bg-input: hsl(0deg 0% 98%);
	--c-shadow-input: 1px 2px 2px #e7e6e4 inset;
	--c-shadow-button: 0 3px 0 -1px rgba(204, 204, 204, 0.9);
	--c-shadow-modal: 0 3px 12px rgba(0, 0, 0, 0.1);
}

r4-app[color-scheme='os'],
r4-app[color-scheme='light'] {
	/* --c-border: whitesmoke; */
	--c-border: hsl(20, 6%, 80%);
	--c-fg: hsl(40, 6%, 5%);
	--c-fg2: color-mix(in oklch, var(--c-fg) 100%, white 50%);
	--c-bg: hsl(40, 6%, 90%);
	--c-bg2: color-mix(in oklch, var(--c-bg) 100%, white 100%);
	--c-link: var(--c-purple);
}

r4-app[color-scheme='dark'] {
	--c-border: #2b2b2b;
	--c-fg: var(--c-light);
	/* --c-fg2: color-mix(in oklch, var(--c-fg) 100%, black 50%); */
	--c-fg2: gray;
	--c-bg: var(--c-dark);
	--c-bg2: rgb(0 0 0 / 40%);
	--c-bg-button: hsl(0deg 0% 15%);
	--c-bg-button2: hsl(0deg 0% 35%);
	--c-bg-input: hsl(0deg 0% 2%);
	--c-shadow-input: none;
	--c-link: var(--c-dark--accent);
}

r4-app a:hover,
r4-app a:active {
	text-decoration: underline;
}

r4-app a:has(r4-avatar) {
	background: none;
	padding: initial;
}

/* Default button */
r4-app button,
r4-app r4-dialog::part(button) {
	display: inline-block;
	font-weight: bold;
	border: 1px solid var(--c-border);
	border-radius: var(--s-radius);
	box-shadow: var(--c-shadow-button);
	box-sizing: border-box;
	cursor: pointer;
	line-height: 1;
	min-height: calc(var(--s));
	padding: calc(var(--s) / 2);
	background-color: var(--c-bg-button);
	color: var(--c-fg);
	text-align: center;
	text-decoration: none;
	transition: all 111ms ease-in-out;

	&:hover {
		background-color: var(--c-bg-button2);
	}
	&[disabled] {
		background-color: var(--c-bg);
		opacity: 0.7;
	}
}

r4-app[color-scheme='dark'] button {
	box-shadow: none;
}

r4-button-play button:active {
	position: relative;
	top: 1px;
}

/* Text inputs */
r4-app {
	& form {
		border: 1px solid transparent;
		transition: all 222ms ease-in-out;
		&:focus-within {
			border-color: var(--c-border);
			background-color: var(--c-bg-input);
			& button {
				background-color: var(--c-bg);
			}
		}
		& :is(input, textarea, select, button) {
			background-color: var(--c-bg-input);
			border: 1px solid var(--c-border);
			border-radius: var(--s-radius);
			font-size: 1rem;
			flex-grow: 1;
		}
	}
	& r4-dialog::part(dialog) {
		background-color: var(--c-bg);
	}
	& r4-dialog::part(form) {
		padding: var(--s);
		display: flex;
		justify-content: flex-end;
	}
}

r4-app h1,
r4-app h2,
r4-app h3 {
	margin: 0;
}

r4-layout::part(menu) {
	order: 1;
	z-index: 2;
	position: sticky;
	bottom: 0;
	overflow-x: auto;
	width: 100%;
	display: flex;
	justify-content: center;
}
r4-layout::part(panel) {
	background-color: var(--c-bg);
	/* z-index: 1; */
}
r4-layout::part(menu) {
	z-index: 1;
}
r4-layout [slot='main'] {
	z-index: 1;
}
r4-layout header[slot='menu'] {
	overflow-x: auto;
}

r4-layout::part(playback-summary) {
	background-color: var(--c-bg2);
}

r4-page-header {
	position: sticky;
	top: 0;
	z-index: 1;
	background-color: var(--c-bg);
	align-self: center;
}
r4-page-main {
	flex-grow: 1;
}
r4-page-main,
r4-page-footer {
	padding-left: calc(var(--s) / 1.5);
	padding-right: calc(var(--s) / 1.5);
	align-items: center;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	display: flex;
	& section {
		max-width: var(--s-container);
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
}
r4-page-main,
r4-page-footer,
r4-page-header menu {
	background-color: var(--c-bg);
}
r4-page-explore r4-page-header,
r4-page-channel r4-page-header,
r4-page-channel-tracks r4-page-header {
	z-index: 2;
}
r4-app section header {
	padding-top: calc(var(--s) / 2);
	padding-bottom: calc(var(--s) / 2);
	text-align: center;
	h2 a {
		text-decoration: none;
	}
}

/* same size header */
r4-page-header {
	& h1 {
		margin: 0;
		height: 100%;
		font-size: clamp(1rem, 4vmin, 2rem);
	}
}

/* Main menu */
r4-app-menu {
	display: flex;
}

r4-app-menu,
r4-app-user-menu {
	/* width: 100%; */
	& menu {
		background-color: var(--c-bg);
		flex-wrap: nowrap;
		overflow-x: auto;
		font-size: 1.2rem;
	}
}

/* Nav menus */
r4-app menu {
	border: 1px solid var(--c-border);
	border-radius: var(--s-radius);
	justify-content: center;
}
r4-app menu a {
	white-space: nowrap;
	padding: calc(var(--s) / 2) calc(var(--s) / 3);
	text-decoration: none;
	background: none;
	display: flex;
	align-items: center;
	height: 100%;
}
r4-app menu h1 a {
	/* large enough already */
	padding-top: 0;
	padding-bottom: 0;
}
r4-app menu a[aria-current] {
	background-color: var(--c-bg2);
}
r4-app-menu a {
	background: none;
}

r4-query {
	justify-content: center;
}

/* elements to text wrap  */
r4-channel-card-body r4-channel-name,
r4-channel-card-body r4-channel-slug {
	word-break: break-word;
}

r4-channel-delete {
	text-align: center;
}
/* Channel cards */
r4-channel-card {
	background-color: var(--c-bg2);
	display: flex;
	align-items: center;
}
r4-channel-card-body {
	padding: calc(var(--s) / 1);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
r4-channel-card-body > a {
	text-decoration: none;
}
r4-channel-card-body r4-channel-name {
	font-weight: bold;
}
r4-channel-card-body r4-channel-slug {
	color: var(--c-link);
	white-space: nowrap;
}
r4-channel-description {
	text-align: center;
}
r4-channel-name {
	font-weight: bold;
}

/* track */
r4-track {
	padding: calc(var(--s) / 2);
	background-color: var(--c-bg2);
	border: 1px solid var(--c-border);
}

r4-track a {
	background-color: transparent;
	text-decoration: none;
}
r4-track-title {
	display: flex;
}
r4-track-title a {
	padding: 0;
	/* font-weight: bold; */
}

r4-track-title a,
[color-scheme='dark'] r4-track-title a {
	color: var(--c-fg);
}

r4-track-description {
	color: var(--c-fg2);
	font-style: italic;
}

r4-track-description a {
	padding-left: calc(var(--s) / 4);
	padding-right: calc(var(--s) / 4);
	font-style: initial;
}

r4-track[playing] r4-button-play button {
	color: var(--c-purple);
	border-color: var(--c-purple);
}

/* Tracklists */
r4-list:has(r4-track) {
	border-radius: var(--s-radius);
	background-color: var(--c-bg2);
	r4-track {
		border: none;
		background-color: transparent;
	}

	& r4-list-item + r4-list-item r4-track {
		border-top: 1px solid var(--c-border);
	}
	r4-list-item:first-of-type r4-track {
		border-top-left-radius: var(--s-radius);
		border-top-right-radius: var(--s-radius);
	}

	r4-list-item:last-of-type r4-track {
		border-bottom-left-radius: var(--s-radius);
		border-bottom-right-radius: var(--s-radius);
	}

	r4-list-item:not(:last-child) r4-track {
		border-bottom: 1px solid var(--c-border);
	}
}
r4-list r4-channel-url {
	display: none;
}
r4-list r4-avatar {
	max-width: 5rem;
}

/* Forms */
r4-app form legend,
r4-app form label {
	font-weight: bold;
}
r4-app summary {
	padding: calc(var(--s) / 2);
}
r4-app form slot[name='submit'] fieldset:last-of-type {
	/* margin: var(--s) calc(var(--s) / 2) calc(var(--s) / 2) var(--s); */
	justify-content: center;
}
r4-app form button {
	margin: calc(var(--s) / 5);
}

/* Vertical track form layout */
r4-app form {
	max-width: 100%;
	& label {
		display: block;
		font-weight: bold;
	}

	& input[type='text'],
	& input[type='url'],
	& textarea {
		width: 100%;
	}

	& textarea {
		min-height: var(--s-textarea);
	}
}

r4-sign-in,
r4-sign-out,
r4-password-reset,
r4-sign-up,
r4-page-add,
r4-page-new,
r4-dialog {
	display: flex;
	justify-content: center;
	& form {
		width: 100%;
		padding: calc(var(--s) / 2);
		border-radius: var(--s-radius);
		& fieldset {
			margin: calc(var(--s) / 1);
		}
	}
}
r4-sign-in,
r4-sign-out,
r4-sign-up {
	& form {
		border: 1px solid var(--c-border);
	}
}
r4-sign-up form {
	border-color: var(--c-link);
}
r4-track-create {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	& form {
		border-color: var(--c-purple-light);
	}
}

r4-supabase-filters {
	& form fieldset:last-of-type {
		width: 100%;
		justify-content: center;
	}
	& summary {
		text-align: center;
	}
}
r4-supabase-modifiers fieldset + fieldset {
	margin-left: var(--s);
}
r4-supabase-modifiers input[name='page'],
r4-supabase-modifiers input[name='limit'] {
	max-width: calc(var(--s) * 6);
}
r4-supabase-modifiers fieldset + fieldset {
	margin-left: calc(var(--s) / 2);
}

/* player */
r4-layout r4-player {
	background-color: var(--c-bg2);
}

/* remove styles that shouldn't touch v1 player */
radio4000-player .Layout .TrackItem {
	background-color: inherit;
}
radio4000-player .PlayerControl-group .Btn {
	min-height: 0;
}

r4-channel-slug::before {
	content: '@';
}
r4-channel-slug {
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: clamp(calc(var(--s) * 10), calc(var(--s) * 30), 50vmin);
	overflow: hidden;
}

r4-avatar-update {
	& fieldset {
		justify-content: center;
		align-items: center;
	}
	& legend {
		text-align: center;
		width: 100%;
	}
}

r4-page-home {
	justify-content: center;
	& r4-favicon {
		display: flex;
		padding: var(--s);
		& svg {
			max-width: calc(var(--s) * 2);
		}
	}
}
[color-scheme='dark'] r4-favicon svg {
	fill: var(--c-fg);
	opacity: 0.3;
}
r4-page-add {
	justify-content: center;
}
r4-page-channel,
r4-page-channel-tracks {
	& r4-list:has(r4-track) {
		max-width: var(--s-container--list);
		width: 100%;
		border: 1px solid var(--c-border);
	}
}
r4-page-channel {
	& r4-channel-card {
		max-width: var(--s-container--channel-card);
		flex-direction: column;
		flex-wrap: nowrap;
		padding: var(--s);
		& r4-channel-card-body {
			display: flex;
			flex-direction: column;
		}
		& r4-avatar {
			padding: var(--s);
			max-width: calc(var(--s-container--channel-card) / 2);
		}
		& r4-button-play {
			order: 10;
			display: flex;
			width: 100%;
			justify-content: center;
			margin: 0;
			& button {
				width: 100%;
				&::after {
					display: inline;
					content: 'Play';
				}
			}
		}
		& r4-channel-link {
			text-align: center;
		}
		& r4-channel-name {
			font-size: 2em;
		}
		& r4-channel-slug {
			padding: calc(var(--s) / 3);
		}
	}
}
r4-map {
	& r4-map-popup dialog[inline] {
		max-width: calc(var(--s-container--channel-card) / 2.5);
		margin: calc(var(--s) / 3);
		padding: 0;
	}
	& r4-channel-card-body {
		justify-content: center;
	}
	& r4-channel-card {
		flex-direction: column;
		justify-content: center;
		text-align: center;
		padding: var(--s);
		& r4-channel-url {
			display: none;
		}
	}
}
r4-page-channel-followers,
r4-page-channel-followings,
r4-page-home,
r4-page-add,
r4-page-explore,
r4-page-settings {
	& r4-list {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: calc(var(--s) / 1.5);
	}
}

r4-page-settings,
r4-page-channel-update {
	& r4-page-main {
		border: 1px solid var(--c-border);
		margin: calc(var(--s) / 1.5);
	}
	& section {
		min-height: 25vmax;
		justify-content: center;
	}
	& section:not(:last-child) {
		border-bottom: 1px solid var(--c-border);
	}
	& r4-map-position,
	& r4-channel-update {
		width: 100%;
	}
	& fieldset {
		margin: var(--s);
	}
}
r4-page-settings {
	& r4-email-display,
	& r4-email-update,
	& r4-password-update,
	& details {
		width: 100%;
		max-width: 40rem;
	}
}
label[for='token'] input[name='token'] {
	display: none;
}