:root {
	--ink: #2a1500;
	--ink-soft: #5a3a14;
	--ink-dim: #8a6535;

	/* Solid fills — only the page background stays a gradient. */
	--panel: #fff3dd;
	--panel-strong: #ffe6bf;
	/* A touch lighter than --panel-strong — softer card hover. */
	--panel-hover: #ffedc6;
	--panel-border: #2a1500;

	--accent: #2a1500;
	--on-accent: #fff3dd;

	--cover-bg: #ead9b8;
	--shadow-pop: 3px 3px 0 var(--panel-border);

	--font-size-xs: 0.7rem;
	--font-size-sm: 0.8rem;
	--font-size-md: 1rem;
	--font-size-lg: 1.5rem;

	--radius: 1rem;

	--content-max: 45rem;
	--letter-rail-btn-size: 1.5rem;
	--letter-rail-width: var(--letter-rail-btn-size);
	--letter-rail-gap: clamp(1rem, 2.5vw, 2rem);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0 1rem 4rem;
	font-family:
		system-ui,
		segoe ui,
		-apple-system,
		sans-serif;
	color: var(--ink);
	background:
		url("bg.webp") center / cover fixed no-repeat,
		#ff9d2e;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

main {
	max-width: var(--content-max);
	margin: 0 auto;
}

h1 {
	margin: 1.5rem 0 1rem;
	font-size: clamp(2.5rem, 9vw, 4.5rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
}

button {
	font: inherit;
}

/* ── Toolbar ─────────────────────────────────────────── */
.lists,
.views {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.2rem;
	margin: 0 0.5rem 0.5rem 0;
	padding: 0.2rem;
	list-style: none;
	background: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: 999px;
	vertical-align: top;
}

.lists button,
.views button {
	padding: 0.5rem 1rem;
	background: transparent;
	color: var(--ink-soft);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition:
		background 0.15s,
		color 0.15s;
}

.lists button:hover,
.views button:hover {
	color: var(--ink);
}

.lists button[aria-pressed="true"],
.views button[aria-pressed="true"] {
	background: var(--accent);
	color: var(--on-accent);
}

/* ── Radio4000 (floating, draggable player) ──────────── */
top100-radio {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 50;
	width: 320px;
	max-width: calc(100vw - 2rem);
	background: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-pop);
	overflow: hidden;
}

top100-radio.is-dragging {
	user-select: none;
}

.r4-handle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.2rem 0.2rem 0.2rem 0.5rem;
	background: var(--panel-strong);
	border-bottom: 1px solid var(--panel-border);
	cursor: grab;
	touch-action: none;
}

.r4-handle:active {
	cursor: grabbing;
}

.r4-channel {
	font-weight: 700;
	font-size: var(--font-size-xs);
	text-decoration: none;
	color: var(--ink-soft);
}

.r4-channel:hover {
	color: var(--ink);
}

.r4-toggle {
	width: 1.5rem;
	height: 1.5rem;
	font: inherit;
	font-size: var(--font-size-sm);
	line-height: 1;
	color: var(--ink-soft);
	background: transparent;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.r4-toggle:hover {
	color: var(--ink);
	background: var(--panel);
}

.r4-player {
	display: block;
	width: 320px;
	max-width: 100%;
	height: 500px;
	border: 0;
	background: var(--panel);
}

top100-radio.is-collapsed .r4-player {
	display: none;
}

/* ── Pill buttons (play, add, remove, player) ────────── */
.btn {
	padding: 0.5rem 1rem;
	font: inherit;
	color: var(--ink);
	background: transparent;
	border: 1px solid var(--panel-border);
	border-radius: 999px;
	cursor: pointer;
}

.btn:hover:not(:disabled),
.btn[aria-pressed="true"],
.btn.is-current,
.btn.is-selected {
	background: var(--accent);
	color: var(--on-accent);
}

.btn.is-current,
.btn.is-selected {
	font-weight: 700;
}

.btn:disabled {
	opacity: 0.5;
	cursor: default;
}

/* Square icon buttons (play ▶ / add +). */
.btn.icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	font-size: 1rem;
	line-height: 1;
}

