/**
 * App detail page (/apps/{slug}).
 *
 * Loaded on top of theme.css and deliberately additive: every selector here is
 * new and prefixed (.appd-*), so this file can be dequeued without leaving a
 * hole in the design system, and nothing on the homepage can shift because of
 * an edit made here.
 *
 * Tokens only, never a literal colour, or the Customizer's brand override stops
 * reaching this page. The one exception is --tile, which is the APP's own
 * colour, validated as a hex triplet in PHP before it reaches the markup.
 */

.appd {
	/* The app's colour, set on the article by the template. Everything below
	   tints from this single declaration, so an app with no colour of its own
	   falls back to the brand rather than to a grey page. */
	--tile: var(--brand);
}

/* ══ Hero ══ */

.appd-hero {
	text-align: center;
	padding-bottom: clamp(30px, 3.4vw, 46px);
	/* A wash of the app's own colour, kept to a few percent: the page is a
	   product page, not a brand page, and the copy has to stay readable in both
	   colour schemes. */
	background:
		radial-gradient(80% 120% at 50% 0%, color-mix(in srgb, var(--tile) 10%, transparent) 0%, transparent 62%),
		var(--bg-soft);
}

.appd-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.appd-hero__mark {
	width: 66px;
	height: 66px;
	border-radius: 20px;
	display: grid;
	place-items: center;
	font-size: 28px;
	color: var(--tile);
	background: color-mix(in srgb, var(--tile) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--tile) 24%, transparent);
	box-shadow: 0 18px 36px -22px color-mix(in srgb, var(--tile) 80%, transparent);
}

.appd-hero__tags {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.appd-tag {
	font-size: 0.74rem;
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 11px;
	border-radius: var(--r-full);
	background: var(--bg-mute);
	color: var(--text-2);
	border: 1px solid var(--border-soft);
}
.appd-tag--brand {
	color: var(--tile);
	background: color-mix(in srgb, var(--tile) 12%, transparent);
	border-color: color-mix(in srgb, var(--tile) 26%, transparent);
}
.appd-tag--soon {
	border-style: dashed;
	text-transform: none;
	letter-spacing: 0;
	color: var(--text-3);
}

.appd-hero__name {
	margin: 0;
	font-size: clamp(2rem, 4.4vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.appd-hero__tagline {
	margin: 0;
	max-width: 640px;
	font-size: 1.08rem;
	color: var(--text-2);
}

.appd-hero__price {
	margin: 0;
	font-size: 0.86rem;
	font-weight: 650;
	color: var(--tile);
	background: color-mix(in srgb, var(--tile) 10%, transparent);
	padding: 5px 14px;
	border-radius: var(--r-full);
}

.appd-hero__actions {
	margin-top: 6px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* ══ Try the demo ══
 * A helpful callout, NOT a security notice. These details are published on
 * purpose, so the block is tinted with the app's own colour like everything
 * else on the page rather than dressed in warning yellow, which would tell a
 * visitor to be careful about something there is nothing to be careful about. */

.appd-demo {
	padding: 22px 24px;
	border-radius: var(--r-lg);
	border: 1px solid color-mix(in srgb, var(--tile) 26%, var(--border));
	background:
		radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--tile) 9%, transparent) 0%, transparent 60%),
		var(--surface);
	box-shadow: var(--shadow-sm);
}

.appd-demo__head {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.appd-demo__mark {
	flex: none;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	color: var(--tile);
	background: color-mix(in srgb, var(--tile) 13%, transparent);
	border: 1px solid color-mix(in srgb, var(--tile) 22%, transparent);
}

.appd-demo__intro { flex: 1 1 260px; min-width: 0; }
.appd-demo__title { margin: 0; font-size: 1.02rem; font-weight: 700; }
.appd-demo__sub { margin: 2px 0 0; font-size: 0.9rem; color: var(--text-2); }
.appd-demo__go { flex: none; }

.appd-demo__creds {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.appd-cred {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px 8px 14px;
	border-radius: var(--r);
	background: var(--bg-mute);
	border: 1px solid var(--border-soft);
}

.appd-cred__label {
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--text-3);
}

/* Monospace so an l and a 1 are different shapes. Someone is going to read
   this off the screen and type it into another window. */
.appd-cred__value {
	font-family: var(--font-mono);
	font-size: 0.9rem;
	color: var(--text);
	/* Selectable in one gesture, and long values wrap instead of stretching
	   the row off the side of a phone. */
	user-select: all;
	word-break: break-all;
}

.appd-copy {
	flex: none;
	cursor: pointer;
	font: inherit;
	font-size: 0.74rem;
	font-weight: 650;
	padding: 4px 10px;
	border-radius: var(--r-full);
	color: var(--text-2);
	background: var(--surface);
	border: 1px solid var(--border);
	transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.appd-copy:hover { color: var(--tile); border-color: color-mix(in srgb, var(--tile) 40%, var(--border)); }
.appd-copy:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.appd-copy.is-done { color: var(--tile); border-color: color-mix(in srgb, var(--tile) 45%, var(--border)); }

.appd-demo__note {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 14px 0 0;
	font-size: 0.86rem;
	color: var(--text-3);
}
.appd-demo__note svg { flex: none; margin-top: 2px; }

/* ══ Story: the long copy, with the highlights beside it ══
 * Two columns on a wide screen, because a checklist under three paragraphs is
 * scrolled past. One column below 900px, copy first: the list is a summary of
 * the copy, so it reads as a repeat when it comes first on a narrow screen. */

.appd-story {
	display: grid;
	gap: clamp(24px, 3vw, 42px);
	grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
	align-items: start;
}
.appd-story--solo { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

.appd-story__body { min-width: 0; }

.appd-highlights {
	padding: 22px 24px;
	border-radius: var(--r-lg);
	border: 1px solid var(--border);
	background:
		radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--tile) 8%, transparent) 0%, transparent 58%),
		var(--surface);
	box-shadow: var(--shadow-sm);
}

.appd-highlights__label {
	margin: 0 0 14px;
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--text-3);
}

