/*
 * The get-the-app bar (board App-Phones, phone 2; BRIEF §13): first thing inside the page, 64px,
 * phones only (the script shows it on Android and iOS outside Mobile Safari).
 */
.skdr-getapp {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 64px;
	padding: 0 12px 0 2px;
	background: var(--skdr-white, #FFFFFF);
	border-bottom: 1px solid var(--skdr-line, #E6E6E6);
	font-family: var(--skdr-font, 'Poppins', sans-serif);
}

.skdr-getapp[hidden] {
	display: none;
}

/* `.skdr-getapp button.…` outranks Kreeti's `body.aft-default-mode button` (white text and its
   own button colours), which otherwise drew the × white on the white bar. */
.skdr-getapp button.skdr-getapp__x {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: var(--skdr-gray, #55555D);
	cursor: pointer;
}

.skdr-getapp button.skdr-getapp__x:hover {
	background: var(--skdr-fill, #F5F5F5);
	color: var(--skdr-ink, #1A1A1A);
}

.skdr-getapp__icon {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.skdr-getapp__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.skdr-getapp__txt {
	flex: 1;
	min-width: 0;
}

.skdr-getapp__txt p {
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.skdr-getapp__name {
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	color: var(--skdr-ink, #1A1A1A);
}

.skdr-getapp__sub {
	font-size: 12px;
	line-height: 18px;
	color: var(--skdr-gray, #55555D);
}

.skdr-getapp__go {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: var(--skdr-red, #D32C3F);
	color: var(--skdr-white, #FFFFFF);
	font-size: 13px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}

/* A 44px touch target around the 36px pill. */
.skdr-getapp__go::after {
	content: "";
	position: absolute;
	inset: -4px;
}

.skdr-getapp__go:hover,
.skdr-getapp__go:focus-visible {
	background: var(--skdr-red-h, #A33045);
	color: var(--skdr-white, #FFFFFF);
}

/* Never on a desktop-sized screen, whatever the script decides. */
@media (min-width: 768px) {
	.skdr-getapp {
		display: none;
	}
}