/*
------------------------------------------------
Install Training Log
------------------------------------------------
*/

.tl-install-banner[hidden] {
	display: none !important;
}

.tl-install-banner {
	position: relative;

	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 10px;

	padding: 9px max(14px, env(safe-area-inset-right))
		9px max(14px, env(safe-area-inset-left));

	box-sizing: border-box;

	background: var(--tl-color-surface);
	border-bottom: 1px solid var(--tl-color-border);

	color: var(--tl-color-text);
}

.tl-install-banner-icon {
	display: block;
	width: 44px;
	height: 44px;

	border-radius: 9px;
}

.tl-install-banner-copy {
	display: grid;
	gap: 1px;

	min-width: 0;

	line-height: 1.25;
}

.tl-install-banner-copy strong {
	font-size: .875rem;
	font-weight: 700;
}

.tl-install-banner-copy span {
	color: var(--tl-color-text-secondary);
	font-size: .75rem;
}

.tl-install-banner-action,
.tl-install-banner-done,
.tl-install-banner-close {
	appearance: none;

	margin: 0;
	padding: 0;

	background: transparent;
	border: 0;

	font: inherit;

	cursor: pointer;
}

.tl-install-banner-action {
	padding: 7px 5px;

	color: var(--tl-color-primary);

	font-size: .8125rem;
	font-weight: 700;
}

.tl-install-banner-close {
	width: 28px;
	height: 28px;

	color: var(--tl-color-text-secondary);

	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1;
}

.tl-install-banner-help {
	grid-column: 1 / -1;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;

	margin-top: 2px;
	padding: 9px 0 1px;

	border-top: 1px solid var(--tl-color-border-soft);

	color: var(--tl-color-text-secondary);

	font-size: .75rem;
	line-height: 1.35;
}

.tl-install-banner-help[hidden] {
	display: none !important;
}

.tl-install-banner-done {
	flex: 0 0 auto;

	color: var(--tl-color-primary);

	font-size: .75rem;
	font-weight: 700;
}


/*
 * Installation UI is mobile-only.
 */

@media (min-width: 769px) {

	.tl-install-banner {
		display: none !important;
	}

}


/*
 * Never show the banner when launched from the installed app.
 */

@media (display-mode: standalone) {

	.tl-install-banner {
		display: none !important;
	}

}