.search {
	display: block;
	margin: 1rem 0;
}

/* Author display:block would otherwise beat the UA [hidden] rule. */
.search[hidden] {
	display: none;
}

.search input {
	width: 100%;
	max-width: 22rem;
	padding: 0.5rem 1rem;
	font: inherit;
	color: var(--ink);
	background: var(--panel-strong);
	border: 1px solid var(--panel-border);
	border-radius: 999px;
}

.search input::placeholder {
	color: var(--ink-dim);
}

.search input:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 1px;
}

#summary {
	margin: 0.5rem 0 1rem;
	color: var(--ink-soft);
	font-size: var(--font-size-md);
}

/* ── Song card (shared by the song lists and favoritter) ──
   Same figure/title/artist/menu markup everywhere; each list
   only overrides where its menu sits. */
.song {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	gap: 0 1rem;
	padding: 1rem;
	background: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
}

.song figure {
	grid-column: 1;
	grid-row: 1 / span 5;
	align-self: start;
	margin: 0;
}

.song img {
	display: block;
	width: 84px;
	height: 84px;
	object-fit: cover;
	border: 1px solid var(--panel-border);
	border-radius: 0.5rem;
	background: var(--cover-bg);
}

.song h3 {
	margin: 0;
	grid-column: 2;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
}

.song .artist {
	margin: 0.2rem 0 0;
	grid-column: 2;
	color: var(--ink-soft);
	font-size: 1rem;
}

