/* The strip above every app's header and the list in its footer, linking all our apps.
   The markup comes from website/apps/ (website/scripts/build_apps.sh copies it in).
   The strip looks the same on every site, whatever the app's colours, so it reads as one
   maker's apps. Each site sets --apps-width to its own content width, so the strip lines
   up with the header below it. */

.apps-bar {
	background: #18171c;
	color: #c9c6d0;
	font: 500 13px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.apps-bar__inner {
	width: var(--apps-width, min(100% - 2rem, 64rem));
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

.apps-bar__label {
	color: #8d8a96;
}

.apps-bar__links {
	display: flex;
	gap: 0.25rem 1rem;
}

.apps-bar a {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
}

.apps-bar a:hover,
.apps-bar a[aria-current] {
	color: #fff;
}

.apps-bar a[aria-current] {
	box-shadow: inset 0 -2px #fff;
}

.apps-bar a:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
}

.apps-bar img {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 4px;
}

/* On a phone the label goes and the three names spread across the width. */
@media (max-width: 34rem) {
	.apps-bar__label {
		display: none;
	}

	.apps-bar__links {
		flex: 1;
		justify-content: space-between;
	}
}

@media (prefers-color-scheme: dark) {
	.apps-bar {
		background: #000;
		box-shadow: inset 0 -1px #2a2930;
	}
}

.apps-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
}

.apps-footer a[aria-current] {
	font-weight: 600;
}