/**
 * The Friends list.
 *
 * ---------------------------------------------------------------------------
 * HOW MANY FRIENDS SHOW IS DECIDED HERE, NOT ON THE SERVER
 * ---------------------------------------------------------------------------
 * The profile renderer never tells a module which zone it landed in, so the
 * server cannot know whether it has a narrow rail or the full width of the
 * page. It renders fifteen and this stylesheet hides what will not fit.
 *
 * That turns out to be the better answer anyway: a container query responds to
 * the width the module actually got, which survives a member dragging the
 * module to a different zone, a layout change, and a phone in landscape —
 * none of which a server-side guess would.
 */

.sml-friends__list {
	container-type: inline-size;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
	gap: 12px;
}

.sml-friends__item {
	margin: 0;
	min-width: 0;
}

/* Narrow rail: six. Anything beyond that wraps into a column of stragglers
   that reads as a bug rather than a list. */
@container (max-width: 260px) {
	.sml-friends__item { display: none; }
	.sml-friends__item:nth-child(-n + 6) { display: block; }
}

/* Middle ground: twelve, which fills three or four tidy rows. */
@container (min-width: 261px) and (max-width: 520px) {
	.sml-friends__item { display: none; }
	.sml-friends__item:nth-child(-n + 12) { display: block; }
}

/* Wide zone: all fifteen. */

/*
 * Containment queries are recent enough that a browser without them must not
 * be shown a wall of fifteen in a narrow rail. Without :has or @container
 * support the grid still wraps correctly — it is only the cap that is lost,
 * and a longer list is a far better failure than a hidden one.
 */

.sml-friends__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	color: inherit;
	padding: 8px 4px;
	border-radius: 12px;
	transition: background .15s, transform .15s;
}

.sml-friends__link:hover,
.sml-friends__link:focus-visible {
	background: rgba(0, 231, 141, .08);
	transform: translateY(-2px);
	outline: none;
}

.sml-friends__link:focus-visible {
	box-shadow: 0 0 0 2px rgba(0, 231, 141, .5);
}

.sml-friends__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	background: #0d141d;
	border: 2px solid transparent;
	transition: border-color .15s;
}

.sml-friends__link:hover .sml-friends__avatar {
	border-color: #00e78d;
}

/* Names are the one thing here that can be any length, and a nine-word display
   name must not be allowed to set the column width for everybody else. */
.sml-friends__name,
.sml-friends__handle {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
}

.sml-friends__name {
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.25;
}

.sml-friends__handle {
	font-size: 11px;
	opacity: .62;
}

.sml-friends__more,
.sml-friends__hint {
	margin: 14px 0 0;
	font-size: 12.5px;
	opacity: .68;
	line-height: 1.5;
}

.sml-friends--empty .sml-friends__hint {
	margin: 0;
}

@media (prefers-reduced-motion: reduce) {
	.sml-friends__link,
	.sml-friends__avatar {
		transition: none;
	}
	.sml-friends__link:hover {
		transform: none;
	}
}