/**
 * Mount-point styling.
 *
 * The calculators are the original React components and ship their own
 * stylesheet (assets/app/pc-tools-app.css). All that is needed here is the
 * placeholder shown while the bundle loads, plus a guard so the app's own
 * container does not fight the theme's page padding.
 */

.pct-app {
	width: 100%;
}

.pct-app__loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	min-height: 22rem;
	padding: 2rem 1rem;
	color: hsl(var(--muted-foreground));
	font-size: 0.875rem;
}

/* Once React mounts it replaces the whole subtree, so the placeholder only
   needs to disappear if a mount is in progress. */
.pct-app[data-pct-mounted="1"] .pct-app__loading {
	display: none;
}

.pct-app__spinner {
	width: 1rem;
	height: 1rem;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: pct-app-spin 0.7s linear infinite;
}

@keyframes pct-app-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pct-app__spinner {
		animation: none;
	}
}

.pct-app__noscript {
	padding: 1rem;
	border: 1px solid hsl(var(--destructive) / 0.3);
	border-radius: var(--radius);
	background: hsl(var(--destructive) / 0.1);
	color: hsl(var(--destructive));
	text-align: center;
}

/* The tool components use `container mx-auto px-4` (and, on some tools, an
   extra `max-w-5xl`), which already centres them inside their own width cap.
   Inside the hero the theme has its own container, so any Tailwind container
   nested anywhere inside the mounted app is neutralised rather than stacking
   a second, narrower width on top of the theme's. This is a descendant
   selector, not a direct-child one, because the app root itself carries the
   `.container` class on some tools and is one level deeper on others. */
.pct-hero__tool .pct-app .container {
	max-width: none !important;
	padding-left: 0;
	padding-right: 0;
}

/* Each mounted tool renders its own page-level "<Tool name>" heading and
   description inside the app root, which duplicates the theme's own hero
   heading and description immediately above it. The theme's version carries
   the real on-page SEO copy, so the app's inner copy is hidden rather than
   shown twice. Scoped to a container's own first child so it never matches
   a heading inside the results panel. */
.pct-hero__tool .pct-app .container > div:first-child:has(> h1) {
	display: none;
}