/* CB Pirate Radio — the dial.
 * Direction: a smuggler's shortwave rig, not a Spotify clone.
 * Deep harbor-night navy, brass hardware, one signal-orange beacon.
 */

.cb-tuner {
	--cb-hull: #10151f;      /* harbor night */
	--cb-panel: #1a2230;
	--cb-brass: #c9a35c;     /* worn brass hardware */
	--cb-signal: #ff5c2b;    /* the beacon — used sparingly */
	--cb-ink: #e8e4d8;       /* lamp-lit paper */
	--cb-ink-dim: #8d94a3;
	background: var(--cb-hull);
	color: var(--cb-ink);
	border: 1px solid #2a3446;
	border-radius: 10px;
	max-width: 720px;
	margin: 0 auto;
	overflow: hidden;
	font-family: ui-monospace, "Courier New", monospace;
}

/* Masthead */
.cb-tuner__mast {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 18px;
	border-bottom: 1px dashed #2a3446;
	letter-spacing: 0.22em;
	font-size: calc(12px * var(--cb-fs, 1));
	color: var(--cb-brass);
}
.cb-tuner__beacon {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cb-signal);
	box-shadow: 0 0 8px var(--cb-signal);
	animation: cb-blink 2.4s infinite;
}
@keyframes cb-blink {
	0%, 88%, 100% { opacity: 1; }
	92%, 96% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
	.cb-tuner__beacon { animation: none; }
}

/* The dial — a horizontal band of frequency stops */
.cb-tuner__dial {
	display: flex;
	overflow-x: auto;
	border-bottom: 1px solid #2a3446;
	background:
		repeating-linear-gradient(90deg, transparent 0 11px, #232d3f 11px 12px);
}
.cb-tuner__stop {
	flex: 1 0 auto;
	min-width: 118px;
	padding: 14px 12px 12px;
	background: transparent;
	border: 0;
	border-right: 1px solid #2a3446;
	color: var(--cb-ink-dim);
	cursor: pointer;
	text-align: center;
	font-family: inherit;
}
.cb-tuner__stop:focus-visible {
	outline: 2px solid var(--cb-brass);
	outline-offset: -2px;
}
.cb-tuner__freq {
	display: block;
	font-size: calc(20px * var(--cb-fs, 1));
	font-weight: 700;
	letter-spacing: 0.04em;
}
.cb-tuner__label {
	display: block;
	margin-top: 3px;
	font-size: calc(11px * var(--cb-fs, 1));
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.cb-tuner__stop.is-tuned {
	color: var(--cb-ink);
	background: var(--cb-panel);
	box-shadow: inset 0 -3px 0 var(--cb-signal);
}

/* Deck: art + metadata + transport */
.cb-tuner__deck {
	display: grid;
	grid-template-columns: 112px 1fr auto;
	gap: 18px;
	align-items: center;
	padding: 20px 18px;
}
.cb-tuner__art {
	width: 112px;
	height: 112px;
	border: 1px solid var(--cb-brass);
	border-radius: 4px;
	overflow: hidden;
	display: grid;
	place-items: center;
	background: var(--cb-panel);
}
.cb-tuner__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cb-tuner__art-fallback { font-size: calc(40px * var(--cb-fs, 1)); }

.cb-tuner__nowlabel {
	font-size: calc(10px * var(--cb-fs, 1));
	letter-spacing: 0.3em;
	color: var(--cb-ink-dim);
	display: flex;
	align-items: center;
	gap: 6px;
}
.cb-tuner__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--cb-signal);
}
.cb-tuner__track {
	font-size: calc(20px * var(--cb-fs, 1));
	font-weight: 700;
	margin-top: 6px;
	line-height: 1.2;
}
.cb-tuner__artist {
	display: inline-block;
	margin-top: 2px;
	color: var(--cb-brass);
	text-decoration: none;
	border-bottom: 1px dotted var(--cb-brass);
}
.cb-tuner__artist:hover { color: var(--cb-ink); }
.cb-tuner__hood,
.cb-tuner__listeners {
	margin-top: 4px;
	font-size: calc(12px * var(--cb-fs, 1));
	color: var(--cb-ink-dim);
}

