/* "Community additions" section of the spot details panel (#922), built by
   public/modules/spot-details-panel.js. Linked from index.html after style.css, which is
   frozen for new features, and uses only the details panel's existing tokens so it follows
   light and dark themes.

   It is set apart the way "On this flight" is (public/onThisFlight.css): the heading carries
   .event-graph-link-heading, and the section draws only a bottom line, since what sits above
   it (the spec grid or a detail block) already ends in one. A full-width note row right
   before it has no divider, so the section draws its top line in that case. */
#details-panel .community-additions-section {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 9px 0;
	border-bottom: 1px solid var(--details-divider-color);
}

#details-panel .details-context-note-row + .community-additions-section {
	border-top: 1px solid var(--details-divider-color);
}

/* The heading's font, colour, gap and purple icon come from .event-graph-link-heading in
   style.css; only the h3's default margin needs clearing. */
#details-panel .community-additions-heading {
	margin: 0 0 2px;
}

/* No lines inside the section: its own top and bottom lines set it apart, and rows between
   them read as one group (Sam, 2026-10-22). */
#details-panel .community-additions-section .detail-block {
	padding: 4px 0;
	border-bottom: none;
}

/* Each entry with its byline after it (#922). Text runs straight into its byline, which moves to
   the next line whole only when it doesn't fit (Sam, 2026-10-22); long text that collapses behind
   "Read more" is wrapped in a block, so its byline goes below. A link keeps its byline on the same
   line, with the link shortened first so the name always shows. */
#details-panel .community-addition-items {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#details-panel .community-addition-item--link {
	display: flex;
	align-items: baseline;
	gap: 8px;
	min-width: 0;
}

#details-panel .community-addition-item--link .detail-block-link {
	flex: 0 1 auto;
	min-width: 0;
}

/* The byline (additionBylineHtml): muted, so the entry reads first. "anonymous" is italic, so it
   reads as no name rather than someone called Anonymous. */
#details-panel .addition-byline {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	color: var(--details-subtle-text-color);
	font-size: 12px;
	line-height: 1.3;
	white-space: nowrap;
}

#details-panel .community-addition-item:not(.community-addition-item--link) > .detail-block-value {
	display: inline;
	margin-right: 6px;
}

#details-panel .community-addition-item--link .addition-byline {
	flex: none;
}

#details-panel .addition-byline i {
	font-size: 9px;
	opacity: 0.8;
}

#details-panel .addition-byline--anonymous .addition-byline-name {
	font-style: italic;
}

/* A moderator's or admin's entry (#954): a small outlined chip after the name, like the staff
   role chip in the map console (.console-advanced-role-chip in staffTools.css). */
#details-panel .addition-byline-staff {
	align-self: center;
	padding: 0 6px;
	border: 1px solid var(--details-divider-color);
	border-radius: 999px;
	font-family: var(--headerfont);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
}

/* An event link's byline sits on its own line under the event summary. */
#details-panel .event-graph-linked-by--byline {
	margin-top: 4px;
}

/* Event links added after the spot was posted (.community-event-links): laid out like the
   event-link section's own list, with a heading one step smaller than the section's. */
#details-panel .community-event-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 4px 0 0;
}

#details-panel .community-event-links .event-graph-link-heading {
	font-size: 13px;
}

/* A visible event-link section right after this one (candidates to link) drops its top line,
   so the two do not double up. */
#details-panel .community-additions-section + .event-graph-link-section {
	border-top: none;
}