/* Плеер статьи. Строка-вход в потоке + панель у нижнего края экрана.
   Цвета и отступы — только токенами рельса: свои значения разошлись бы с остальной страницей
   на первой же правке темы. */

.gro-audio {
	display: block;
	margin-block: var(--gs-5);
}

/* В подвале печатается одна панель без строки-входа — пустому блоку отступ не нужен. */
.gro-audio--dock {
	margin: 0;
}

/* ── Панель у нижнего края ───────────────────────────────────────────────────
   Прилипает к низу и остаётся при прокрутке: слушают, продолжая листать статью. */
.gro-audio__dock {
	position: fixed;
	inset-inline: var(--gs-4);
	inset-block-end: var(--gs-4);
	z-index: 60;                      /* выше содержимого, ниже модалок рельса (100) */
	margin-inline: auto;
	max-width: var(--gs-max-read);
	padding: var(--gs-4);
	border: 1px solid var(--gs-line);
	border-radius: var(--gs-radius);
	background: var(--gs-surface);
	box-shadow: var(--gs-shadow-over);
}

/* Строка 1 — прошло · полоса · всего. Своя строка на любом экране: в одну строку с кнопками
   на телефоне полосе оставалось 27 точек, и время приходилось прятать. */
.gro-audio__bar {
	display: flex;
	align-items: center;
	gap: var(--gs-3);
}

.gro-audio__now,
.gro-audio__dur {
	flex: 0 0 auto;
	min-width: 4ch;                   /* «10:05» не должно дёргать полосу при смене цифр */
	color: var(--gs-ink-2);
	font-size: var(--gs-t-micro);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.gro-audio__dur {
	text-align: end;
}

/* Гостю — «бесплатная часть, N мин из M» до начала, а не сюрпризом в конце. */
.gro-audio__note {
	margin-block: 0 var(--gs-2);
	color: var(--gs-ink-2);
	font-size: var(--gs-t-micro);
}

/* Строка 2 — управление. Скорость и «закрыть» уходят вправо, перемотка с игрой — слева. */
.gro-audio__row {
	display: flex;
	align-items: center;
	gap: var(--gs-2);
	flex-wrap: nowrap;
}

.gro-audio__rate {
	margin-inline-start: auto;
}

/* Ряд скоростей. Над кнопками — панель растёт вверх, и кнопки остаются под пальцем. */
.gro-audio__rates {
	display: grid;
	grid-template-columns: repeat(6, auto);
	justify-content: end;
	gap: var(--gs-2);
	margin-block: var(--gs-2);
}

.gro-audio__rates[hidden] {
	display: none;                    /* своё display выше перебивает атрибут hidden */
}

.gro-audio__rate-opt {
	min-width: 44px;
	min-height: 44px;
	padding-inline: var(--gs-3);
	font-variant-numeric: tabular-nums;
}

/* ── Играть / пауза ──────────────────────────────────────────────────────────
   Оба значка в кнопке, виден один. Без этого во время звука кнопка показывала ▶. */
.gro-audio__glyph-pause {
	display: none;
}

.gro-audio.is-playing .gro-audio__ctl--play .gs-btn__glyph {
	display: none;
}

.gro-audio.is-playing .gro-audio__ctl--play .gro-audio__glyph-pause {
	display: block;
}

/* Органы управления: круглые, не меньше 44 точек — иначе в дороге не попасть пальцем. */
.gro-audio__ctl,
.gro-audio__rate,
.gro-audio__close {
	flex: 0 0 auto;
	min-width: 44px;                  /* тап-цель: ниже этого промахиваются — не оформление */
	min-height: 44px;
	padding-inline: var(--gs-3);
}

.gro-audio__rate {
	font-variant-numeric: tabular-nums;
	min-width: 56px;                  /* «1,25×» не должно дёргать соседей при смене */
}

/* ── Ползунок ───────────────────────────────────────────────────────────────
   Нативный input: берётся с клавиатуры и понятен экранным читалкам. */
.gro-audio__seek {
	flex: 1 1 auto;
	min-width: 0;
	height: 44px;                     /* тап-цель по высоте, сама дорожка тоньше */
	accent-color: var(--gs-focus);
	background: transparent;
	cursor: pointer;
}

.gro-audio__seek:focus-visible {
	outline: 2px solid var(--gs-focus);
	outline-offset: 2px;
}

/* ── Сообщение ──────────────────────────────────────────────────────────────
   «Продолжить с 7:12», ошибка загрузки, конец бесплатной части. */
.gro-audio__msg {
	margin-block: var(--gs-3) 0;
	color: var(--gs-ink-2);
	font-size: var(--gs-t-micro);
}

.gro-audio__msg button {
	margin-inline-start: var(--gs-3);
	border: 1px solid var(--gs-line);
	border-radius: var(--gs-radius-pill);
	padding: var(--gs-3) var(--gs-4);
	background: var(--gs-surface);
	color: var(--gs-ink);
	font: inherit;
	cursor: pointer;
}

.gro-audio__msg button:focus-visible {
	outline: 2px solid var(--gs-focus);
	outline-offset: 2px;
}

/* Пока грузится — показываем это на кнопке, а не молчим. Нажатия НЕ снимаем: подвисла сеть
   посреди записи — человек должен суметь поставить паузу. */
.gro-audio.is-loading .gro-audio__ctl--play {
	opacity: .6;
}

/* ── Мобильный ──────────────────────────────────────────────────────────────
   Рейка чтения внизу экрана: панель встаёт НАД ней, иначе они перекрываются.
   56 = высота рейки (кнопка 44 + поля 6 + 6, см. gro-reader-bar.php) — токена у неё нет;
   прежде здесь стоял `--gs-bar-h`, а это высота ШАПКИ, совпадение по числу. */
@media (max-width: 800px) {
	.gro-audio__dock {
		inset-inline: var(--gs-3);
		inset-block-end: calc(56px + env(safe-area-inset-bottom, 0px) + var(--gs-3));
		padding: var(--gs-3);
	}

	/* Шесть скоростей в строку на телефон не встают — три и три, ровной сеткой. */
	.gro-audio__rates {
		grid-template-columns: repeat(3, 1fr);
		justify-content: stretch;
	}
}