.song menu {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ── My picks (the Favoritter tab) ───────────────────── */
top100-my-songs {
	display: block;
	position: relative;
	margin: 0 0 1.5rem;
	background: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	overflow: hidden;
}

/* Lives in its own tab; hidden whenever another list is shown. */
body:not([data-list="favoritter"]) top100-my-songs {
	display: none;
}

/* Canvas only makes sense for the chart lists; the whole view
   switcher goes when favoritter is open (List alone is pointless). */
body[data-list="favoritter"] .views {
	display: none;
}

/* Title-bar header, shared look with the Radio4000 dock handle. */
top100-my-songs header {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 0.2rem 0.2rem 0.2rem 0.5rem;
	background: var(--panel-strong);
	border-bottom: 1px solid var(--panel-border);
}

top100-my-songs header h2 {
	margin: 0;
	font-size: var(--font-size-xs);
	font-weight: 700;
	color: var(--ink-soft);
}

top100-my-songs .hint {
	margin: 0;
	padding: 0.5rem 1rem 0;
	color: var(--ink-dim);
	font-size: var(--font-size-sm);
	line-height: 1.4;
}

top100-my-songs ol {
	list-style: none;
	padding: 0.5rem 1rem 1rem;
	margin: 0;
	display: grid;
	gap: 0.5rem;
}

top100-my-songs ol:empty {
	padding: 0;
}

top100-my-songs ol li[aria-hidden] {
	margin: 0.5rem 0 0;
	padding: 0.2rem 0 0;
	color: var(--ink-dim);
	font-size: var(--font-size-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Shared card, plus a third column for the actions menu. */
top100-my-songs .song {
	grid-template-columns: 84px minmax(0, 1fr) auto;
	position: relative;
	transition:
		box-shadow 0.12s ease,
		opacity 0.12s ease;
}

top100-my-songs .song.is-top-pick {
	background: #fff8eb;
	border-width: 2px;
}

top100-my-songs .song.is-dragging,
top100-my-songs ol > li.is-dragging .song {
	opacity: 0.45;
}

top100-my-songs .song.is-drop-target,
top100-my-songs ol > li.is-drop-target .song {
	box-shadow: inset 0 0 0 2px var(--accent);
}

top100-my-songs .song > span {
	display: grid;
	place-items: center;
	position: absolute;
	top: 0.25rem;
	left: 0.25rem;
	z-index: 1;
	width: 1.35rem;
	height: 1.35rem;
	font-size: var(--font-size-sm);
	font-weight: 800;
	line-height: 1;
	border: 1px solid var(--panel-border);
	border-radius: 999px;
	background: var(--panel-strong);
}

top100-my-songs .song.is-top-pick > span {
	background: var(--accent);
	color: var(--on-accent);
}

/* Keeps the cover's grid cell when a favorite has no image yet. */
top100-my-songs .song img[hidden] {
	display: block;
	visibility: hidden;
}

top100-my-songs .song menu {
	grid-column: 3;
	grid-row: 1 / span 5;
	align-self: center;
}

top100-my-songs .song menu > li {
	display: contents;
}

top100-my-songs .song menu [role="group"] {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}

top100-my-songs .song menu [role="group"] button {
	width: 1.5rem;
	height: 1.5rem;
	font-size: 1rem;
}

top100-my-songs [data-drag-handle] {
	cursor: grab;
	touch-action: none;
}

top100-my-songs [data-drag-handle]:active {
	cursor: grabbing;
}

top100-my-songs [data-remove-id] {
	font-size: var(--font-size-sm);
}

top100-my-songs .song menu a {
	display: grid;
	place-items: center;
	font-size: var(--font-size-xs);
	font-weight: 700;
	text-decoration: none;
}

top100-my-songs .empty {
	margin: 0;
	padding: 0.5rem 1rem 1rem;
	color: var(--ink-dim);
	font-size: var(--font-size-sm);
}

/* button.btn so this outweighs the .btn base padding. */
top100-my-songs header button.btn {
	font-size: var(--font-size-xs);
	padding: 0.2rem 0.5rem;
}

/* Tucked into the bottom-right corner so it never blocks the list. */
top100-my-songs .footer {
	margin: 0;
	padding: 0 1rem 0.75rem;
	text-align: right;
	color: var(--ink-dim);
	font-size: var(--font-size-xs);
}

top100-my-songs .footer a {
	color: var(--accent);
	font-weight: 700;
}

/* ── Song list ───────────────────────────────────────── */
#songs {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 0.5rem;
}

#songs .song {
	transition:
		background 0.15s,
		transform 0.15s;
}

#songs .song.playable {
	cursor: pointer;
}

#songs .song.playable:hover {
	background: var(--panel-hover);
}

#songs .song .funfact,
#songs .song .credits {
	grid-column: 2;
	margin: 0.5rem 0 0;
	font-size: var(--font-size-sm);
	color: var(--ink-soft);
}

#songs .song .credits {
	color: var(--ink-dim);
}

#songs .song.is-playing {
	background: var(--panel-strong);
	box-shadow: var(--shadow-pop);
}

#songs .song menu {
	grid-column: 2;
	flex-wrap: wrap;
	margin: 0.5rem 0 0;
}

.youtube-link,
.player-youtube {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 2px;
	font-size: var(--font-size-md);
}

body[data-list="top400"] .letter-header {
	position: sticky;
	top: 0.5rem;
	z-index: 2;
	margin-left: -1rem;
	padding: 0.2rem 0;
	scroll-margin-top: 0.5rem;
}

body[data-list="top400"] .letter-header:not(:first-child) {
	margin-top: 1.5rem;
}

body[data-list="top400"] .letter-divider {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin: 0;
	padding: 0;
	font-size: var(--font-size-md);
	font-weight: 800;
	line-height: 1;
	color: var(--ink);
	background: var(--panel-strong);
	border: 1px solid var(--panel-border);
	border-radius: 50%;
	box-shadow: var(--shadow-pop);
}

