/*
 * Радио 133 — плеер прямого эфира.
 *
 * Две формы одного блока. На компьютере — прямоугольник в правом нижнем
 * углу. На телефоне — тонкая полоса во всю ширину внизу экрана: угла
 * там нет, а место дорого.
 *
 * Содержимое предельно скупое: название станции, кнопка и громкость.
 * Названий треков нет намеренно — у части файлов на радио не заполнены
 * теги, и вместо имени приезжает «meridian 8a4f62». Картинки и счётчика
 * слушателей нет по решению заказчика.
 *
 * Палитра взята из подвала сайта: тёплый чёрный и золото уже живут
 * в дизайн-системе (--nn-color-footer-bg, --nn-color-footer-accent),
 * поэтому золото из макета получается частью системы, а не инородным
 * пятном. Своих литералов нет — только запасные значения в var()
 * на случай площадки без токенов.
 *
 * Про специфичность: у элементных селекторов вес выше, чем у одиночного
 * класса. В этом проекте на этом уже спотыкались (см. breadcrumbs.css),
 * поэтому здесь всё оформление идёт классами, а правила для button, input
 * и svg всегда сцеплены с классом.
 */

.nn-radio {
	--nn-radio-bg: var(--nn-color-footer-bg, #100e0c);
	--nn-radio-gold: var(--nn-color-footer-accent, #dcb682);
	--nn-radio-text: var(--nn-color-footer-text, #f4f3ee);
	--nn-radio-dim: var(--nn-color-footer-dim, #ab9f8a);
	--nn-radio-line: rgba(220, 182, 130, 0.28);

	/*
	 * Производные золота: блик и тень для объёмной кнопки и «чернила» —
	 * цвет значка поверх золота. В дизайн-системе таких токенов нет,
	 * поэтому объявлены здесь, в одном месте, а не по месту применения.
	 */
	--nn-radio-gold-hi: #f2d9a8;
	--nn-radio-gold-lo: #b98f52;
	--nn-radio-ink: #17130d;

	color: var(--nn-radio-text);
	font-size: var(--nn-fs-sm, 0.875rem);
	line-height: 1.35;
}

.nn-radio[hidden] {
	display: none;
}

/* Компьютер: прямоугольник в правом нижнем углу. */
.nn-radio--bar {
	position: fixed;
	right: var(--nn-space-4, 1rem);
	bottom: var(--nn-space-4, 1rem);
	z-index: 900;
	border: 1px solid var(--nn-radio-line);
	border-radius: var(--nn-radius-lg, 16px);
	background: var(--nn-radio-bg);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
}

/* Тот же блок в потоке страницы. */
.nn-radio--inline {
	display: inline-block;
	max-width: 100%;
	border: 1px solid var(--nn-radio-line);
	border-radius: var(--nn-radius-lg, 16px);
	background: var(--nn-radio-bg);
}

.nn-radio__inner {
	display: flex;
	align-items: center;
	gap: var(--nn-space-2, 0.5rem);
	padding: 9px 12px;
}

.nn-radio__play,
.nn-radio__volume,
.nn-radio__close {
	flex: none;
}

/* Название станции и состояние эфира. */
.nn-radio__title {
	display: flex;
	flex: none;
	align-items: center;
	gap: 0.5em;
	margin: 0;
}

/*
 * Засечное начертание — из макета, где «RADIO 133» набрано антиквой.
 *
 * Times New Roman стоит первым не по вкусу, а из-за цифр. В Georgia,
 * которая идёт первой в токене заголовка плитки, цифры старинные:
 * единица ростом со строчную букву, тройка уходит под строку. В слове
 * «РАДИО 133» это читается как съехавший набор — заказчик увидел сразу.
 * Переключить Georgia на прописные цифры нельзя: в поставке Windows
 * у неё нет такой таблицы, и font-variant-numeric ничего не меняет.
 * Times New Roman рисует цифры одной высоты по умолчанию.
 */
.nn-radio__station {
	color: var(--nn-radio-gold);
	font-family: "Times New Roman", Times, "PT Serif", var(--nn-font-tile-title, serif);
	font-size: 0.95rem;
	font-variant-numeric: lining-nums;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.nn-radio__live-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--nn-color-success, #3ddc84);
}

/* Пульсация только когда действительно играем. */
.nn-radio.is-playing .nn-radio__live-dot {
	animation: nn-radio-pulse 2s ease-in-out infinite;
}

/* Станция молчит — точка гаснет, название тускнеет. */
.nn-radio.is-offline .nn-radio__live-dot {
	background: var(--nn-radio-dim);
	animation: none;
}

.nn-radio.is-offline .nn-radio__station {
	color: var(--nn-radio-dim);
}

@keyframes nn-radio-pulse {

	50% {
		opacity: 0.25;
	}
}

/*
 * Кнопка — только область нажатия и место для значка загрузки.
 * Всё видимое рисует вложенный SVG: у вектора и диск, и кольца
 * сглаживаются одним растеризатором, без ступенек по краю круга.
 */
.nn-radio__play {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nn-radio-ink);
	cursor: pointer;
}

.nn-radio__play-art {
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Заливка диска: цвета живут в CSS, а не в разметке SVG. */
.nn-radio__stop--hi {
	stop-color: var(--nn-radio-gold-hi);
}

.nn-radio__stop--mid {
	stop-color: var(--nn-radio-gold);
}

.nn-radio__stop--lo {
	stop-color: var(--nn-radio-gold-lo);
}

/* Внешнее кольцо и тонкая обводка по краю диска — из макета. */
.nn-radio__play-halo {
	fill: none;
	stroke: var(--nn-radio-gold);
	stroke-opacity: 0.14;
	stroke-width: 5;
	transition: stroke-opacity 0.25s ease, stroke-width 0.25s ease;
}

.nn-radio__play-edge {
	fill: none;
	stroke: var(--nn-radio-gold);
	stroke-opacity: 0.55;
	stroke-width: 1;
}

.nn-radio.is-playing .nn-radio__play-halo {
	stroke-opacity: 0.24;
	stroke-width: 6;
}

.nn-radio.is-playing .nn-radio__play-edge {
	stroke-opacity: 0.8;
}

.nn-radio__play:hover .nn-radio__play-disc {
	filter: brightness(1.07);
}

.nn-radio__play:focus-visible {
	border-radius: 50%;
	outline: 2px solid var(--nn-radio-gold);
	outline-offset: 3px;
}

.nn-radio__play[disabled] {
	cursor: default;
	filter: grayscale(0.7);
	opacity: 0.55;
}

/*
 * Значки воспроизведения и паузы — части того же SVG, что и диск.
 *
 * Размер подбирался двумя итерациями с заказчиком: 43% диаметра диска
 * оказалось мало, 57% — много. Сейчас 46%: высота значка 21 единица
 * системы координат при диске в 46 единиц.
 */
.nn-radio__icon {
	fill: var(--nn-radio-ink);
}

.nn-radio__icon--pause {
	display: none;
}

.nn-radio.is-playing .nn-radio__icon--play {
	display: none;
}

.nn-radio.is-playing .nn-radio__icon--pause {
	display: block;
}

.nn-radio__spinner {
	position: absolute;
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(23, 19, 13, 0.35);
	border-top-color: var(--nn-radio-ink);
	border-radius: 50%;
}

.nn-radio.is-loading .nn-radio__icon {
	display: none;
}

.nn-radio.is-loading .nn-radio__spinner {
	display: block;
	animation: nn-radio-spin 0.8s linear infinite;
}

@keyframes nn-radio-spin {

	to {
		transform: rotate(360deg);
	}
}

/* Громкость. */
.nn-radio__volume {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.nn-radio__mute {
	display: flex;
	flex: none;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nn-radio-dim);
	cursor: pointer;
}

.nn-radio__mute:hover {
	color: var(--nn-radio-gold);
}

.nn-radio__mute:focus-visible {
	border-radius: var(--nn-radius-sm, 4px);
	outline: 2px solid var(--nn-radio-gold);
	outline-offset: 2px;
}

.nn-radio__speaker {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.6;
}

.nn-radio__speaker-body {
	fill: currentColor;
	stroke-width: 1.2;
}

/*
 * Дуги гаснут по мере убавления, крестик появляется при нуле.
 * Три ступени, а не две: с двумя дугами на средней громкости
 * оставалась одна, и значок читался как «почти выключено».
 */
.nn-radio__speaker-cross {
	opacity: 0;
}

.nn-radio__volume.is-low .nn-radio__speaker-wave--mid,
.nn-radio__volume.is-low .nn-radio__speaker-wave--far,
.nn-radio__volume.is-mid .nn-radio__speaker-wave--far,
.nn-radio__volume.is-muted .nn-radio__speaker-wave {
	opacity: 0;
}

.nn-radio__volume.is-muted .nn-radio__speaker-cross {
	opacity: 1;
}

.nn-radio__volume-input {
	flex: none;
	width: 66px;
	height: 4px;
	margin: 0;
	padding: 0;
	border-radius: 2px;
	/* Доля заливки приезжает из скрипта: --nn-radio-vol. */
	background:
		linear-gradient(var(--nn-radio-gold), var(--nn-radio-gold)) 0 / var(--nn-radio-vol, 80%) 100% no-repeat,
		rgba(220, 182, 130, 0.25);
	appearance: none;
	cursor: pointer;
}

.nn-radio__volume-input::-webkit-slider-thumb {
	width: 13px;
	height: 13px;
	border: 0;
	border-radius: 50%;
	background: var(--nn-radio-gold);
	box-shadow: 0 0 0 3px rgba(220, 182, 130, 0.18);
	appearance: none;
}

.nn-radio__volume-input::-moz-range-thumb {
	width: 13px;
	height: 13px;
	border: 0;
	border-radius: 50%;
	background: var(--nn-radio-gold);
	box-shadow: 0 0 0 3px rgba(220, 182, 130, 0.18);
}

.nn-radio__volume-input:focus-visible {
	outline: 2px solid var(--nn-radio-gold);
	outline-offset: 4px;
}

/* Закрытие. */
.nn-radio__close {
	display: flex;
	width: 22px;
	height: 22px;
	padding: 5px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--nn-radio-dim);
	cursor: pointer;
}

.nn-radio__close svg {
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 2;
}

.nn-radio__close:hover {
	color: var(--nn-radio-gold);
}

.nn-radio__close:focus-visible {
	outline: 2px solid var(--nn-radio-gold);
	outline-offset: 2px;
}

/*
 * Телефон: тонкая полоса во всю ширину внизу экрана.
 *
 * Регулятор громкости убран намеренно: на телефоне громкостью
 * управляют кнопками устройства, а место в полосе дорогое.
 * Скруглений и боковых рамок нет — полоса прирастает к краю экрана.
 */
@media (max-width: 599px) {

	.nn-radio--bar {
		right: 0;
		bottom: 0;
		left: 0;
		border-right: 0;
		border-bottom: 0;
		border-left: 0;
		border-radius: 0;
		box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.5);
		/* Полоса жестов перекрывает нижний край. */
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	.nn-radio--bar .nn-radio__inner {
		gap: 0.7rem;
		padding: 6px 12px;
	}

	.nn-radio--bar .nn-radio__play {
		width: 38px;
		height: 38px;
	}

	.nn-radio--bar .nn-radio__title {
		flex: 1 1 auto;
		min-width: 0;
	}

	.nn-radio--bar .nn-radio__station {
		overflow: hidden;
		font-size: 0.86rem;
		text-overflow: ellipsis;
	}

	.nn-radio--bar .nn-radio__volume {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {

	.nn-radio.is-playing .nn-radio__live-dot {
		animation: none;
	}

	.nn-radio.is-loading .nn-radio__spinner {
		animation-duration: 2.4s;
	}
}