/* Mod browse/listing pages: search bar, sort bar, rank-select dropdown, submit-mod
   button, category tabs, the mod card grid + pagination, and the top-rated page's
   breadcrumb — split out of style.css. Used on index.php and top_rated.php. */

.mod-search-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: .5rem 0; }

.mod-search-form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; flex: 1; padding: 0.6rem 0.9rem; }
.mod-search-form input[type=search] { flex: 1; min-width: 140px; }
.sort-bar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.875rem; background: var(--clr-bg); padding: 0.4rem 0.6rem; border-radius: var(--radius-large); }
.sort-bar-label { color: var(--clr-text-muted); }
.sort-bar-pagination { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; white-space: nowrap; }
.sort-bar-pagination .mod-pagination-info { white-space: nowrap; }
.sort-bar-pagination .mod-page-numbers { display: flex; align-items: center; gap: 0.25rem; }
.sort-bar-option { padding: 0.2rem 0.6rem; border-radius: var(--radius-small); border: 1px solid transparent; color: var(--clr-text-muted); text-decoration: none; }
.sort-bar-option:hover { color: var(--clr-text); border-color: var(--clr-border); }
.sort-bar-option.active { color: var(--clr-link); border-color: color-mix(in srgb, var(--clr-link) 40%, var(--clr-border)); font-weight: 600; }
.rank-select { position: relative; }
.rank-select-trigger { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.6rem; cursor: pointer; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-small); font-size: inherit; white-space: nowrap; font-family: inherit; color: var(--clr-text); outline: none; transition: border-color 0.15s; }
.rank-select-trigger:hover,
.rank-select.open .rank-select-trigger { border-color: var(--clr-link); box-shadow: 0 0 0 2px color-mix(in srgb, var(--clr-link) 20%, transparent); }
.rank-select-dropdown { display: none; position: absolute; top: calc(100% + 4px); left: 0; min-width: 100%; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-small); box-shadow: var(--shadow-md); z-index: 10; overflow: hidden; }
.rank-select.open .rank-select-dropdown { display: block; }
.rank-select-option { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.65rem; cursor: pointer; font-size: 0.875rem; white-space: nowrap; }
.rank-select-option:hover { background: var(--clr-surface-alt, color-mix(in srgb, var(--clr-surface) 85%, var(--clr-border))); }
.rank-select-option.selected { font-weight: 600; }
.submit-mod-btn {
	--accent: light-dark(#6d28c9, #b795ff);
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 1em;
	font-size: 0.9rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 7%, transparent);
	border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
	border-radius: 6px;
	transition: background 0.15s, border-color 0.15s;
}
.submit-mod-btn:hover { text-decoration: none; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.submit-mod-btn-text { padding: 0; }
.submit-mod-btn-icon { height: 1.15em; margin-left: 0; stroke: currentColor; stroke-width: 8; }
.category-tabs { display: flex; align-items: baseline; gap: 1.25rem; flex-wrap: wrap; border-bottom: 1px solid var(--clr-border); background: var(--clr-bg); border-radius: var(--radius-large) var(--radius-large) 0 0; padding: 0.15rem 0.6rem 0; margin-bottom: 0.5rem; }
.category-tab { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.3rem 0.1rem 0.35rem; color: var(--clr-text-muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: 0.95rem; }
.category-tab:hover { color: var(--clr-text); text-decoration: none; }
.category-tab.active { color: var(--clr-text); font-weight: 600; border-bottom-color: var(--clr-link); }
.category-count { font-size: 0.78em; opacity: 0.75; font-variant-numeric: tabular-nums; }
.tabs-filters { margin-left: auto; display: flex; align-items: baseline; gap: 0.35rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--clr-text-muted); padding-bottom: 0.35rem; min-width: 0; }
.tabs-filters strong { color: var(--clr-text); }
.tag-filter-joiner { margin: 0 0.25rem; font-style: italic; }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }

