/* SPRU Bookmarks & Subscriptions */

.spru-topic-actions {
	display: inline-flex;
	float: left;
	align-items: center;
	gap: 3px;
	margin-right: 5px;
}

.spru-forum-actions {
	display: inline-flex;
	float: left;
	align-items: center;
	gap: 3px;
	margin-left: 5px;
}


.spru-topic-action {
	/* Keep the native .button line box so these controls have exactly the
	   same height as the other viewtopic buttons. */
	box-sizing: border-box;
}

.spru-topic-action .icon,
.spru-post-bookmark-control .icon {
	margin: 0;
}

/* Once JS places the top controls after the topic search box, keep a small
   visual gap from the search group. */
.action-bar.bar-top .search-box + .spru-topic-actions {
	margin-left: 5px;
}

/* Cosmic's tooltip pseudo-element inherits the button's font-weight (600).
   These action hints should use normal text weight. */
.spru-topic-action[data-tooltip]::after,
.spru-forum-watch[data-tooltip]::after,
.spru-post-bookmark-control[data-tooltip]::after {
	font-weight: 400 !important;
}

/* The two primary actions are rendered as standalone buttons. Hide their
   legacy copies immediately; JS removes the nodes and hides an empty tools
   dropdown while preserving items injected by other extensions. */
.topic-tools .dropdown-contents > li:has(> .bookmark-link),
.topic-tools .dropdown-contents > li:has(> .watch-topic-link) {
	display: none;
}

/* If Bookmark/Subscribe were the only topic-tools entries, hide the empty
   dropdown before JS runs. Any other <li> (core or extension-provided) keeps it. */
.topic-tools:not(:has(.dropdown-contents > li:not(:has(> .bookmark-link)):not(:has(> .watch-topic-link)))) {
	display: none;
}

/* Bookmark and subscription icons use the same active-state accent.
   A red filled glyph means the action is currently enabled/saved. */
.spru-topic-bookmark.is-active .icon,
.spru-topic-watch.is-active .icon,
.spru-forum-watch.is-active .icon,
.spru-post-bookmark-control.is-bookmarked .icon {
	color: #d31141;
}

.spru-post-bookmark-control.is-loading {
	pointer-events: none;
	opacity: 0.6;
}

/* When ImgPosts supplies artwork, its own link is the click target. */
.spru-saved-topiclist dl.row-item:has(.imgposts-topic-image) .spru-topic-art-link {
	display: none;
}

/* UCP topic/forum lists use phpBB's old float + huge negative-margin column
   layout by default. Our pages only need a content column and a mark column,
   so use a small grid instead. This keeps every checkbox in one real column
   and avoids the large empty gap created by .missing-column. */
.spru-ucp-list > li > dl {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 46px;
	align-items: stretch;
}

.spru-ucp-list > li > dl > dt {
	float: none;
	width: auto;
	min-width: 0;
	margin-right: 0;
}

.spru-ucp-list > li > dl > dt > .list-inner {
	margin-right: 0 !important;
}

.spru-ucp-list > li > dl > dd.mark {
	display: flex;
	float: none;
	width: auto;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 0 8px !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.spru-ucp-list > li.row > dl > dd.mark {
	/* Neutralise phpBB's 999px equal-column trick; grid provides equal height. */
	padding-bottom: 0 !important;
	margin-bottom: 0 !important;
}

.spru-ucp-list dd.mark input[type="checkbox"] {
	margin: 0;
}

/* Compact UCP list headers. Keep the user-selected Cosmic colours and
   sizing; no text shadow here. */
.spru-ucp-list > li.header .list-inner,
.spru-ucp-list > li.header > dl > dd.mark {
	color: #363e51;
	font-size: 11px;
	line-height: 1.2;
}

.spru-ucp-list > li.header > dl > dd.mark {
	white-space: nowrap;
}

/* Match the standard ImgPosts presentation used elsewhere on the forum.
   Cosmic's unread animation can then animate border-color on the real frame. */
.spru-saved-topiclist .imgposts-topic-image-wrap.attach_image {
	border: 2px solid #fff;
	box-sizing: border-box;
}

/* Reuse Cosmic's native topic artwork exactly as it is rendered in viewforum.
   The extension only adds a transparent click target over that artwork. */
.spru-saved-topiclist .spru-topic-art-link {
	z-index: 2;
	top: 50%;
	left: calc(var(--cosmic-topic-slot-left, 6px) + 5px);
	width: var(--cosmic-topic-icon-size, 40px);
	height: var(--cosmic-topic-icon-size, 40px);
	margin: 0;
	transform: translateY(-50%);
}

/* Watched forums use the same custom forum artwork as the board index. Keep
   it compact in UCP and reuse the existing unread glow animation. */
.spru-watch-forums .spru-watched-forum-image {
	float: left;
	width: 50px;
	height: 50px;
	margin: 0 10px 0 0;
	overflow: visible;
}

.spru-watch-forums .spru-watched-forum-image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

.spru-watch-forums .spru-watched-forum-has-image {
	min-height: 50px;
}

.spru-watch-forums .forum-image-unread img {
	animation: forum-image-glow 1.8s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
	.spru-watch-forums .forum-image-unread img {
		animation: none;
		filter:
			drop-shadow(0 0 2px rgba(255, 130, 155, 0.9))
			drop-shadow(0 0 5px rgba(211, 17, 65, 0.7));
	}
}

.spru-topic-meta {
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.35;
}

.spru-meta-sep {
	padding: 0 3px;
}

.spru-topic-tags {
	margin-top: 4px;
}

.spru-topic-bookmarked {
	display: inline-block;
	margin-left: 5px;
	vertical-align: 1px;
	color: #d31141;
}

.spru-saved-posts {
	margin-top: 7px;
	padding-top: 6px;
	border-top: 1px solid rgba(120, 135, 150, 0.28);
}

.spru-saved-posts-title {
	margin-bottom: 4px;
	font-weight: 700;
}

.spru-saved-post {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	padding: 5px 0;
}

.spru-saved-post + .spru-saved-post {
	border-top: 1px dotted rgba(120, 135, 150, 0.25);
}

.spru-saved-post-check {
	flex: 0 0 auto;
	padding-top: 2px;
}

.spru-saved-post-body {
	min-width: 0;
	flex: 1 1 auto;
}

.spru-saved-post-title {
	font-weight: 700;
}

.spru-saved-post-meta,
.spru-saved-post-added {
	margin-top: 1px;
	font-size: 11px;
	opacity: 0.78;
}


.spru-orphans h3 {
	margin-top: 0;
}

.spru-orphan-row {
	display: block;
	padding: 3px 0;
}

.spru-saved-actions {
	margin-top: 10px;
}

.spru-watch-forums .list-inner {
	padding-top: 5px;
	padding-bottom: 5px;
}

@media (max-width: 700px) {
	.spru-topic-actions {
		gap: 3px;
	}


	.spru-ucp-list > li > dl {
		grid-template-columns: minmax(0, 1fr) 38px;
	}

	/* phpBB normally hides all <dd> columns on narrow screens. The mark
	   column is an action, so keep it available and aligned on mobile too. */
	.spru-ucp-list > li > dl > dd.mark {
		display: flex !important;
		padding-left: 5px !important;
		padding-right: 5px !important;
	}
}