@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html {
	font-size: 14px;
}

r4-app {
	--s: 1rem;
	--s-radius: 3px;
	--s-font: 14px;
	--s-line-height: 1.5;
	--font: fira sans, system-ui, segoe ui, sans-serif, 'Segoe UI Symbol';
	/* textarea height */
	--s-textarea: 4em;
	/* width of forms */
	--s-form: 50ch;

	/* in use */
	--blue: #7A8DB3;
	--green: #99AD6A;
	--pink: #F0A0C0;
	--purple: #6f43c5;
	--red: #CF6A4C;
	--yellow: #EEC674;
	/* maybe */
	--brown2: hsl(26, 100%, 69%);
	--brown: #C59F6F;
	--mint: #B3F6C0;
	--pink2: hsl(6, 100%, 86%);
	--pink3: hsl(300, 50%, 69%);

	/* blue */
	--blue-800: lch(20% 10.6 269.69);
	--blue-750: lch(24% 12.1 269.69);
	--blue-625: lch(37% 16.1 269.69);
	--blue-425: lch(58.19% 22.43 269.69);
	--blue-225: lch(76.5% 12.4 269.69);
	--blue-100: lch(89.5% 4.8 269.69);
	--blue-75: lch(93.5% 2.7 269.69);

	/* green */
	--green-800: lch(20% 14 115.94);
	--green-750: lch(24% 16.7 115.94);
	--green-625: lch(37% 22.4 115.94);
	--green-425: lch(56.5% 30.7 115.94);
	--green-225: lch(67.96% 35.57 115.94);
	--green-100: lch(89.5% 39.3 115.94);
	--green-75: lch(93.5% 33.5 115.94);

	/* yellow */
	--yellow-800: lch(20% 19 74.93);
	--yellow-750: lch(24% 22.8 74.93);
	--yellow-625: lch(37% 31.2 74.93);
	--yellow-425: lch(56.5% 42.7 74.93);
	--yellow-225: lch(77.29% 54.51 74.93);
	--yellow-100: lch(89.5% 17.9 74.93);
	--yellow-75: lch(93.5% 9.5 74.93);

	/* red */
	--red-800: lch(20% 22.9 42.52);
	--red-750: lch(24% 27.9 42.52);
	--red-625: lch(37% 40.2 42.52);
	--red-425: lch(56.74% 52.92 42.52);
	--red-225: lch(76.5% 22.8 42.52);
	--red-100: lch(89.5% 7.9 42.52);
	--red-75: lch(93.5% 4.3 42.52);

	/* pink */
	--pink-800: lch(20% 32 353.8);
	--pink-750: lch(24% 36.7 353.8);
	--pink-625: lch(37% 48.7 353.8);
	--pink-425: lch(56.5% 66.1 353.8);
	--pink-225: lch(74.69% 33.96 353.8);
	--pink-100: lch(89.5% 11.2 353.8);
	--pink-75: lch(93.5% 6.3 353.8);

	--c-neutral-950: #151515;
	--c-neutral-900: #1c1c1c;
	--c-neutral-800: #30302c;
	--c-neutral-700: #333333;
	--c-neutral-600: #404040;
	--c-neutral-500: #4e4e43;
	--c-neutral-400: #808070;
	--c-neutral-300: #959682;
	--c-neutral-200: #babaa6;
	--c-neutral-100: hsl(60deg 30% 86%);
	--c-neutral-50: hsl(60deg 30% 90%);
}

r4-app[color-scheme='light'] {
	--c-bg: var(--c-neutral-50);
	--c-bg2: var(--c-neutral-100);
	--c-fg: var(--c-neutral-950);
	--c-fg2: var(--c-neutral-600);
	--c-light: var(--c-neutral-100);
	--c-link: var(--purple);
	--c-border: var(--c-neutral-500);
	--c-light: color-mix(in oklch, var(--c-bg2) 100%, black 5%);
	--c-accent1: var(--red);
	--c-accent2: var(--brown);

	--dark: rgba(0,0,0,0.4);
	--light: rgba(255,255,255,0.3);
	--s-shadow: 	rgba(0, 0, 0, 0.12) 0px 4px 30px, rgba(0, 0, 0, 0.04) 0px 3px 17px, rgba(0, 0, 0, 0.04) 0px 2px 8px, rgba(0, 0, 0, 0.04) 0px 1px 1px;
}

r4-app[color-scheme='dark'] {
	--c-bg: var(--c-neutral-950);
	--c-bg2: var(--c-neutral-900);
	--c-fg: var(--c-neutral-100);
	--c-fg2: var(--c-neutral-400);
	--c-link: var(--blue);
	--c-border: var(--c-neutral-500);
	--c-light: color-mix(in oklch, var(--c-bg2) 100%, white 12%);
	--c-accent1: var(--red);
	--c-accent2: var(--yellow);

	--dark: rgba(0,0,0,0.8);
	--light: rgba(255,255,255,0.2);
	--s-shadow: rgba(0, 0, 0, 0.184) 0px 3px 8px, rgba(0, 0, 0, 0.184) 0px 2px 5px, rgba(0, 0, 0, 0.184) 0px 1px 1px;
}