.mod-pagination { display: flex; gap: 1rem; margin: 1.25rem 0; flex-wrap: wrap; }
.mod-pagination-info { color: var(--clr-text-muted); font-size: 0.9rem; flex-grow: 1; align-self: center; }
.mod-pagination-perpage { display: flex; align-items: center; gap: 0.4rem; color: var(--clr-text-muted); font-size: 0.9rem; flex-grow: 1; }
.mod-pagination-pages { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.mod-page-numbers { display: flex; align-items: center; gap: 0.25rem; }
.mod-pagination-link,
.mod-page-number { padding: 0.35rem 0.85rem; border: 1px solid var(--clr-border); border-radius: var(--radius-small); background: var(--clr-surface); text-decoration: none; color: var(--clr-text); }
.mod-page-number { padding: 0.35rem 0.7rem; }
.mod-pagination-link:hover,
.mod-page-number:hover { border-color: color-mix(in srgb, var(--clr-link) 40%, var(--clr-border)); }
.mod-page-number.active { color: var(--clr-link); border-color: color-mix(in srgb, var(--clr-link) 40%, var(--clr-border)); font-weight: 600; }
.mod-page-ellipsis { color: var(--clr-text-muted); padding: 0 0.15rem; }

@media (max-width: 640px) {
	.mod-pagination { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.mod-pagination-info,
	.mod-pagination-perpage,
	.mod-pagination-pages { justify-self: center; }
}
.mod-card { position: relative; display: flex; flex-direction: column; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-large); overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow 0.15s, border-color 0.15s; }
.mod-card:hover { box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--clr-link) 40%, var(--clr-border)); }

.mod-card-image-link { display: block; line-height: 0; }
.mod-card-thumbnail { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }

/* Stretched-link: the mod name <a> covers the full card behind the content */
.mod-card-name a::after { content: ''; position: absolute; inset: 0; z-index: 0; }
/* Tags, author link, and any per-card action (e.g. Unpin) sit above the stretched link */
.mod-card .tag,
.mod-card-author a,
.mod-card-action { position: relative; z-index: 1; }

.mod-card-overlay-badge { position: absolute; top: 0.4rem; left: 0.4rem; font-size: 0.7rem; font-weight: 700; padding: 0.15em 0.5em; border-radius: var(--radius-small); pointer-events: none; }
.mod-card-overlay-badge--detected { background: var(--clr-badge-detected-bg); color: var(--clr-badge-detected); border: 1px solid var(--clr-badge-detected); }
.mod-card-overlay-badge--pending { background: var(--clr-badge-pending-bg); color: var(--clr-badge-pending); border: 1px solid var(--clr-badge-pending); }
.mod-card-overlay-badge--hidden { background: var(--clr-surface-alt); color: var(--clr-text-muted); border: 1px solid var(--clr-border); }
.mod-card-overlay-badge--deprecated { background: var(--clr-warning-bg); color: var(--clr-warning); border: 1px solid var(--clr-warning-border); }

.mod-card-stats { display: flex; gap: 0.75rem; align-items: center; padding: 0.45rem 0.75rem; background: var(--clr-surface-alt); border-bottom: 1px solid var(--clr-border); font-size: 0.82rem; color: var(--clr-text-muted); }

.mod-card-version { margin-left: auto; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mod-card-stat { display: inline-flex; align-items: center; gap: 0.28rem; }
.mod-card-stat--stars { color: var(--clr-star); }
.mod-card-stat--downloads { color: var(--clr-text-muted); }

.mod-card-body { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.75rem; }

.mod-card-heading { display: flex; flex-direction: column; gap: 0.1rem; }

.mod-card-name { font-size: 0.95rem; font-weight: 600; margin: 0; line-height: 1.3; }
.mod-card-name a { color: var(--clr-text); text-decoration: none; word-break: break-word; }
.mod-card-name a:hover { color: var(--clr-link); }

.mod-card-author { font-size: 0.78rem; color: var(--clr-text-muted); }

.mod-card-description { font-size: 0.82rem; color: var(--clr-text-muted); line-height: 1.45; margin: 0; }
@media (max-width: 640px) {
	.mod-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
	.mod-card-body { padding: 0.6rem; }
	.mod-card-stats { padding: 0.4rem 0.6rem; gap: 0.6rem; }
}
.top-rated-crumb { margin-bottom: 0.6rem; font-size: 0.9rem; }
.top-rated-crumb a { color: var(--clr-text-muted); }
.top-rated-crumb a:hover { color: var(--clr-link); }
.top-rated-intro { color: var(--clr-text-muted); max-width: 62ch; margin: -0.5rem 0 1.25rem; }
.top-rated-more { margin: 1.5rem 0 0; }

.excluded-tag-label { text-decoration: line-through; color: var(--clr-danger); }

.pending-tag-requests { margin-top: 0.75rem; font-size: 0.88rem; }