/**
 * Стили страницы статьи (single.php).
 *
 * Вынесено из inline-<style> в single.php 29.07.2026 без изменений — этап 0
 * редизайна страницы статьи (см. план «Редизайн страницы статьи»).
 * Содержит: мобильный pill-тулбар, bottom-sheets «Главы»/«Поделиться»,
 * десктопный блок лайка, прогресс чтения, TOC-модалку.
 */

	/* Скрываем мобильный bar-aside (старые кнопки убраны), модалки внутри
	   позиционируются position:fixed и срабатывают как раньше. Десктоп-сайдбар не трогаем. */
	@media (max-width: 1119px) {
		.article__aside { background: transparent; border: none; padding: 0; border-radius: 0; pointer-events: none; }
		.article__aside .modal { pointer-events: auto; }
	}

	.article-toolbar {
		position: fixed;
		bottom: calc(28px + env(safe-area-inset-bottom, 0px));
		left: 50%;
		transform: translateX(-50%);
		z-index: 1100;
		display: flex;
		align-items: center;
		gap: 12px;
		pointer-events: none;
		transition: bottom .35s cubic-bezier(.4,0,.2,1);   /* одна кривая с .navbar — двигаются как одно целое */
	}
	body.lb-sheet-open .article-toolbar { display: none; }
	/* Мобильный account-sheet (.ig-msheet.is-open, template в auth-account.js) —
	   отдельный overlay, не lb-sheet. Прячем pill-тулбар и под ним, чтобы
	   он не проступал поверх открытой панели «Кабинет/Сайт/Инструменты». */
	body:has(.ig-msheet.is-open) .article-toolbar { display: none !important; }
	.article-toolbar > * { pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }

	/* Тёмный pill: ♥ + Главы + Поделиться, brand #2A2B41 */
	.article-toolbar-pill {
		position: relative;
		display: flex;
		align-items: center;
		background: #2A2B41;
		border-radius: 30px;
		padding: 6px 10px;
		gap: 2px;
		color: #fff;
		overflow: hidden;
		box-shadow:
			0 6px 16px -6px rgba(0, 0, 0, 0.35),
			0 2px 6px -2px rgba(0, 0, 0, 0.25);
	}
	.article-toolbar-btn {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 11px 14px;
		border-radius: 22px;
		background: none;
		border: 0;
		color: #fff;
		font-family: 'Manrope', sans-serif;
		font-size: 15px;
		font-weight: 500;
		line-height: 1;
		cursor: pointer;
		transition: background .15s ease;
		position: relative;
		z-index: 1;
	}
	.article-toolbar-btn:active { background: rgba(255, 255, 255, 0.08); }
	.article-toolbar-btn svg {
		display: block;
		width: 24px; height: 24px;
		min-width: 24px; min-height: 24px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.8;
		stroke-linecap: round;
		stroke-linejoin: round;
		flex-shrink: 0;
	}
	.article-toolbar-btn__count { font-variant-numeric: tabular-nums; font-size: 14px; }
	/* Share — иконка-only кнопка, шире для визуального баланса */
	.article-share-btn { padding: 11px 16px; }
	/* Like: красная заливка при is-liked (мгновенная — без чёрного контура при пульсе) */
	.article-like-btn .article-like-icon {
		transform-origin: center;
	}
	.article-like-btn.is-liked .article-like-icon {
		fill: #ff5b5b;
		stroke: #ff5b5b;
	}
	.article-like-btn.is-liked .article-toolbar-btn__count { color: #ff5b5b; }
	.article-like-btn.is-pulsing .article-like-icon {
		animation: granitLikePulse .42s cubic-bezier(.34, 1.5, .64, 1);
	}
	@keyframes granitLikePulse {
		0%   { transform: scale(1); }
		35%  { transform: scale(1.22); }
		70%  { transform: scale(0.94); }
		100% { transform: scale(1); }
	}

	/* Прогресс чтения — тонкая полоска вдоль нижней кромки pill */
	.article-toolbar-pill__progress {
		position: absolute;
		left: 0; right: 0; bottom: 0;
		height: 3px;
		background: rgba(255, 255, 255, 0.10);
		pointer-events: none;
		z-index: 0;
	}
	.article-toolbar-pill__progress-fill {
		display: block;
		height: 100%;
		width: 0%;
		background: #fbd890;
		transition: width .12s linear;
	}

	/* Круглая отдельная кнопка ↓ Вниз — flex: 0 0 чтобы не сплющивало */
	.article-toolbar-fab {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 52px;
		width: 52px;
		height: 52px;
		padding: 0;
		border-radius: 50%;
		background: #2A2B41;
		border: 0;
		color: #fff;
		cursor: pointer;
		transition: transform .2s ease;
		box-shadow:
			0 6px 16px -6px rgba(0, 0, 0, 0.35),
			0 2px 6px -2px rgba(0, 0, 0, 0.25);
	}
	.article-toolbar-fab:hover { transform: translateY(-2px); }
	.article-toolbar-fab svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

	/* Auto-hide navbar: scroll вниз → navbar уезжает, тулбар плавно съезжает вниз на его место.
	   Scroll вверх → navbar возвращается, тулбар поднимается обратно. */
	.navbar { transition: transform .35s cubic-bezier(.4,0,.2,1); }
	body.is-scrolling-down .navbar {
		transform: translateY(100%);
	}

	/* Старый SVG-прогресс на навбаре больше не нужен — он теперь в pill */
	.navbar-progress-svg { display: none !important; }

	/* =====================================================
	   Desktop sidebar: блок «Понравилась статья?» (как .article__share, под ним)
	   ===================================================== */
	.article__like {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		padding: 0.8rem 0.8rem 0.8rem 2.4rem;
		border: 1px solid #E7E7E7;
		border-radius: 1.6rem;
		max-width: 35rem;
		/* перебиваем родительский gap: 3.2rem на .article__aside */
		margin-top: -2.4rem;
	}
	.article__like .article-hint {
		font-size: 1.8rem;
		color: #636261;
	}
	.article__like-btn {
		display: inline-flex;
		align-items: center;
		gap: 0.8rem;
		padding: 0.8rem 1.4rem;
		border-radius: 1.2rem;
		background: transparent;
		border: 0;
		cursor: pointer;
		color: #1f1f1f;
		font-family: 'Manrope', sans-serif;
		transition: background .15s ease;
	}
	.article__like-btn:hover { background: #f4f2ec; }
	.article__like-icon {
		width: 22px; height: 22px;
		fill: none;
		stroke: currentColor;
		stroke-width: 1.8;
		transform-origin: center;
	}
	.article__like-btn.is-liked .article__like-icon {
		fill: #ff5b5b;
		stroke: #ff5b5b;
	}
	.article__like-count {
		font-size: 1.6rem;
		font-weight: 600;
		color: #1f1f1f;
		font-variant-numeric: tabular-nums;
		min-width: 1.4rem;
		text-align: left;
	}
	.article__like-btn.is-liked .article__like-count { color: #ff5b5b; }
	.article__like-btn.is-pulsing .article__like-icon {
		animation: granitLikePulse .6s cubic-bezier(.34, 1.56, .64, 1);
	}

	/* =====================================================
	   Bottom-sheets для статьи: «Главы» и «Поделиться»
	   Базу даёт sass/layouts/lb-sheet.scss (.lb-sheet*), здесь — внутреннее наполнение
	   ===================================================== */
	.article-sheet__header {
		position: relative;
		display: flex; align-items: center;
		padding: 6px 0 18px;
		border-bottom: 1px solid #f0eee9;
		margin-bottom: 8px;
	}
	.article-sheet__title {
		font-size: 28px;
		font-weight: 400;
		letter-spacing: 0.01em;
		color: #1f1f1f;
		line-height: 1;
	}
	.article-sheet__close {
		position: absolute;
		right: 0; top: 50%;
		transform: translateY(calc(-50% - 4px));
		width: 36px; height: 36px;
		border-radius: 50%;
		background: #f4f2ec;
		border: 0;
		display: flex; align-items: center; justify-content: center;
		color: #1f1f1f;
		cursor: pointer;
		transition: background .15s ease, transform .15s ease;
		-webkit-tap-highlight-color: transparent;
	}
	.article-sheet__close:active { transform: translateY(calc(-50% - 4px)) scale(0.92); background: #ebe6d8; }
	.article-sheet__close svg { display: block; width: 16px; height: 16px; }

	/* Главы — ссылки генерируются JS (TableOfContents → mirror), стилизуем <a> напрямую */
	.article-toc-sheet__list a {
		display: flex; align-items: center; justify-content: space-between;
		padding: 16px 0;
		font-size: 16px; font-weight: 500;
		color: #1f1f1f;
		text-decoration: none;
		border-bottom: 1px solid #f4f2ec;
		line-height: 1.35;
	}
	.article-toc-sheet__list a:last-child { border-bottom: 0; }
	.article-toc-sheet__list a::after {
		content: '';
		width: 20px; height: 20px;
		flex-shrink: 0;
		margin-left: 14px;
		background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23b8b1a0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 10h10M11 6l4 4-4 4'/></svg>") no-repeat center;
	}
	.article-toc-sheet__list a:active { background: rgba(0,0,0,0.02); }

	/* Поделиться — сетка иконок */
	.article-share-sheet__grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 14px 10px;
		margin: 10px 0 22px;
	}
	.article-share-sheet__item {
		display: flex; flex-direction: column; align-items: center; gap: 8px;
		padding: 4px 0;
		cursor: pointer;
		border: 0;
		background: none;
		font-family: inherit;
		color: inherit;
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}
	.article-share-sheet__icon {
		width: 56px; height: 56px;
		border-radius: 50%;
		display: flex; align-items: center; justify-content: center;
		background: #f4f2ec;
		color: #1f1f1f;
		flex-shrink: 0;
		position: relative;
		overflow: hidden;
		transition: transform .18s cubic-bezier(.4,1.6,.5,1);
	}
	.article-share-sheet__icon svg { width: 26px; height: 26px; display: block; position: relative; z-index: 2; }
	.article-share-sheet__icon_tg { background: #229ED9; color: #fff; }
	.article-share-sheet__icon_wa { background: #25D366; color: #fff; }
	.article-share-sheet__icon_vk { background: #0077FF; color: #fff; }
	.article-share-sheet__icon_copy { background: #f4f2ec; color: #1f1f1f; }
	.article-share-sheet__label {
		font-size: 12px; font-weight: 500;
		color: #1f1f1f;
		text-align: center;
		line-height: 1.2;
		font-family: 'Manrope', sans-serif;
	}
	.article-share-sheet__item:active .article-share-sheet__icon { transform: scale(0.88); }
	/* Ripple-волна */
	.article-share-sheet__icon::after {
		content: '';
		position: absolute;
		inset: 0;
		border-radius: 50%;
		background: radial-gradient(circle at center, rgba(255,255,255,0.55) 0%, transparent 60%);
		opacity: 0;
		transform: scale(0.3);
		pointer-events: none;
	}
	.article-share-sheet__item.is-clicked .article-share-sheet__icon::after {
		animation: granitShareRipple .55s ease-out;
	}
	@keyframes granitShareRipple {
		0%   { opacity: 0.9; transform: scale(0.3); }
		100% { opacity: 0;   transform: scale(2.2); }
	}

	/* Copy в сетке — иконка-документ → зелёная галочка */
	.article-share-sheet__icon_copy .icon-default,
	.article-share-sheet__icon_copy .icon-success {
		position: absolute;
		transition: transform .25s cubic-bezier(.4,1.6,.5,1), opacity .2s ease;
	}
	.article-share-sheet__icon_copy .icon-success {
		opacity: 0;
		transform: scale(0.5) rotate(-30deg);
		color: #4f725d;
	}
	.article-share-sheet__item.is-copied .article-share-sheet__icon_copy {
		background: #e3f0e6;
	}
	.article-share-sheet__item.is-copied .article-share-sheet__icon_copy .icon-default {
		opacity: 0;
		transform: scale(0.5) rotate(30deg);
	}
	.article-share-sheet__item.is-copied .article-share-sheet__icon_copy .icon-success {
		opacity: 1;
		transform: scale(1) rotate(0);
	}
	.article-share-sheet__item.is-copied .article-share-sheet__label { color: #4f725d; }

	/* URL-блок с кнопкой «Копировать» */
	.article-share-sheet__url-row {
		display: flex; align-items: center; gap: 12px;
		background: #f4f2ec;
		border-radius: 18px;
		padding: 10px 10px 10px 22px;
		min-height: 64px;
		margin-bottom: 6px;
		transition: background .25s ease;
	}
	.article-share-sheet__url-row.is-copied { background: #e3f0e6; }
	.article-share-sheet__url {
		flex: 1;
		font-size: 15px;
		color: #5a5a5e;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-family: ui-monospace, 'SF Mono', Menlo, monospace;
	}
	.article-share-sheet__url-btn {
		position: relative;
		background: #2A2B41;
		color: #fff;
		border: 0;
		border-radius: 14px;
		padding: 18px 22px;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		font-family: 'Manrope', sans-serif;
		letter-spacing: 0.04em;
		min-width: 160px;
		min-height: 52px;
		overflow: hidden;
		transition: background .2s ease, transform .15s ease;
	}
	.article-share-sheet__url-btn:active { transform: scale(0.95); }
	.article-share-sheet__url-btn .lbl-default,
	.article-share-sheet__url-btn .lbl-success {
		display: inline-block;
		transition: opacity .2s ease, transform .25s ease;
	}
	.article-share-sheet__url-btn .lbl-success {
		position: absolute;
		left: 0; right: 0; top: 50%;
		transform: translateY(0) scale(0.7);
		opacity: 0;
	}
	.article-share-sheet__url-row.is-copied .article-share-sheet__url-btn { background: #4f725d; }
	.article-share-sheet__url-row.is-copied .article-share-sheet__url-btn .lbl-default {
		opacity: 0;
		transform: translateY(-100%);
	}
	.article-share-sheet__url-row.is-copied .article-share-sheet__url-btn .lbl-success {
		opacity: 1;
		transform: translateY(-50%) scale(1);
	}

	/* Кнопка «Скопировать ссылку» внутри лайтбокса */
	.article__share-copy { color: #1f1f1f; position: relative; }
	.article__share-copy-success { display: none; color: #1f1f1f; }
	.article__share-copy.copy--tooltip::before { display: none !important; } /* прячем штатный плавающий тултип */
	.article__share-copy.copy--tooltip .article__share-copy-default { display: none; }
	.article__share-copy.copy--tooltip .article__share-copy-success { display: inline; }

	/* Иконка «Скопировать ссылку» (десктоп, рядом с TG/WA) */
	.article__share-copy-icon { position: relative; }
	.article__share-copy-icon::before { display: none !important; } /* глобальный тултип не нужен */
	.article__share-copy-icon .article__share-copy-icon-success { display: none; }
	.article__share-copy-icon.copy--tooltip {
		background-color: #4f725d; /* зелёный фон при успехе */
	}
	.article__share-copy-icon.copy--tooltip .article__share-copy-icon-default { display: none; }
	.article__share-copy-icon .article__share-copy-icon-success {
		/* Глобальный .article__share-buttons svg { fill: #1f1f1f } перекрывает inline-атрибут.
		   Заставляем галочку оставаться stroke-only, без чёрной заливки треугольника. */
		fill: none !important;
		stroke: currentColor;
	}
	.article__share-copy-icon.copy--tooltip .article__share-copy-icon-success {
		display: block;
		stroke: #ffffff;
	}
	/* Default (без tooltip): иконка тёмная.
	   :hover — белая (как и у TG/WA, через `.button-icon:hover` blue bg + svg fill #fff).
	   :focus без :hover (кнопка после клика, мышь увели) — тёмная, чтобы не белилась. */
	.article__share-copy-icon:not(.copy--tooltip) .article__share-copy-icon-default {
		fill: #1f1f1f;
	}
	.article__share-copy-icon:not(.copy--tooltip):hover .article__share-copy-icon-default {
		fill: #ffffff;
	}
	.article__share-copy-icon:not(.copy--tooltip):focus:not(:hover) .article__share-copy-icon-default {
		fill: #1f1f1f;
	}
	/* Уведомление «Ссылка скопирована» — плашка поверх блока «Понравилась статья» */
	.article__share { position: relative; }
	.article__share-copied-msg {
		position: absolute;
		top: calc(100% + 0.8rem);
		left: 0;
		right: 0;
		max-width: 35rem;
		padding: 1.4rem 2rem;
		background: #4f725d;
		color: #ffffff;
		font-size: 1.5rem;
		font-weight: 600;
		text-align: center;
		border-radius: 1.6rem;
		box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.22);
		opacity: 0;
		transform: translateY(-6px) scale(0.98);
		transition: opacity .25s ease, transform .3s cubic-bezier(.34, 1.4, .6, 1);
		pointer-events: none;
		white-space: nowrap;
		z-index: 5;
	}
	.article__share:has(.article__share-copy-icon.copy--tooltip) .article__share-copied-msg {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	/* На всех экранах с нижним меню навигации (≤820px) — поднимаем тулбар, чтобы
	   тень от FAB-кнопок не падала на меню. */
	@media (max-width: 820px) {
		/* По умолчанию тулбар над navbar. Высота меню приходит из JS
		   (--ig-navbar-h): фиксированные 86px были меньше реальной,
		   и pill наезжал на белую панель меню. */
		.article-toolbar { bottom: calc(var(--ig-navbar-h, 86px) + 14px); }
		/* когда navbar уехал — тулбар плавно опускается на его место */
		/* Меню уехало — pill занимает его место, экран освобождается.
		   Обратно вверх меню его выталкивает. Анимации одинаковой
		   длительности, поэтому двигаются как одно целое.
		   (Белая полоса, из-за которой я это правило снимал, была
		   от осиротевшей панели .article__aside — она обнулена
		   в article-layout.css.) */
		body.is-scrolling-down .article-toolbar {
			bottom: calc(28px + env(safe-area-inset-bottom, 0px));
		}
	}

	@media (max-width: 580px) {
		.article-toolbar { gap: 10px; }
		.article-toolbar-pill { padding: 5px 8px; border-radius: 28px; }
		.article-toolbar-btn { padding: 10px 13px; font-size: 14px; border-radius: 20px; }
		.article-toolbar-btn svg { width: 22px; height: 22px; min-width: 22px; min-height: 22px; }
		.article-toolbar-btn__count { font-size: 13px; }
		.article-share-btn { padding: 10px 14px; }
		.article-toolbar-fab { flex: 0 0 48px; width: 48px; height: 48px; }
		.article-toolbar-fab svg { width: 22px; height: 22px; }
	}

	/* На десктопе сайдбар слева уже содержит оглавление и шеринг, а кнопка
	   «Наверх» с оранжевой стрелкой реализована отдельно — поэтому весь
	   плавающий тулбар на десктопе не нужен. На мобилке оставляем. */
	@media (min-width: 1120px) {
		.article-toolbar { display: none; }
	}

	/* Клон оглавления для попапа. Вне Magnific'овой обёртки полностью
	   скрыт; внутри — раскрывается как обычное содержимое модалки. */
	.article-toc-modal { display: none; }
	.mfp-content .article-toc-modal {
		display: block;
		position: relative;
		width: 95vw;
		max-width: 50rem;
		max-height: 80vh;
		overflow-y: auto;
		/* margin: auto — горизонтальное и вертикальное центрирование во flex-контейнере .mfp-content */
		margin: auto;
		padding: 3rem 2rem;
		background: #fff;
		border-radius: 2rem;
		box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.35);
	}
	.mfp-content .article-toc-modal__title {
		font-size: 2.2rem;
		margin-bottom: 2rem;
	}
	.mfp-content .article-toc-modal a {
		display: flex;
		gap: 1.2rem;
		width: fit-content;
		color: #1F1F1FB2;
		font-size: 1.5rem;
		text-decoration: none;
	}
	.mfp-content .article-toc-modal a::before { content: '—'; flex-shrink: 0; }
	.mfp-content .article-toc-modal a:not(:last-of-type) { margin-bottom: 1.2rem; }
	.mfp-content .article-toc-modal a:is(:hover, :focus) { color: #000; }
	.article-toc-modal__close {
		position: absolute;
		top: 1.2rem;
		right: 1.2rem;
		width: 2rem;
		height: 2rem;
		background: transparent;
		border: 0;
		padding: 0;
		cursor: pointer;
	}
	.article-toc-modal__close svg { width: 1.8rem; height: 1.8rem; stroke: #1F1F1F; }
	@media (min-width: 1120px) {
		.mfp-content .article-toc-modal a { font-size: 1.8rem; }
	}

	/* =====================================================
	   Плавающая кнопка «Назад» (только телефон)
	   Кнопка в шапке статьи уезжает вверх вместе с контентом,
	   а вернуться читатель хочет с любого места. Появляется
	   при скролле вверх — тем же жестом, которым возвращаются.
	   Слева, как системная кнопка возврата в iOS и Android.
	   ===================================================== */
	.article-back-fab {
		position: fixed;
		top: calc(var(--header-height-mobile, 64px) + 12px);
		left: 16px;
		z-index: 1099;
		display: none;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 50%;
		background: rgba(17, 19, 20, .82);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		color: #fff;
		box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
		cursor: pointer;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity .25s ease, transform .25s ease;
	}

	@media (max-width: 820px) {
		.article-back-fab { display: inline-flex; }

		/* Показываем, когда читатель листает вверх и уже ушёл от шапки */
		body.is-article-scrolled:not(.is-scrolling-down) .article-back-fab {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* Пока открыта шторка «Главы»/«Поделиться» — кнопка мешает */
	body.lb-sheet-open .article-back-fab { display: none; }