/**
 * The member navigation bar.
 *
 * Midnight bar, Grey icons, Refresh for the current item and the badge. That is the
 * whole palette and it is the permitted pairing, so nothing here introduces a colour.
 *
 * ONE IMPLEMENTATION, TWO SHAPES
 * A bar pinned along the bottom is a phone idiom. On a laptop it becomes a compact
 * centred pill, which is the same components at a different width rather than a
 * second bar to maintain. The only things that change are the max-width, the gap
 * and where the notifications panel is anchored.
 *
 * SAFE AREA
 * iPhones put a home indicator where a bottom bar wants to be. env(safe-area-inset-
 * bottom) is what keeps the bar above it; without it the last few pixels of every
 * button are untappable and it reads as the site being broken.
 */

:root {
	--cf-nav-h: 58px;
	--cf-nav-gap: 10px;
}

#cf-nav-root:empty {
	display: none;
}

/* Content must not end underneath the bar. Added by JS only when the bar draws. */
.cf-has-nav body {
	padding-bottom: calc(var(--cf-nav-h) + var(--cf-nav-gap) * 2 + env(safe-area-inset-bottom, 0px));
}

.cf-nav {
	position: fixed;
	z-index: 9990;
	left: 50%;
	bottom: calc(var(--cf-nav-gap) + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);

	display: flex;
	align-items: stretch;
	gap: 2px;

	width: calc(100% - var(--cf-nav-gap) * 2);
	max-width: 520px;
	height: var(--cf-nav-h);
	padding: 5px;

	font-family: var(--cf-font);
	background: var(--cf-midnight);
	border-radius: 999px;
	box-shadow: 0 6px 28px rgba(9, 14, 20, .32);
}

/* ---------------------------------------------------------------
 * Items
 * ------------------------------------------------------------ */

.cf-nav__item {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;

	min-width: 0;
	padding: 4px 2px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--cf-grey);

	font-family: inherit;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .01em;
	text-decoration: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.cf-nav__item:hover,
.cf-nav__item:focus-visible {
	color: var(--cf-refresh);
	text-decoration: none;
}

.cf-nav__item.is-current {
	background: rgba(202, 231, 249, .14);
	color: var(--cf-refresh);
}

.cf-nav__item:focus-visible {
	outline: 2px solid var(--cf-refresh);
	outline-offset: -2px;
}

.cf-nav__icon {
	display: block;
	width: 22px;
	height: 22px;
}

.cf-nav__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.cf-nav__label {
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ---------------------------------------------------------------
 * Badge
 * ------------------------------------------------------------ */

.cf-nav__badge {
	position: absolute;
	top: 2px;
	left: 50%;
	margin-left: 4px;

	min-width: 17px;
	padding: 0 5px;

	background: var(--cf-refresh);
	color: var(--cf-midnight);
	border-radius: 999px;

	font-size: 10px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
}

/* ---------------------------------------------------------------
 * Notifications
 *
 * A sheet rising from the bottom on a phone, a popover above the bar on a laptop.
 * ------------------------------------------------------------ */

.cf-notes {
	position: fixed;
	z-index: 9991;
	left: var(--cf-nav-gap);
	right: var(--cf-nav-gap);
	bottom: calc(var(--cf-nav-h) + var(--cf-nav-gap) * 2 + env(safe-area-inset-bottom, 0px));

	display: flex;
	flex-direction: column;
	max-height: min(70vh, 520px);

	font-family: var(--cf-font);
	background: var(--cf-midnight);
	color: var(--cf-grey);
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(9, 14, 20, .42);
	overflow: hidden;
}

.cf-notes__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .85rem 1rem;
	border-bottom: 1px solid rgba(230, 231, 232, .14);
}

.cf-notes__title {
	font-size: .95rem;
	font-weight: 700;
	color: var(--cf-refresh);
}

.cf-notes__close {
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--cf-grey);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}

.cf-notes__close:hover,
.cf-notes__close:focus-visible {
	background: rgba(230, 231, 232, .12);
	color: var(--cf-refresh);
}

.cf-notes__list {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: .35rem 0;
}

.cf-notes__empty {
	margin: 0;
	padding: 1.75rem 1.25rem;
	text-align: center;
	font-size: .9rem;
	color: var(--cf-grey);
	opacity: .72;
}

.cf-note {
	display: flex;
	align-items: flex-start;
	gap: .7rem;
	padding: .7rem 1rem;
	color: var(--cf-grey);
	text-decoration: none;
}

a.cf-note:hover,
a.cf-note:focus-visible {
	background: rgba(230, 231, 232, .09);
	color: var(--cf-grey);
	text-decoration: none;
}

/* Unread is carried by a bar rather than a background, so it survives hover. */
.cf-note.is-unread {
	box-shadow: inset 3px 0 0 var(--cf-refresh);
}

.cf-note__av {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 999px;
	object-fit: cover;
	/* Member photos are greyscaled to match the brand; the feed's own photos are not. */
	filter: grayscale(1);
}

.cf-note__av--none {
	background: rgba(230, 231, 232, .2);
}

.cf-note__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cf-note__title {
	font-size: .88rem;
	line-height: 1.35;
}

.cf-note__when {
	font-size: .74rem;
	opacity: .62;
}

/* ---------------------------------------------------------------
 * Laptop: the same bar, narrower, and the panel anchored to it
 * ------------------------------------------------------------ */

@media (min-width: 768px) {
	:root {
		--cf-nav-h: 56px;
		--cf-nav-gap: 18px;
	}

	.cf-nav {
		width: auto;
		max-width: none;
		gap: 4px;
	}

	.cf-nav__item {
		flex: 0 0 auto;
		min-width: 76px;
		padding: 4px 14px;
	}

	.cf-notes {
		left: 50%;
		right: auto;
		width: 380px;
		transform: translateX(-50%);
	}
}

/* ---------------------------------------------------------------
 * Print: a floating bar on paper is nothing but a smudge
 * ------------------------------------------------------------ */

@media print {
	#cf-nav-root {
		display: none;
	}

	.cf-has-nav body {
		padding-bottom: 0;
	}
}