.cb-tuner__controls {
	display: grid;
	gap: 10px;
	justify-items: center;
}
.cb-tuner__play {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 2px solid var(--cb-brass);
	background: var(--cb-panel);
	color: var(--cb-ink);
	font-size: calc(20px * var(--cb-fs, 1));
	cursor: pointer;
}
.cb-tuner__play.is-playing {
	border-color: var(--cb-signal);
	color: var(--cb-signal);
}
.cb-tuner__play:focus-visible { outline: 2px solid var(--cb-brass); outline-offset: 2px; }
#cb-volume { width: 90px; accent-color: var(--cb-brass); }

.cb-tuner__empty { padding: 24px 18px; color: var(--cb-ink-dim); }

@media (max-width: 560px) {
	.cb-tuner__deck { grid-template-columns: 80px 1fr; }
	.cb-tuner__art { width: 80px; height: 80px; }
	.cb-tuner__controls {
		grid-column: 1 / -1;
		grid-auto-flow: column;
		justify-content: start;
	}
}

/* Submission form — quiet, functional */
.cb-radio-submit fieldset {
	border: 1px solid #ccc;
	border-radius: 6px;
	padding: 16px;
	margin-bottom: 18px;
}
.cb-radio-submit input[type="text"],
.cb-radio-submit select,
.cb-radio-submit textarea { width: 100%; max-width: 480px; }
.cb-radio-notice { padding: 10px 14px; border-radius: 6px; }
.cb-radio-notice--ok { background: #e7f5ea; border: 1px solid #9ccfa8; }
.cb-radio-notice--err { background: #fdecec; border: 1px solid #e5a3a3; }
.cb-radio-btn { padding: 10px 22px; cursor: pointer; }

/* ── Votes on the deck ── */
.cb-tuner__votes {
	margin-top: 10px;
	display: flex;
	gap: 8px;
}
.cb-tuner__vote {
	background: var(--cb-panel);
	border: 1px solid #2a3446;
	border-radius: 999px;
	color: var(--cb-ink);
	padding: 5px 14px;
	font-family: inherit;
	font-size: calc(13px * var(--cb-fs, 1));
	cursor: pointer;
}
.cb-tuner__vote:hover:not(:disabled) { border-color: var(--cb-brass); }
.cb-tuner__vote:disabled { opacity: 0.45; cursor: not-allowed; }
.cb-tuner__vote.is-mine {
	border-color: var(--cb-signal);
	color: var(--cb-signal);
}
.cb-tuner__vote:focus-visible { outline: 2px solid var(--cb-brass); outline-offset: 2px; }

/* ── The Captain's Top 10 ── */
.cb-charts {
	background: var(--cb-hull, #10151f);
	color: var(--cb-ink, #e8e4d8);
	border: 1px solid #2a3446;
	border-radius: 10px;
	max-width: 720px;
	margin: 0 auto;
	font-family: ui-monospace, "Courier New", monospace;
	overflow: hidden;

	/* charts can render standalone, so restate the tokens */
	--cb-hull: #10151f;
	--cb-panel: #1a2230;
	--cb-brass: #c9a35c;
	--cb-signal: #ff5c2b;
	--cb-ink: #e8e4d8;
	--cb-ink-dim: #8d94a3;
}
.cb-charts__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 18px;
	border-bottom: 1px dashed #2a3446;
}
.cb-charts__title {
	margin: 0;
	font-size: calc(16px * var(--cb-fs, 1));
	letter-spacing: 0.14em;
	color: var(--cb-brass);
	font-family: inherit;
}
.cb-charts__toggle { display: flex; gap: 6px; }
.cb-charts__toggle button {
	background: var(--cb-panel);
	border: 1px solid #2a3446;
	border-radius: 999px;
	color: var(--cb-ink-dim);
	padding: 5px 14px;
	font-family: inherit;
	font-size: calc(12px * var(--cb-fs, 1));
	letter-spacing: 0.08em;
	cursor: pointer;
}
.cb-charts__toggle button.is-active {
	color: var(--cb-ink);
	border-color: var(--cb-signal);
}
.cb-charts__demo-flag {
	margin: 0;
	padding: 8px 18px;
	font-size: calc(11px * var(--cb-fs, 1));
	letter-spacing: 0.2em;
	color: var(--cb-signal);
	border-bottom: 1px dashed #2a3446;
}
.cb-charts__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.cb-charts__row {
	display: grid;
	grid-template-columns: 44px 48px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 10px 18px;
	border-bottom: 1px solid #1c2534;
}
.cb-charts__row:last-child { border-bottom: 0; }
.cb-charts__rank {
	font-size: calc(20px * var(--cb-fs, 1));
	font-weight: 700;
	color: var(--cb-ink-dim);
	text-align: right;
}
.cb-charts__row:nth-child(1) .cb-charts__rank { color: var(--cb-signal); }
.cb-charts__row:nth-child(2) .cb-charts__rank,
.cb-charts__row:nth-child(3) .cb-charts__rank { color: var(--cb-brass); }
.cb-charts__art {
	width: 48px;
	height: 48px;
	border-radius: 4px;
	overflow: hidden;
	background: var(--cb-panel);
	display: grid;
	place-items: center;
}
.cb-charts__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-charts__art-fallback { font-size: calc(22px * var(--cb-fs, 1)); }
.cb-charts__info { display: grid; line-height: 1.35; }
.cb-charts__track { font-weight: 700; }
.cb-charts__artist {
	color: var(--cb-brass);
	text-decoration: none;
	font-size: calc(13px * var(--cb-fs, 1));
	width: fit-content;
	border-bottom: 1px dotted var(--cb-brass);
}
.cb-charts__artist:hover { color: var(--cb-ink); }
.cb-charts__channel {
	font-size: calc(11px * var(--cb-fs, 1));
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cb-ink-dim);
}
.cb-charts__score {
	font-size: calc(18px * var(--cb-fs, 1));
	font-weight: 700;
	color: var(--cb-ink);
}
.cb-charts__loading { padding: 18px; color: var(--cb-ink-dim); }

/* ── Display options panel ── */
.cb-display-toggle {
	margin-left: auto;
	background: var(--cb-panel);
	border: 1px solid #2a3446;
	border-radius: 6px;
	color: var(--cb-ink);
	font-family: inherit;
	font-size: calc(13px * var(--cb-fs, 1));
	font-weight: 700;
	padding: 3px 10px;
	cursor: pointer;
}
.cb-display-toggle:hover { border-color: var(--cb-brass); }
.cb-display-toggle:focus-visible { outline: 2px solid var(--cb-brass); outline-offset: 2px; }

.cb-display-panel {
	position: absolute;
	z-index: 30;
	margin-top: 6px;
	right: 14px;
	background: var(--cb-panel);
	border: 1px solid var(--cb-brass);
	border-radius: 8px;
	padding: 14px;
	display: grid;
	gap: 12px;
	min-width: 230px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
	font-size: calc(13px * var(--cb-fs, 1));
	color: var(--cb-ink);
}
.cb-tuner__mast, .cb-charts__head { position: relative; }
.cb-display-panel select {
	width: 100%;
	margin-top: 4px;
	background: var(--cb-hull);
	color: var(--cb-ink);
	border: 1px solid #2a3446;
	border-radius: 4px;
	padding: 5px 8px;
	font-family: inherit;
}
.cb-display-fs > span { display: block; margin-bottom: 4px; }
.cb-display-fs > div { display: flex; gap: 6px; }
.cb-display-fs button {
	flex: 1;
	background: var(--cb-hull);
	border: 1px solid #2a3446;
	border-radius: 4px;
	color: var(--cb-ink-dim);
	font-family: inherit;
	font-size: calc(12px * var(--cb-fs, 1));
	padding: 5px 4px;
	cursor: pointer;
}
.cb-display-fs button.is-active {
	color: var(--cb-ink);
	border-color: var(--cb-signal);
}
.cb-display-reset {
	background: none;
	border: none;
	color: var(--cb-brass);
	font-family: inherit;
	font-size: calc(12px * var(--cb-fs, 1));
	cursor: pointer;
	text-decoration: underline dotted;
	justify-self: start;
	padding: 0;
}
.cb-display-panel :focus-visible { outline: 2px solid var(--cb-brass); outline-offset: 2px; }