/**
 * Friends panel on the CBB Follower profile.
 *
 * The sidebar it sits in is about 30% of the page, so the tiles are a fixed
 * size and the column count follows from the space available rather than
 * being three equal fractions of whatever the container happens to be -- an
 * earlier version stretched each avatar to a third of the panel, which made
 * them enormous.
 */
.friendspanel h2 {
	margin-bottom: 8px;
}

.friendspanel-grid {
	display: grid;
	/* Exactly three across, whatever the sidebar happens to measure. A fixed
	   tile width would only be right at one page width -- this panel lives in a
	   30%% column, so its width moves with the browser. minmax(0, 1fr) rather
	   than 1fr so a long username cannot push its column wider than a third. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/* A tall tile must not drag its neighbours' baselines around, which is what
	   made the rows stagger when an avatar failed to load and fell back to its
	   alt text. */
	align-items: start;
	gap: 8px 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.friendspanel-grid li {
	margin: 0;
	padding: 0;
	min-width: 0;
	text-align: center;
}

.friendspanel-grid a {
	display: block;
	text-decoration: none;
	color: inherit;
}

/* A fixed box for the picture. Avatars on this board run from 125px to 200px
   and some are not square, so the box is the constant and the image is cropped
   into it; without this the row height tracks the tallest avatar. */
.friendspanel-grid img,
.friendspanel-noavatar {
	display: block;
	width: 100%;
	/* Shorter than before so three sit comfortably in the column rather than
	   filling it edge to edge. */
	height: 58px;
	object-fit: cover;
	margin: 0 auto 3px;
	border-radius: 2px;
	background-color: rgba(128, 128, 128, 0.2);
}

/* A long username must not widen its column and break the grid. */
.friendspanel-name {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.85em;
	line-height: 1.3;
}

/* The heading is the link: label, the gap after it, and the arrow. Making the
   anchor itself the flex container -- rather than the <h2>, with the arrow as a
   separate link -- is what makes the whole strip from the F to the arrow a
   single click target instead of two small ones with dead space between. */
.friendspanel-all {
	display: flex;
	/* center, not baseline. The chevron's baseline sits below its visual middle,
	   so aligning baselines dropped it noticeably under the text -- which is
	   exactly how it looked before. */
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	color: inherit;
	text-decoration: none;
}

/* The underline is a hover state, arriving with the arrow so the heading has
   one tell rather than two. Triggered on the <h2> to match the arrow exactly:
   the anchor covers all but a couple of pixels of it, and driving both from the
   same element means they can never appear a pixel apart.

   :focus-within keeps it reachable by keyboard, where there is no hover. */
.friendspanel-head-label {
	text-decoration: none;
}

.friendspanel h2:hover .friendspanel-head-label,
.friendspanel h2:focus-within .friendspanel-head-label {
	text-decoration: underline;
}

/* Hidden until the heading is hovered, so the panel stays quiet when nobody is
   looking for the rest. visibility rather than display:none keeps it in the
   layout, so revealing it cannot nudge the heading sideways -- and keeps it
   reachable by keyboard, which :focus-within below restores. */
.friendspanel-all .icon {
	/* Lifted clear of the text's own line box, which the glyph otherwise sits
	   low in. */
	line-height: 1;
	position: relative;
	top: -2px;
	font-size: 0.85em;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.12s ease-in-out;
}

.friendspanel h2:hover .icon,
.friendspanel h2:focus-within .icon {
	opacity: 0.85;
	visibility: visible;
}

.friendspanel-all:hover .icon,
.friendspanel-all:focus-visible .icon {
	opacity: 1;
	visibility: visible;
}

/* The full list page: the same tiles, given the page width instead of a 30%
   column, so a member with sixty friends is not scrolling a narrow ribbon. */
.friendspanel-grid-full {
	grid-template-columns: repeat(auto-fill, minmax(96px, 120px));
	gap: 14px;
}

.friendspanel-grid-full img,
.friendspanel-grid-full .friendspanel-noavatar {
	height: 96px;
	max-width: 120px;
}

/* Zebra Enhance draws its own friend list into memberlist_view_content_append,
   which CBB Follower's wall also includes -- so the CBB profile showed two.
   The sidebar panel is the one that belongs there.

   Scoped by the sibling combinator rather than hidden outright: #wall-content
   only exists on the CBB profile, so Zebra Enhance's list still renders in full
   on phpBB's own memberlist. Hiding rather than deleting its template keeps
   that extension untouched and upgradeable. */
#wall-content ~ #ze-friend-list {
	display: none;
}

/**
 * Zebra Enhance's friend-request control, as it lands in the CBB sidebar.
 *
 * It renders as a <dt>&nbsp;</dt><dd> pair because on phpBB's own memberlist it
 * belongs to a definition list. CBB's sidebar gives dt 40% and dd 55% of a
 * column that is itself 30% of the page, so the textarea came out about two
 * words wide with the button squeezed under it. Here it gets the full width of
 * the panel instead.
 *
 * Scoped to .wall-right-side so the memberlist keeps the dt/dd layout it was
 * written for, and left in this extension so Zebra Enhance stays stock.
 */
.wall-right-side #ze-friend-controls {
	float: none;
	clear: both;
	width: auto;
	margin: 6px 0 0;
	text-align: left;
}

/* The spacer <dt> that pairs with it. With the dd no longer floated beside it
   the &nbsp; would otherwise hold open an empty 40% row above the control. */
.wall-right-side dl.details dt:has(+ #ze-friend-controls) {
	display: none;
}

.wall-right-side #ze-friend-controls label {
	display: block;
	margin-bottom: 3px;
	font-size: 0.9em;
}

.wall-right-side #ze-friend-controls textarea {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 5px;
	resize: vertical;
}

.wall-right-side #ze-friend-controls .button {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

/* The accept / decline / block trio, which are icon-only and should stay on one
   row rather than each taking the full width like the single Add friend button. */
.wall-right-side #ze-friend-controls .ze-icon-button {
	display: inline-block;
	width: auto;
	margin-right: 4px;
}

/* "See all N friends": a full-width button under the grid, so the way to the
   rest of the list is visible without hovering anything. Uses phpBB's own
   .button look so it matches the board's other buttons. */
.friendspanel .friendspanel-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 100%;
	box-sizing: border-box;
	margin-top: 10px;
	text-align: center;
}