/**
 * M3 Stage 7 — App Install / PWA presentation.
 * Mobile-only, normal-flow, and intentionally outside the sticky stack.
 */

.pnc-install-banner {
	display: none;
}

@media (max-width: 900px) {
	.pnc-install-banner[hidden] {
		display: none !important;
	}

	.pnc-install-banner {
		box-sizing: border-box;
		position: relative;
		display: grid;
		grid-template-columns: 28px var(--pnc-pwa-icon-size, 58px) minmax(0, 1fr) auto;
		align-items: center;
		gap: 10px;
		min-height: var(--pnc-pwa-banner-height, 78px);
		padding: 8px 14px;
		background: var(--pnc-user-accent, #174b9b);
		color: #fff;
		font-family: var(--pnc-font-family, "Montserrat", Arial, sans-serif);
		z-index: 1;
	}

	.pnc-install-close,
	.pnc-install-button {
		font: inherit;
	}

	.pnc-install-close {
		inline-size: 28px;
		block-size: 28px;
		padding: 0;
		border: 0;
		background: transparent;
		color: currentColor;
		font-size: 22px;
		font-weight: 400;
		line-height: 1;
		cursor: pointer;
	}

	.pnc-install-icon {
		inline-size: var(--pnc-pwa-icon-size, 58px);
		block-size: var(--pnc-pwa-icon-size, 58px);
		border-radius: 13px;
		object-fit: cover;
		background: #fff;
	}

	.pnc-install-copy {
		min-width: 0;
		display: grid;
		gap: 3px;
	}

	.pnc-install-name,
	.pnc-install-meta {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pnc-install-name {
		font-size: 12px;
		font-weight: 700;
		line-height: 1.25;
	}

	.pnc-install-meta {
		font-size: 11px;
		font-weight: 400;
		line-height: 1.3;
		opacity: 0.94;
	}

	.pnc-install-button {
		min-inline-size: var(--pnc-pwa-button-width, 96px);
		min-block-size: var(--pnc-pwa-button-height, 42px);
		padding: 7px 12px;
		border: 1px solid rgba(255, 255, 255, 0.75);
		border-radius: 4px;
		background: #fff;
		color: var(--pnc-user-accent, #174b9b);
		font-size: 12px;
		font-weight: 700;
		line-height: 1.1;
		cursor: pointer;
	}

	.pnc-install-button:disabled {
		cursor: not-allowed;
		opacity: 0.65;
	}

	.pnc-install-close:focus-visible,
	.pnc-install-button:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 2px;
	}
}

@media (max-width: 420px) {
	.pnc-install-banner {
		grid-template-columns: 28px var(--pnc-pwa-icon-size, 58px) minmax(0, 1fr) auto;
		gap: 8px;
		padding-inline: 10px;
	}

	.pnc-install-button {
		padding-inline: 9px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pnc-install-banner,
	.pnc-install-button,
	.pnc-install-close {
		scroll-behavior: auto;
		transition: none !important;
	}
}