.appd-highlights__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
}
.appd-highlights__list li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 0.94rem;
	color: var(--text-2);
}
.appd-highlights__list svg {
	flex: none;
	margin-top: 2px;
	color: var(--tile);
}

/* ══ Features ══ */

.appd-features {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.appd-feature {
	padding: 24px 22px;
	border-radius: var(--r-lg);
	border: 1px solid var(--border);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease), border-color 0.22s var(--ease);
}
.appd-feature:hover {
	transform: translateY(-3px);
	box-shadow: 0 20px 40px -26px color-mix(in srgb, var(--tile) 65%, transparent), var(--shadow);
	border-color: color-mix(in srgb, var(--tile) 30%, var(--border));
}

.appd-feature__mark {
	width: 42px;
	height: 42px;
	border-radius: 13px;
	display: grid;
	place-items: center;
	margin-bottom: 14px;
	color: var(--tile);
	background: color-mix(in srgb, var(--tile) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--tile) 20%, transparent);
}

.appd-feature__title { margin: 0 0 6px; font-size: 1.02rem; }
.appd-feature__desc { margin: 0; font-size: 0.92rem; color: var(--text-2); }

/* ══ Modules ══ */

.appd-modules {
	padding: 24px;
	border-radius: var(--r-lg);
	border: 1px solid var(--border);
	background: var(--bg-soft);
}

.appd-modules__label {
	margin: 0 0 12px;
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--text-3);
}

.appd-modules__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.appd-modules__list li {
	font-size: 0.82rem;
	padding: 6px 13px;
	border-radius: var(--r-full);
	background: var(--surface);
	color: var(--text-2);
	border: 1px solid var(--border-soft);
}

.appd-modules__note {
	margin: 14px 0 0;
	font-size: 0.86rem;
	color: var(--text-3);
}

/* ══ Back to the list ══ */

.appd-back { text-align: center; }
.appd-back__link {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--text-2);
}
.appd-back__link:hover { color: var(--brand); }

@media (max-width: 900px) {
	.appd-story { grid-template-columns: minmax(0, 1fr); }
}

/* The hover lift is motion for its own sake; a visitor who asked for less of it
   still gets every border, tint and shadow. */
@media (prefers-reduced-motion: reduce) {
	.appd-feature, .appd-feature:hover { transform: none; transition: none; }
}