/* ── Letter jump rail (Top 400, list view) ───────────── */
.letter-rail {
	position: fixed;
	/* Left gutter beside main column, with explicit gap from content. */
	left: max(
		0.5rem,
		calc((100vw - var(--content-max)) / 2 - var(--letter-rail-width) - var(--letter-rail-gap))
	);
	top: 50%;
	transform: translateY(-50%);
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: 0;
	width: var(--letter-rail-width);
	max-height: min(92vh, calc(100dvh - 6rem));
	overflow-x: hidden;
	overflow-y: auto;
	padding: 0;
	background: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: 999px;
	box-shadow: var(--shadow-pop);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

/* Author display:flex would otherwise beat the UA [hidden] rule. */
.letter-rail[hidden] {
	display: none;
}

.letter-rail::-webkit-scrollbar {
	display: none;
}

.letter-rail-btn {
	display: grid;
	place-items: center;
	width: 100%;
	min-height: var(--letter-rail-btn-size);
	padding: 0;
	font-size: var(--font-size-xs);
	font-weight: 700;
	line-height: 1;
	color: var(--ink-soft);
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
}

.letter-rail-btn:hover {
	color: var(--ink);
	background: var(--panel-strong);
}

.letter-rail-btn.is-active {
	color: var(--on-accent);
	background: var(--accent);
}

/* No left gutter — pin a compact rail to the right edge instead. */
@media (max-width: 60rem) {
	:root {
		--letter-rail-btn-size: 1.35rem;
		--letter-rail-gap: 0.5rem;
	}

	.letter-rail {
		left: auto;
		right: max(0.35rem, env(safe-area-inset-right, 0px));
	}

	body[data-list="top400"][data-view="list"] main {
		padding-right: calc(var(--letter-rail-width) + var(--letter-rail-gap));
	}
}

/* ── Canvas view ─────────────────────────────────────── */
#canvas-view {
	position: fixed;
	inset: 0;
	background: #ff9d2e;
}

#field {
	display: block;
	width: 100%;
	height: 100%;
	cursor: grab;
	touch-action: none;
}

#field.dragging {
	cursor: grabbing;
}
#field.pointing {
	cursor: pointer;
}

#canvas-view .hint {
	position: absolute;
	inset: auto 1rem 6rem auto;
	margin: 0;
	color: var(--ink-soft);
	font-size: var(--font-size-sm);
	pointer-events: none;
}

body[data-view="canvas"] {
	overflow: hidden;
}

body[data-view="canvas"] main {
	position: fixed;
	inset: 0 auto auto 0;
	z-index: 5;
	margin: 0;
	padding: 1rem;
}

body[data-view="canvas"] #summary,
body[data-view="canvas"] #songs {
	display: none;
}