r4-app {
	/* remove things from index.css */
	menu {
		background: none;
	}
	section {
		padding: 0;
	}
	r4-app-menu,
	r4-app menu,
	r4-layout::part(panel) {
		background: none;
	}
	r4-query {
		& fieldset {
			padding: 0;
		}
	}

	/* no margins */
	button,
	r4-dialog::part(button),
	select,
	input[type='text'],
	input[type='number'],
	input[type='email'],
	input[type='password'],
	input[type='search'],
	input[type='url'],
	textarea,
	r4-layout::part(controls-button) {
		padding: 0 0.25rem;
		min-height: 2rem;

		display: inline-flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
		flex-shrink: 0;
		font-size: inherit;
		user-select: none;
		position: relative;
		vertical-align: top;
		line-height: 1.5;
		min-width: 2rem;
		height: 1.5rem;
		padding: 0 0.3rem;
		background-color: var(--c-bg);
		color: var(--c-fg);
		border: 1px solid var(--c-border);
		border-radius: var(--s-radius);

		&:hover {
			background: var(--c-bg2);
			border-color: var(--blue);
		}
	}

	/* Text inputs */
	input[type='text'],
	input[type='number'],
	input[type='email'],
	input[type='password'],
	input[type='search'],
	input[type='url'],
	textarea {
	}

	/* "Buttons" */
	button,
	select,
	r4-dialog::part(button),
	r4-layout::part(controls-button) {
		background: var(--c-bg2);
		cursor: initial;

		&[disabled] {
			opacity: 0.5;
		}

		&[role=primary] {
			background: var(--c-accent1);
		}
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	p {
		font-size: 1rem;
		margin: 0;
	}

	r4-list r4-channel-title a,
	r4-list r4-track-title a {
		text-decoration: none;
	}

	r4-channel-link {
		flex-grow: 0;
	}
}

r4-list-item:nth-child(odd) {
	background: var(--c-bg2);
}
r4-list-item:hover {
	background-color: var(--c-light);
}
r4-list r4-track r4-button-play button {
	background: transparent;
	border: 1px solid transparent;

	&:hover {
		color: var(--c-link);
	}
}
r4-track-title a {
	color: inherit;
}

a[data-type-tag] {
	color: var(--c-accent1);
	text-decoration: none;
}

a[data-type-mention] {
	color: var(--c-accent2);
	text-decoration: none;
}

menu r4-channel-search {
	position: relative;

	r4-list {
		position: absolute;
		width: 100%;
	}

	label,
	r4-search-404,
	r4-channel-description {
		display: none;
	}
}



r4-layout header[slot='menu'] {
	gap: var(--s);
	justify-content: space-between;
}
r4-layout main[slot='main'] {
	background: var(--c-bg);
}

r4-page-header {
	position: sticky;
	top: 0;
	z-index: 1;
	background-color: var(--c-bg);
	min-height: 2rem;
}

r4-app menu {
	gap: 0.75rem;

	a[aria-current] {
		color: var(--c-fg);
		text-decoration: none;
	}
}

r4-page-header menu {
	padding: 0 0.5rem 0.5rem;
	align-items: flex-end;
}

r4-channel-card {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	background: none;
	gap: 0.5rem;
	min-height: 4rem;
	border: 0;

	> a:first-child {
		min-width: 2rem;
	}
	r4-channel-slug {
		display: none;
	}
}
r4-channel-description,
r4-track-description {
	color: var(--c-fg2);
}

/* lists of cards and tracks */
r4-list-item {
	padding-left: 0.5rem;
	min-height: 2.25rem;
}
r4-track-body {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
r4-actions summary {
	padding: 0 0.2rem;
}
r4-button-play button {
}
r4-actions details menu {
	gap: 3px;
}

/* Forms */
r4-app form legend,
r4-app form label {
	font-weight: bold;
	color: var(--c-fg);
}
r4-app form slot[name='submit'] fieldset:last-of-type {
	justify-content: flex-end;
}
r4-app form {
	max-width: var(--s-form);

	display: flex;
	flex-flow: column;
	gap: 1rem;

	& input[type='text'],
	& input[type='email'],
	& input[type='password'],
	& input[type='url'],
	& textarea {
		width: 100%;
	}
	& textarea {
		min-height: var(--s-textarea);
	}
}

/* Dialogs */
r4-dialog::part(dialog) {
	width: var(--s-form);
	max-width: calc(100% - 4rem);
	background: var(--c-bg2);
	border: 0.5px solid var(--c-border);
	border-radius: var(--s-radius);
	box-shadow: var(--s-shadow);
}

r4-dialog form {
	margin-top: 1rem;
}

r4-avatar {
	max-width: none;
}
r4-list r4-avatar {
	max-width: 2rem;
}

/* Pixel fun */
li:has(r4-query),
li r4-query {
	flex: 1;
	margin-top: 1rem;
}
r4-page-channel r4-page-header li:nth-child(6) {
	margin-right: auto;
}
r4-page-channel r4-page-header li:nth-child(8) {
	/* hide add button because its in header, too */
	display: none;
}
r4-page-channel r4-page-header r4-channel-card r4-avatar {
	max-width: none;
	/* max-width: 100%; */
}
r4-page-channel r4-page-main {
	flex-grow: 1;
	display: flex;
	& section {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
	}
	& p {
		text-align: center;
	}
}
r4-supabase-query {
	margin-left: auto;
}
r4-supabase-filter-search input[type="search"] {
	width: 8rem;
}
r4-supabase-modifiers select[name="orderBy"] {
	width: 5.6em;
}
r4-supabase-modifiers input[name="limit"] {
	width: 4.3em;
}
r4-supabase-filter-search,
r4-supabase-modifiers,
r4-supabase-filters {
	form {
		flex-flow: row wrap;
	}
	& legend {
		transform: translate(-20%, -50%);
	}
}

r4-query {
	gap: var(--s);

	r4-supabase-filters {
		margin-left: 0.5rem;
	}

	details {
		--c-shadow-modal: 0 3px 12px rgba(0, 0, 0, 0.1);
		position: relative;

		&[open] {
			summary + * {
				position: absolute;
				top: 100%;
				right: 2px;
				background: var(--c-bg2);
				padding: 1rem;
				border: 1px solid var(--c-border);
				box-shadow: var(--c-shadow-modal);
			}
		}
	}
}

r4-page-footer {
	/* padding: var(--s); */
}

/* Text pages */
r4-page-home,
r4-page-settings  {
	r4-page-main {
		section header h2 {
			margin-left: calc(var(--s) / 2);
			margin-bottom: calc(var(--s) / 2);

			a {
				text-decoration: none;
			}
		}
	}
	section {
		padding: var(--s) 0;
	}
}

/* Pages with padding hm */
r4-page-add {
	r4-page-main {
		margin: 1rem;
	}
}

r4-page-settings {
	section {
		padding: var(--s);
	}
	r4-page-main form {
		margin: var(--s);
	}
}

r4-list,
r4-page-channel {
	a:has(r4-channel-name) {
		color: var(--c-fg);
		text-decoration: none;
	}
}
/* channels in lists */
r4-list {
	r4-channel-card r4-channel-url {
		display: none;
	}
	r4-channel-card-body {
		line-height: 1.2;
	}
}

/* channel on the page */
r4-page-channel r4-channel-card {
	justify-content: center;
	flex-direction: column;
	r4-avatar {
		margin: 0.5rem;
	}
	r4-channel-name {
		font-size: clamp(1.5rem, 7vw + 1rem, 3rem);
		font-weight: bold;
	}
	r4-channel-description {
		font-size: clamp(1rem, 4vw + 1rem, 1.5rem);
		text-align: center;
	}
	r4-button-play button {
		font-size: 1.5rem;
		height: auto;
		padding: 0 1rem;
		margin: auto 1rem;
		&::after {
			content: "Listen"
		}
	}
	r4-channel-card-body {
		padding: 1rem;
		flex-grow: 0;
		display: flex;
		flex-direction: column;
    justify-content: center;
    align-items: center;
	}
}

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

/* Tracklist counter */
r4-list:has(r4-track) {
	counter-reset: tracks;

	r4-list-item::before {
		content: counter(tracks) "";
		counter-increment: tracks;
		font-size: 9px;
		width: 2rem; /* big enough for four digits */
		position: relative;
	}
}

r4-layout header[slot='menu'],
r4-page-header {
	background: var(--c-bg2);
	[color-scheme="dark"] & {
		background: black;
	}
}

r4-layout header[slot='menu'] {
	padding: 0 0.5rem;
	menu {
		min-height: 2rem;
		gap: 1rem;
	}
}

@media (max-width: 600px) and (max-height: 800px) {
	/* fixed bottom app menu */
	r4-layout header[slot='menu'] {
		position: fixed;
		top: auto;
		left: 0;
		right: 0;
		bottom: 0;
		justify-content: center;

		menu {
			border-top-left-radius: var(--s-radius);
			border-top-right-radius: var(--s-radius);
		}
	}
}

r4-page-header {
	&::before,
	&::after {
		content: "";
		display: block;
	}
	&::after {
		border-top: 1px solid var(--dark);
		border-bottom: 1px solid var(--light);
	}
}

r4-list {
	&::before,
	&::after {
		content: "";
		display: block;
	}
	&::before {
		border-top: 1px solid var(--dark);
		border-bottom: 1px solid var(--light);
	}
	&::after {
		border-top: 1px solid var(--dark);
		border-bottom: 1px solid var(--light);
	}
}

r4-page-explore,
r4-page-channel-tracks {
	r4-page-main r4-list:first-child {
		border-top: 0;
		&::before {
			display: none;
		}
	}
}

/* black player, not dark */
r4-app[color-scheme="dark"]  {
	r4-layout::part(playback-summary) {
		background: black;
	}
	radio4000-player {
		> .Layout[class],
		.Header,
		.PlayerControl-group .Btn {
			background: black;
		}
	}
}