/* app-mobile.css 
	App mobile view styles
	Jun 2026 by CuR
*/

/* || App mobile view */

.app-section {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.app-steps__list {
	display: grid;
	gap: .75rem;
	counter-reset: app-steps;
}

.app-steps__item {
	counter-increment: app-steps;
	
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .875rem;
	align-items: start;

	padding: 1rem;
	border-bottom: 1px solid var(--border-color);
}

.app-steps__item::before {
	content: counter(app-steps);

	display: inline-grid;
	place-items: center;

	width: 1.75rem;
	height: 1.75rem;
	border-radius: 999px;

	background: var(--clr-brand-base);
	color: var(--clr-on-brand);

	font-size: var(--fs-small);
	font-weight: var(--fw-bolder);
	line-height: 1;
}

.app-steps__item strong {
	display: block;
	color: var(--clr-text);
	font-size: var(--fs-base);
	font-weight: var(--fw-bolder);
}

.app-steps__item span {
	display: block;
	margin-top: .125rem;
	color: var(--clr-text-soft);
	font-size: var(--fs-medium);
	line-height: 1.45;
}

.app-steps__item:not(.all) {
	display: none;
}

[data-app-plan="standard"] .app-steps__item.standard,
[data-app-plan="premium"] .app-steps__item.premium,
[data-app-plan="premium-tdla"] .app-steps__item.premium-tdla {
	display: grid;
}

.app-info {
	position: relative;
	display: grid;
	gap: .75rem;

	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--border-color);
}

.app-info__label {
	font-size: var(--fs-small);
	font-weight: var(--fw-bolder);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.app-info__grid {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .5rem;
	align-items: center;
}

[data-app-plan="standard"] [data-info-for="premium"],
[data-app-plan|="premium"] [data-info-for="standard"] {
	display: none;
}

.app-icon__wrap {
	width: 2.875rem;
	height: 2.875rem;
	border-radius: var(--border-radius);
	overflow: hidden;
}

.app-token__control {
	display: flex;
	align-items: center;
	gap: .5rem;

	min-width: 0;
	padding: .25rem;
	border-radius: var(--border-radius);
	background: var(--clr-surface-content);
	border: 1px solid var(--border-color);
}

.app-token__value {
	flex: 1;
	min-width: 0;

	padding: .5rem .625rem;
	border: 0;
	background: transparent;

	color: var(--clr-text);
	font: inherit;
	font-size: var(--fs-largest);
	font-weight: var(--fw-bolder);
	letter-spacing: .04em;

	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.app-token__copy {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;

	width: 2rem;
	height: 2rem;
	padding: 0;

	border: 0;
	border-radius: var(--border-radius-sm);
	background: transparent;
	color: var(--clr-text-soft);

	font: inherit;
	font-size: 1rem;
	cursor: pointer;

	transition:
		background-color .15s ease,
		color .15s ease,
		transform .15s ease;
}

.app-token__copy:hover {
	background: var(--clr-surface-subtle);
	color: var(--clr-text);
}

.app-token__copy:active {
	transform: scale(.94);
}

.app-token__help {
	color: var(--clr-text-muted);
	font-size: var(--fs-small);
	line-height: 1.35;
}

.app-premium__info {
	--stack-gap: .25rem;
}

.app-download {
	display: grid;
	gap: .75rem;
}

.app-download__links {
	display: grid;
	grid-template-columns:
		repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
	gap: .625rem;
}

.app-store-link {
	display: flex;
	align-items: center;
	gap: .875rem;

	min-height: 4rem;
	padding: .875rem 1rem;

	border-radius: var(--border-radius);
	background: var(--clr-surface-contrast);
	color: var(--clr-on-contrast);

	text-decoration: none;

	transition:
		opacity .15s ease,
		transform .15s ease;
}

[data-theme="dark"] .app-store-link {
	background: var(--clr-surface-base);
	color: var(--clr-text);
	border: 1px solid var(--border-color);
}

.app-store-link:hover {
	opacity: .92;
	transform: translateY(-1px);
}

.app-store-link__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;

	font-size: 1.75rem;
}

.app-store-link__content {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.app-store-link__content span {
	font-size: var(--fs-smaller);
	font-weight: var(--fw-bold);
	opacity: .75;
}

.app-store-link__content strong {
	font-size: var(--fs-large);
	font-weight: var(--fw-bolder);
}

.app-badge {
	display: none;
	align-items: center;
	min-height: 1.125rem;
	padding-inline: .5rem;
	margin-inline: .25rem;
	border-radius: 999px;

	font-size: var(--fs-smaller);
	font-weight: var(--fw-bolder);
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.app-badge--premium {
	color: var(--clr-neutral);
	background: hsl(from currentColor h s l / .10);
	border: 1px solid hsl(from currentColor h s l / .60);
}

[data-app-plan|="premium"] .app-badge--premium {
	display: inline-flex;
}