/* ==========================================================================
   Личная библиотека: кнопки истории и значки в ленте
   ==========================================================================
   Кнопки живут в шапке истории рядом с заголовком. Залитая иконка = история
   отложена, контурная = нет. Галки и подсказки к значкам живут в шапке
   ленты и в карточках; их каркас — в moigrani-street.css, здесь только сами
   значки и подсказка.
   ========================================================================== */

.mg-article-head__save {
	margin-top: 1.1rem;
	display: flex;
	justify-content: center;
}

.mg-save {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	padding: .5rem .95rem;
	border: 1px solid rgba(212, 162, 78, .28);
	border-radius: 999px;
	background: rgba(10, 8, 6, .35);
	color: var(--mg-muted, rgba(255, 255, 255, .72));
	font: inherit;
	font-size: .875rem;
	line-height: 1.2;
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

/*
 * Тема (Kadence) красит любую `button` на `:hover`, `:focus` и `:active`
 * золотом палитры и вешает тень. Её правило `button:hover` (0,1,1) сильнее
 * одного класса `.mg-save` (0,1,0), поэтому фон и тень фиксируем явно во
 * всех состояниях — иначе кнопка вспыхивает сплошным золотом.
 */
.mg-save,
.mg-save:hover,
.mg-save:focus,
.mg-save:focus-visible,
.mg-save:active {
	background: rgba(10, 8, 6, .35);
	box-shadow: none;
}

.mg-save:hover,
.mg-save:focus,
.mg-save:focus-visible,
.mg-save:active {
	color: var(--mg-gold);
	border-color: rgba(212, 162, 78, .55);
}

/* Состояние «в закладках» — золото и рамка на том же тёмном фоне, без
   золотой подложки: заливки нет ни у значка, ни у кнопки. */
.mg-save--on {
	color: var(--mg-gold);
	border-color: rgba(212, 162, 78, .55);
}

/*
 * Нижняя страховка: `fill` в CSS сильнее presentation-атрибута SVG. Даже
 * если сторонний или старый скрипт поставит `fill="currentColor"`, значок
 * останется контурным.
 */
.mg-save__icon path,
.mg-zcard__mark svg path,
.mg-zcard__mark svg circle {
	fill: none;
}

.mg-save__icon {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
}

.mg-save[disabled] {
	opacity: .6;
	cursor: progress;
}


/* Кнопка статуса — тот же вид, что у закладки. */
.mg-read-btn { margin-left: .4rem; }

/* Прочитанная карточка отходит назад: приглушённый кадр и тихая плашка. */
.mg-zcard--read .mg-zcard__media img {
	opacity: .55;
	transition: opacity .2s ease;
}

.mg-zcard--read:hover .mg-zcard__media img { opacity: .85; }

/*
 * Текст «прочитано» у плашки формата отменён: состояние живёт значками
 * на обложке (см. ниже), а не приклеенной к формату подписью.
 */

/* ==========================================================================
   Значки состояния
   ==========================================================================
   Глаз = история прочитана, закладка = отложена. Стоят на обложке сразу за
   плашкой формата (все три подписи — «текст» / «аудио» / «видео» — пять букв,
   поэтому отступ от левого края один). Клик по значку не мёртвая зона:
   скрипт в moigrani-street.php передаёт его ссылке обложки.
   ========================================================================== */

.mg-zcard__marks {
	position: absolute;
	top: .5rem;
	left: 4.3rem;
	z-index: 6;
	display: flex;
	align-items: center;
	gap: .22rem;
	height: 1.5rem;
}

/* `hidden` в разметке сильнее display:flex — иначе скрытые значки видны. */
.mg-zcard__marks[hidden],
.mg-zcard__mark[hidden] { display: none; }

.mg-zcard__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border: 1px solid rgba(212, 162, 78, .3);
	border-radius: 2px;
	background: rgba(10, 8, 6, .78);
	color: var(--mg-gold-soft, #d4a24e);
	transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.mg-zcard__mark svg { display: block; width: 13px; height: 13px; }

.mg-zcard__mark--read { color: var(--mg-gold, #d4a24e); }

.mg-zcard:hover .mg-zcard__mark {
	border-color: rgba(212, 162, 78, .55);
	background: rgba(10, 8, 6, .9);
	color: var(--mg-gold);
}

/* ==========================================================================
   Подсказка к значку
   ==========================================================================
   Своя плашка вместо `title`. `title` рисует сам браузер: с задержкой около
   секунды, на тач-экране не появляется вовсе, и проверить его нельзя ни
   снимком, ни вычисленными стилями. Плашка живёт под значком и левым краем
   держится за него — так она не выходит за карточку (`overflow: hidden`) и
   её не срезает край. `z-index` держит её поверх обложки и плашки формата.
   На тач-экране плашку показывает первый тап: класс `is-tip` ставит скрипт
   в moigrani-street.php.
   ========================================================================== */

.mg-zcard__mark { position: relative; }

.mg-zcard__mark::after {
	content: attr(data-tip);
	position: absolute;
	top: calc(100% + .45rem);
	left: 0;
	z-index: 30;
	padding: .34rem .55rem;
	border: 1px solid var(--mg-line-gold);
	border-radius: 2px;
	background: rgba(10, 8, 6, .97);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .66);
	color: var(--mg-cream);
	font-family: var(--mg-sans);
	font-size: .68rem;
	line-height: 1.25;
	letter-spacing: .02em;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-3px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

.mg-zcard__mark:hover::after,
.mg-zcard__mark:focus-visible::after,
.mg-zcard__mark.is-tip::after {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Значок стал фокусируемым ради подсказки — значит, фокус должен быть виден.
   Рамка на самом значке, а не только плашка: плашка появляется с задержкой
   перехода, а след фокуса нужен сразу. */
.mg-zcard__mark:focus-visible {
	outline: 2px solid var(--mg-gold);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mg-zcard__mark::after { transition: none; }
}