/* ── Player — little 2000s "Sansa" handheld ──────────── */
top100-player {
	--device-face: #3a2408;
	--device-edge: #1c0e00;
	--lcd-bg: #c8d24a;
	--lcd-ink: #1e2406;
	--key-face: #efe4cf;
	--key-edge: #b9a988;

	position: fixed;
	inset: 1rem 1rem auto auto;
	z-index: 10;
	width: 13.5rem;
	display: grid;
	gap: 0.2rem;
	padding: 0.2rem 0.2rem 0.5rem;
	color: var(--lcd-ink);
	background: linear-gradient(160deg, #4a2f0c 0%, var(--device-face) 45%, #2c1a04 100%);
	border: 1px solid var(--device-edge);
	border-radius: 0.5rem;
	box-shadow:
		inset 0 1px 0 rgba(255, 220, 160, 0.35),
		inset 0 0 0 2px rgba(0, 0, 0, 0.25),
		6px 8px 0 rgba(0, 0, 0, 0.35);
	cursor: grab;
	touch-action: none;
	user-select: none;
}

top100-player.is-dragging {
	cursor: grabbing;
	box-shadow:
		inset 0 1px 0 rgba(255, 220, 160, 0.35),
		inset 0 0 0 2px rgba(0, 0, 0, 0.25),
		10px 14px 0 rgba(0, 0, 0, 0.35);
}

/* The screen and label share the grab cursor; buttons/links keep their own. */
.player-screen {
	cursor: inherit;
}
.btn.pad,
.player-youtube {
	cursor: pointer;
}

/* The LCD screen — fixed size; contents never reflow the device. */
.player-screen {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: 1fr auto;
	height: 4.5rem;
	gap: 0.2rem 0.5rem;
	align-items: center;
	padding: 0.5rem 0.2rem;
	background:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, #d6df66, var(--lcd-bg));
	border: 2px solid #16210a;
	border-radius: 0.5rem;
	box-shadow:
		inset 0 0 12px rgba(40, 60, 0, 0.35),
		inset 0 1px 0 rgba(255, 255, 255, 0.4);
	overflow: hidden;
}

.player-cover {
	width: 38px;
	height: 38px;
	grid-row: 1 / -1;
	object-fit: cover;
	border-radius: 0.2rem;
	background: var(--cover-bg);
	filter: saturate(0.7) sepia(0.25);
	border: 1px solid #16210a;
}

/* Keep the slot reserved when empty so the screen never resizes. */
.player-cover[hidden] {
	display: block;
	visibility: hidden;
}

.player-meta {
	min-width: 0;
	grid-column: 2;
	grid-row: 1;
}

.player-title,
.player-artist {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	letter-spacing: -0.02em;
}

.player-title {
	font-size: 1rem;
	font-weight: 700;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.player-artist {
	font-size: 0.5rem;
	color: #3c4a12;
}

.player-youtube {
	grid-column: 1 / -1;
	grid-row: 2;
	align-self: end;
	font-family: ui-monospace, monospace;
	font-size: 0.5rem;
	color: var(--lcd-ink);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.8;
}

/* Reserve the link's row even when hidden. */
.player-youtube[hidden] {
	display: block;
	visibility: hidden;
}

.player-youtube:hover {
	opacity: 1;
	text-decoration: underline;
}

/* Button cluster: single transport row. */
.player-controls {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.5rem;
	margin: 0;
	padding: 0.2rem 0.2rem 0;
	list-style: none;
}

.btn.pad {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.5rem;
	padding: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	color: #2a1a06;
	background: linear-gradient(180deg, var(--key-face), #d8c8aa);
	border: 1px solid var(--key-edge);
	border-radius: 0.5rem;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.8),
		0 2px 0 #8c7c5c,
		0 3px 3px rgba(0, 0, 0, 0.3);
	transition:
		transform 0.05s,
		box-shadow 0.05s;
}

.btn.pad.pad-play {
	font-size: 1rem;
	background: linear-gradient(180deg, #ffd98a, #e6a93f);
	border-color: #9a6b1d;
}

.btn.pad:hover:not(:disabled):not([aria-pressed="true"]) {
	color: #2a1a06;
	background: linear-gradient(180deg, #fff1d1, #e6d6b8);
}

.btn.pad.pad-play:hover:not(:disabled) {
	background: linear-gradient(180deg, #ffe4a6, #efb650);
}

.btn.pad:active:not(:disabled) {
	transform: translateY(2px);
	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, 0.3),
		0 0 0 #8c7c5c;
}

.btn.pad[aria-pressed="true"] {
	color: var(--on-accent);
	background: linear-gradient(180deg, #5a3a14, #3a2408);
	border-color: #1c0e00;
	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, 0.5),
		0 1px 0 rgba(255, 255, 255, 0.15);
}

@media (max-width: 42rem) {
	#songs .song {
		grid-template-columns: 64px minmax(0, 1fr);
	}

	top100-my-songs .song {
		grid-template-columns: 64px minmax(0, 1fr) auto;
	}

	.song img {
		width: 64px;
		height: 64px;
	}
}