/**
 * Окно-подсказка «Установить приложение» и пункт подвала в приложении.
 *
 * Цвета из токенов темы, с запасным значением — как у баннера cookie:
 * модуль должен выглядеть прилично и при теме без токенов проекта.
 */

/*
 * Внутри установленного приложения пункт подвала не нужен. Пункт
 * скрывается вместе со строкой списка; где :has() нет — хотя бы ссылка.
 */
@media (display-mode: standalone) {
	.nn-footer-list__item:has(> a[href$="#nn-app"]),
	a[href$="#nn-app"] {
		display: none;
	}
}

.nn-app-help {
	width: min(28rem, calc(100vw - 2 * var(--nn-space-4, 1rem)));
	max-height: 85vh;
	padding: 0;
	overflow-y: auto;
	border: 1px solid var(--nn-color-border-strong, #4f5366);
	border-radius: var(--nn-radius-md, 8px);
	background-color: var(--nn-color-surface, #242633);
	box-shadow: var(--nn-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.45));
	color: var(--nn-color-text, #cfd8dd);
	font-family: var(--nn-font-body, inherit);
	font-size: var(--nn-fs-card, 0.9rem);
	line-height: var(--nn-lh-base, 1.5);
}

.nn-app-help::backdrop {
	background-color: rgba(0, 0, 0, 0.6);
}

.nn-app-help__inner {
	padding: var(--nn-space-5, 1.5rem);
}

.nn-app-help__title {
	margin: 0 0 var(--nn-space-3, 0.75rem);
	color: var(--nn-color-text, #cfd8dd);
	font-family: var(--nn-font-heading, inherit);
	font-size: var(--nn-fs-md, 1.125rem);
	font-weight: var(--nn-fw-bold, 700);
	line-height: var(--nn-lh-h3, 1.4);
}

.nn-app-help__text p {
	margin: 0 0 var(--nn-space-2, 0.5rem);
}

.nn-app-help__close {
	margin-top: var(--nn-space-3, 0.75rem);
	padding: var(--nn-space-2, 0.5rem) var(--nn-space-5, 1.5rem);
	border: 0;
	border-radius: var(--nn-radius-sm, 4px);
	background-color: var(--nn-color-action, #2e89ff);
	color: var(--nn-color-action-text, #f8fafc);
	font: inherit;
	font-weight: var(--nn-fw-bold, 700);
	cursor: pointer;
}

.nn-app-help__close:hover {
	background-color: var(--nn-color-action-hover, #57a3ff);
}

.nn-app-help__close:focus-visible {
	outline: 2px solid var(--nn-color-focus, #ffd54f);
	outline-offset: 2px;
}