@import url('obfuscation.css');
@import url('inbox.css');
@import url('admin.css');
@import url('feed.css');
@import url('points.css');
@import url('formatting.css');

:root {
	color-scheme: light dark;

	--clr-bg:              light-dark(#f2f3f6, #10121c);
	--clr-surface:         light-dark(#ffffff, #191c2a);
	--clr-surface-alt:     light-dark(#f7f8fa, #212538);
	--clr-border:          light-dark(#d8dce8, #2c3050);
	--clr-text:            light-dark(#1c1e2b, #dde0f0);
	--clr-text-muted:      light-dark(#6b7280, #8890b0);
	--clr-link:            light-dark(#6d28c9, #b795ff);
	--clr-link-hover:      light-dark(#581fa6, #cdb2ff);
	--clr-on-link:         light-dark(#ffffff, #1c1233);

	--clr-header-bg:       light-dark(#14172a, #0a0c14);
	--clr-header-text:     light-dark(#e6e9f4, #dde0f0);
	--clr-header-link:     light-dark(#b8c0d8, #9098b8);
	--clr-header-link-hover: light-dark(#ffffff, #dde0f0);

	--clr-danger:          light-dark(#b03328, #e07070);
	--clr-danger-bg:       light-dark(#fdf2f1, #2a1212);
	--clr-danger-border:   light-dark(#f5c4bf, #6a2020);
	--clr-warning:         light-dark(#b85c10, #f0a040);
	--clr-warning-bg:      light-dark(#fef7ec, #221608);
	--clr-warning-border:  light-dark(#f5c88a, #604010);
	--clr-success:         light-dark(#1e7e44, #60c87a);
	--clr-success-bg:      light-dark(#f0faf4, #0e2018);
	--clr-success-border:  light-dark(#a3d9b4, #20583a);

	--clr-badge-pending:   light-dark(#c07810, #f0a030);
	--clr-badge-pending-bg: light-dark(#fff4d6, #2a1e04);
	--clr-badge-detected:  light-dark(#a82020, #e07070);
	--clr-badge-detected-bg: light-dark(#ffe8e8, #2a0808);
	--clr-badge-mod-author-bg: light-dark(#6d28c9, #4c2a86);

	--clr-notification:    light-dark(#c0392b, #e07070);
	--clr-star:            light-dark(#c9920a, #e8b030);

	/* Decorative heading-accent colours for the mod page's section markers
	   (mod-layouts.css) — one per section, no other meaning. */
	--clr-accent-1: light-dark(#b45309, #cf7920);
	--clr-accent-2: light-dark(#0891b2, #199fba);
	--clr-accent-3: light-dark(#be185d, #e05590);
	--clr-accent-4: light-dark(#1d4ed8, #4285e8);

	--radius-small: 4px;
	--radius-large: 8px;
	--shadow-sm: 0 1px 3px light-dark(rgba(0,0,0,.08), rgba(0,0,0,.35));
	--shadow-md: 0 2px 8px light-dark(rgba(0,0,0,.12), rgba(0,0,0,.5));

	--content-width: 1000px;
	--header-height: 48px;
}

html.force-dark  { color-scheme: dark; }
html.force-light { color-scheme: light; }

/* The one card look used across the site (hero, forms, list rows, panels…) — apply this class
   alongside a component's own class rather than re-deriving the same four declarations. */
.surface-card { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-large); box-shadow: var(--shadow-sm); }
/* The header/cell/hover treatment shared by every data table on the site (thread list, user
   list, tag requests, audit log). Table-specific rules (column widths, cell content) stay on
   the table's own class. */
.data-table { width: 100%; border-collapse: collapse; background: var(--clr-surface); border-radius: var(--radius-large); overflow: hidden; box-shadow: var(--shadow-sm); }
.data-table th { text-align: left; padding: 0.5rem 0.75rem; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--clr-text-muted); background: var(--clr-surface-alt); border-bottom: 1px solid var(--clr-border); }
.data-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--clr-border); vertical-align: middle; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--clr-surface-alt); }

:where(:not(ul):not(ol)), *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }

html { background: var(--clr-bg); }

body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.6; background: transparent; isolation: isolate; color: var(--clr-text); min-height: 100vh; }

#hex-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; height: 100lvh; z-index: -1; pointer-events: none; display: block; }

a { color: var(--clr-link); text-decoration: none; }
a:hover { color: var(--clr-link-hover); text-decoration: underline; }

h1 { font-size: 1.6rem; font-weight: 700; margin-bottom: 1rem; }
h2 { font-size: 1.2rem; font-weight: 600; margin: 1.25rem 0 0.6rem; }
h3 { font-size: 1rem; font-weight: 600; margin: 1rem 0 0.5rem; }

p { margin: 0.5rem 0; }

hr { border: none; border-top: 1px solid var(--clr-border); margin: 1rem 0; }

code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.875em; background: var(--clr-surface-alt); border: 1px solid var(--clr-border); border-radius: var(--radius-small); padding: 0.1em 0.35em; color: var(--clr-text); }

blockquote { border-left: 3px solid var(--clr-border); padding-left: 0.75rem; color: var(--clr-text-muted); margin: 0.5rem 0; }

[hidden] { display: none !important; }

input[type=text],
input[type=url],
input[type=search],
input[type=file],
select,
textarea { font-family: inherit; font-size: inherit; color: var(--clr-text); background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-small); padding: 0.35rem 0.6rem; outline: none; transition: border-color 0.15s; }
input[type=text]:focus,
input[type=url]:focus,
input[type=search]:focus,
select:focus,
textarea:focus { border-color: var(--clr-link); box-shadow: 0 0 0 2px color-mix(in srgb, var(--clr-link) 20%, transparent); }
input[type=file] { padding: 0.25rem; }

textarea { resize: vertical; width: 100%; }

label { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; }

button { font-family: inherit; font-size: inherit; cursor: pointer; background: var(--clr-surface-alt); color: var(--clr-text); border: 1px solid var(--clr-border); border-radius: var(--radius-small); padding: 0.35rem 0.8rem; transition: background 0.15s, border-color 0.15s; }
button:hover { background: var(--clr-border); }
button[type=submit]:not(.destructive-action):not(.positive-action):not(.tag-remove-btn):not(.moderation-toggle):not(.no-button-background) { background: var(--clr-link); color: var(--clr-on-link); border-color: var(--clr-link); }
button[type=submit]:not(.destructive-action):not(.positive-action):not(.tag-remove-btn):not(.moderation-toggle):not(.no-button-background):hover { background: var(--clr-link-hover); border-color: var(--clr-link-hover); }

/* Links acting as a primary action, styled to match button[type=submit]. */
a.button { display: inline-block; cursor: pointer; background: var(--clr-link); color: var(--clr-on-link); border: 1px solid var(--clr-link); border-radius: var(--radius-small); padding: 0.35rem 0.8rem; text-decoration: none; transition: background 0.15s, border-color 0.15s; }
a.button:hover { background: var(--clr-link-hover); border-color: var(--clr-link-hover); text-decoration: none; }

/* Discord feed: the add-a-channel row wraps instead of squeezing four controls onto one line. */

button.destructive-action { color: var(--clr-danger); border-color: var(--clr-danger-border); }
button.destructive-action:hover { background: var(--clr-danger-bg); }

button.positive-action { color: var(--clr-success); border-color: var(--clr-success-border); }
button.positive-action:hover { background: var(--clr-success-bg); }

/* In normal flex flow (after the flex:1 nav) so it can never overlap nav links */
.wide-toggle { display: none; flex-shrink: 0; background: transparent; border: 1px solid rgba(255,255,255,0.15); color: var(--clr-header-link); padding: 0.25rem 0.5rem; border-radius: var(--radius-small); cursor: pointer; line-height: 0; }
.wide-toggle:hover { background: rgba(255,255,255,0.1); color: var(--clr-header-link-hover); border-color: rgba(255,255,255,0.3); }
@media (min-width: 1200px) {
	.wide-toggle { display: flex; align-items: center; }
}

#site-header { position: sticky; top: 0; z-index: 100; height: var(--header-height); background: var(--clr-header-bg); color: var(--clr-header-text); display: flex; align-items: center; gap: 1.25rem; padding: 0 1.5rem; box-shadow: var(--shadow-md); }

#site-header .site-logo { flex-shrink: 0; height: 100%; display: flex; align-items: center; gap: .5em; }
.site-logo { font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: 0.02em; text-decoration: none; }
#site-header .site-logo:hover, #site-header .site-logo:hover a { color: #fff; text-decoration: none; opacity: 0.85; }

.site-logo img { max-height: 80%; }

#site-header .site-nav { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; flex: 1; margin-top: calc(var(--header-height) - 2.5em); font-size: 0.9rem; }

#site-header .site-nav a { color: var(--clr-header-link); white-space: nowrap; padding: 0.25rem 0.55rem; border-radius: var(--radius-small); transition: background 0.12s, color 0.12s; }
#site-header .site-nav > * { margin-top: calc(2.5em - var(--header-height)); }
#site-header .site-nav a:hover { color: var(--clr-header-link-hover); background: rgba(255, 255, 255, 0.08); text-decoration: none; }
#site-header .site-nav .topbar-icon-link { display: flex; align-items: center; gap: 0.35em; }
.topbar-discord-icon { width: 1em; height: 1em; vertical-align: middle; opacity: 0.8; filter: brightness(0) invert(1); }
#site-header .site-nav .topbar-icon-link:hover .topbar-discord-icon { opacity: 1; }

.topbar-gale-icon { width: 1em; height: 1em; vertical-align: middle; opacity: 0.8; }

/* Tools hover submenu */
#site-header .nav-dropdown { position: relative; display: inline-flex; align-items: center; }
#site-header .nav-dropdown-toggle { color: var(--clr-header-link); font-size: 1em; white-space: nowrap; padding: 0.25rem 0.55rem; border: none; background: none; border-radius: var(--radius-small); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 0.3em; transition: background 0.12s, color 0.12s; line-height: inherit; }
#site-header .nav-dropdown-toggle:hover,
#site-header .nav-dropdown:focus-within .nav-dropdown-toggle { color: var(--clr-header-link-hover); background: rgba(255, 255, 255, 0.08); border: none; }
.nav-dropdown-caret { opacity: 0.7; transition: transform 0.12s; }
#site-header .nav-dropdown:hover .nav-dropdown-caret,
#site-header .nav-dropdown:focus-within .nav-dropdown-caret { transform: rotate(180deg); }
#site-header .nav-dropdown-menu { display: none; position: absolute; top: 100%; left: 0; min-width: 12rem; flex-direction: column; gap: 0.1rem; background: var(--clr-header-bg); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-small); box-shadow: var(--shadow-md); padding: 0.3rem; z-index: 200; }
#site-header .nav-dropdown:hover .nav-dropdown-menu,
#site-header .nav-dropdown:focus-within .nav-dropdown-menu { display: flex; }

/* Group label: hidden inside the desktop hover menus, shown as a section heading when the
 * collapsed mobile menu flattens the dropdown items into the column below. */
.nav-flat-label { display: none; }

/* On the collapsed mobile menu there's no hover — flatten the dropdown items into the column. */
@media (max-width: 900px) {
	#site-header .nav-dropdown { display: contents; }
	#site-header .nav-dropdown-toggle { display: none; }
	#site-header .nav-dropdown-menu,
	#site-header .nav-dropdown:hover .nav-dropdown-menu,
	#site-header .nav-dropdown:focus-within .nav-dropdown-menu { display: contents; }
	#site-header .nav-flat-label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-header-link); opacity: 0.55; padding: 0.6rem 0.75rem 0.15rem; margin-top: 0.3rem; border-top: 1px solid rgba(255, 255, 255, 0.08); }
}

#site-header .user-info { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; color: var(--clr-header-text); font-size: 0.9rem; white-space: nowrap; }

.user-avatar { border-radius: 50%; vertical-align: middle; width: 28px; height: 28px; }

#site-header form { display: inline; }
#site-header button { background: transparent; border: 1px solid rgba(255,255,255,0.2); color: var(--clr-header-link); font-size: 0.85rem; padding: 0.2rem 0.6rem; }
#site-header button:hover { background: rgba(255,255,255,0.1); color: var(--clr-header-link-hover); border-color: rgba(255,255,255,0.35); }

.notification-count { background: var(--clr-notification); color: #fff; font-size: 0.72rem; font-weight: 700; border-radius: 3px; padding: 0 0.3em; margin-left: 0.2em; height: inherit; align-items: center; margin-top: -6px; }

main { max-width: var(--content-width); margin: 0 auto; padding: 1.5rem 1.25rem 2px; }
main:has(.site-slogan) { padding-top: 0; }
html.full-width main { max-width: none; }

main > nav { margin-bottom: 1rem; font-size: 0.9rem; color: var(--clr-text-muted); }
main > nav a { color: var(--clr-text-muted); background: var(--clr-bg); }
main > nav a:hover { color: var(--clr-link); }

.site-slogan { text-align: center; font-size: 0.85rem; color: #707070; transform: translateY(.3em); font-style: italic; }

/* Login page */
main.page-centered { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - var(--header-height)); padding-top: 0; gap: 1rem; text-align: center; }

.login-prompt { color: var(--clr-text-muted); margin-bottom: 0.5rem; }

.login-btn {
	display: inline-block;
	background: #5865f2; /* Discord brand */
	color: #fff !important;
	font-weight: 600;
	padding: 0.65rem 1.5rem;
	border-radius: var(--radius-large);
	text-decoration: none !important;
	font-size: 1rem;
	transition: opacity 0.15s;
}
.login-btn:hover { opacity: 0.88; }

.gale-download-text { background: var(--clr-bg); padding: 0.4rem 0.6rem; border-radius: var(--radius-large); }
.gale-download-card {
	--accent: light-dark(#6d28c9, #b795ff);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.6rem;
	max-width: 26rem;
	padding: 1.5rem;
	margin-top: 1rem;
	border: 1px solid var(--clr-border);
	border-radius: var(--radius-large);
	background: var(--clr-surface);
}
.gale-support { max-width: initial; }
.gale-support img { vertical-align: middle; }
.gale-download-image { float: left; max-width: 20vw; max-height: 14em; padding-right: 1em; }
.gale-download-btn { display: inline-block; background: var(--accent); color: #fff !important; font-weight: 600; padding: 0.7rem 1.6rem; border-radius: var(--radius-large); text-decoration: none !important; font-size: 1.05rem; transition: opacity 0.15s; }
.gale-download-btn:hover { opacity: 0.88; }
.gale-version { margin: 0; color: var(--clr-text-muted); font-size: 0.85rem; }
.gale-unsupported { margin: 0; color: var(--clr-danger); font-size: 0.9rem; }
.gale-alt-note { margin: 0; color: var(--clr-text-muted); font-size: 0.9rem; }
.gale-alt-note p { margin: 0 0 0.4rem; }
.gale-scoop-cmd { margin: 0; background: color-mix(in srgb, var(--clr-border) 50%, transparent); padding: 0.6rem 0.8rem; border-radius: var(--radius-small); font-size: 0.85rem; text-align: left; white-space: pre; overflow-x: auto; }
.gale-picker-label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--clr-text-muted); }

.error { color: var(--clr-danger); background: var(--clr-danger-bg); border: 1px solid var(--clr-danger-border); border-radius: var(--radius-small); padding: 0.5rem 0.75rem; }
.success-message { color: var(--clr-success); background: var(--clr-success-bg); border: 1px solid var(--clr-success-border); border-radius: var(--radius-small); padding: 0.5rem 0.75rem; }
.upload-warning { color: var(--clr-badge-detected); background: var(--clr-badge-detected-bg); border: 1px solid var(--clr-badge-detected); border-radius: var(--radius-small); padding: 0.5rem 0.75rem; }
.upload-manifest-preview { border: 1px solid var(--clr-border); border-radius: var(--radius-small); background: var(--clr-surface); padding: 0.6rem 0.85rem; }
.upload-manifest-preview h4 { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--clr-text-muted); }
.upload-manifest-fields { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 0.75rem; margin: 0; }
.upload-manifest-fields > div { display: contents; }
.upload-manifest-fields dt { font-weight: 600; color: var(--clr-text-muted); }
.upload-manifest-fields dd { margin: 0; word-break: break-word; }
.bulk-file-manifest { flex-basis: 100%; font-size: 0.85rem; color: var(--clr-text-muted); }
.bulk-file-manifest summary { cursor: pointer; }
.bulk-file-manifest .upload-manifest-fields { margin-top: 0.4rem; padding-left: 0.5rem; }

.status-badge { display: inline-block; font-size: 0.75em; font-weight: 600; padding: 0.1em 0.45em; border-radius: var(--radius-small); vertical-align: middle; line-height: 1.5; }
.status-badge--vt-pending { background: var(--clr-badge-pending-bg); color: var(--clr-badge-pending); border: 1px solid var(--clr-badge-pending); }
.status-badge--vt-detected { background: var(--clr-badge-detected-bg); color: var(--clr-badge-detected); border: 1px solid var(--clr-badge-detected); }
.status-badge--vt-clean { background: var(--clr-success-bg); color: var(--clr-success); border: 1px solid var(--clr-success-border); }
.status-badge--upload-missing { background: var(--clr-badge-pending-bg); color: var(--clr-badge-pending); border: 1px solid var(--clr-badge-pending); }
.status-badge--latest { background: color-mix(in srgb, var(--clr-link) 15%, transparent); color: var(--clr-link); border: 1px solid var(--clr-link); }
/* Badges that link to the VirusTotal report keep badge colors, not link colors */
a.status-badge { text-decoration: none; }
a.status-badge:hover { text-decoration: underline; }
/* Moderator VT-verdict override button, inline with the badges */
.vt-override-form { display: inline-block; vertical-align: middle; }
.vt-override-form button { font-size: 0.7em; padding: 0.1em 0.45em; }

.mod-author-badge { display: inline-block; background: var(--clr-badge-mod-author-bg); color: #fff; font-size: 0.72em; font-weight: 700; padding: 0.1em 0.45em; border-radius: var(--radius-small); vertical-align: middle; }

.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; }

.tag-overlay {
	border: 1px solid color-mix(in srgb, var(--clr-border) 60%, transparent);
	border-radius: 12px;
	padding: 0;
	width: min(480px, 96vw);
	flex-direction: column;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.1);
	background: var(--clr-surface);
	color: var(--clr-text);
	/* <dialog> default positioning is already centered; reinforce it */
	margin: auto;
}
.tag-overlay[open] { display: flex; }
.tag-overlay::backdrop { background: rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); }
.tag-overlay-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem 0.85rem; border-bottom: 1px solid var(--clr-border); flex-shrink: 0; }
.tag-overlay-title { font-weight: 600; font-size: 1rem; }
.tag-overlay-mode { display: flex; gap: 0.15rem; background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: var(--radius-small); padding: 0.2rem; }
.tag-overlay-mode label { display: flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem; border-radius: calc(var(--radius-small) - 1px); font-size: 0.8rem; cursor: pointer; color: var(--clr-text-muted); transition: background 0.1s, color 0.1s; }
.tag-overlay-mode label:has(input:checked) { background: var(--clr-surface); color: var(--clr-text); box-shadow: var(--shadow-sm); }
.tag-overlay-mode input[type=radio] { display: none; }
.tag-overlay-search { margin: 0.85rem 1.25rem 0.5rem; padding: 0.45rem 0.75rem; border: 1px solid var(--clr-border); border-radius: var(--radius-small); background: var(--clr-bg); color: var(--clr-text); font-size: 0.875rem; width: calc(100% - 2.5rem); box-sizing: border-box; flex-shrink: 0; }
.tag-overlay-search:focus { outline: none; border-color: var(--clr-link); box-shadow: 0 0 0 2px color-mix(in srgb, var(--clr-link) 20%, transparent); }
.tag-overlay-list { overflow-y: auto; flex: 1; padding: 0.5rem 1.25rem 0.75rem; display: flex; flex-wrap: wrap; gap: 0.4rem; align-content: flex-start; }
.tag-overlay-item { display: contents; }
.tag-overlay-item input[type=checkbox] { display: none; }
.tag-overlay-item input[type=checkbox]:checked + .tag { background: var(--clr-link); color: var(--clr-on-link); border-color: var(--clr-link); }
/* Tri-state items (index page tag filter) */
.tag-overlay-item[data-state] { cursor: pointer; }
.tag-overlay-item[data-state="included"] .tag { background: var(--clr-link); color: var(--clr-on-link); border-color: var(--clr-link); }
.tag-overlay-item[data-state="excluded"] .tag { background: color-mix(in srgb, var(--clr-danger) 10%, var(--clr-surface-alt)); color: var(--clr-danger); border-color: color-mix(in srgb, var(--clr-danger) 35%, var(--clr-border)); text-decoration: line-through; }
/* Hover in the tag overlay: tint rather than full active colour so unchecked/checked stay distinct */
.tag-overlay-list .tag:hover { background: color-mix(in srgb, var(--clr-link) 14%, var(--clr-surface-alt)); color: var(--clr-link); border-color: color-mix(in srgb, var(--clr-link) 40%, var(--clr-border)); }
.tag-overlay-list .tag-overlay-item[data-state="included"] .tag:hover { background: color-mix(in srgb, var(--clr-link) 82%, #000); border-color: color-mix(in srgb, var(--clr-link) 82%, #000); color: var(--clr-on-link); }
.tag-overlay-list .tag-overlay-item[data-state="excluded"] .tag:hover { background: color-mix(in srgb, var(--clr-danger) 20%, var(--clr-surface-alt)); border-color: color-mix(in srgb, var(--clr-danger) 55%, var(--clr-border)); color: var(--clr-danger); }
.tag-overlay-list .tag-overlay-item:has(input:checked) .tag:hover { background: color-mix(in srgb, var(--clr-link) 82%, #000); border-color: color-mix(in srgb, var(--clr-link) 82%, #000); color: var(--clr-on-link); }
.tag-overlay-list .tag-overlay-item--protected .tag { cursor: default; }
.tag-overlay-list .tag-overlay-item--protected .tag:hover { background: var(--clr-surface-alt); color: var(--clr-text-muted); border-color: var(--clr-border); }
.excluded-tag-label { text-decoration: line-through; color: var(--clr-danger); }
.mod-tag-request-section { padding: 0.5rem 1.25rem 0.75rem; }
.tag-overlay-footer { display: flex; justify-content: flex-end; align-items: center; gap: 0.6rem; padding: 0.85rem 1.25rem; border-top: 1px solid var(--clr-border); flex-shrink: 0; background: var(--clr-surface-alt); border-radius: 0 0 12px 12px; }

.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; }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }

.tag { display: inline-block; font-size: 0.78rem; padding: 0.1em 0.5em; border-radius: 999px; background: var(--clr-surface-alt); color: var(--clr-text-muted); border: 1px solid var(--clr-border); text-decoration: none; transition: background 0.12s, color 0.12s; }
.tag:hover { background: var(--clr-link); color: var(--clr-on-link); border-color: var(--clr-link); text-decoration: none; }
.tag--install-location { background: color-mix(in srgb, var(--clr-link) 12%, var(--clr-surface-alt)); border-color: color-mix(in srgb, var(--clr-link) 35%, var(--clr-border)); color: var(--clr-link); cursor: help; }
.tag--install-location:hover { background: color-mix(in srgb, var(--clr-link) 20%, var(--clr-surface-alt)); color: var(--clr-link); border-color: color-mix(in srgb, var(--clr-link) 50%, var(--clr-border)); }

.mod-page-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.mod-install-help-btn { font-size: 0.85rem; background: var(--clr-link); color: var(--clr-on-link); border-color: var(--clr-link); padding: 0.3rem 0.75rem; }
.mod-install-help-btn:hover { background: var(--clr-link-hover); border-color: var(--clr-link-hover); }

.install-dialog { max-width: 520px; width: 90vw; }
.install-dialog-body { padding: .5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.install-step { display: flex; gap: 0.85rem; align-items: flex-start; }
.install-step-num { flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--clr-link); color: var(--clr-on-link); font-weight: 700; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; margin-top: 0.1rem; }
.install-step-content { flex: 1; min-width: 0; }
.install-step-content p { margin: 0.3rem 0; font-size: 0.9rem; }
p.install-note { color: var(--clr-text-muted); font-size: 0.83rem; }

.mod-title-row {
	display: flex;
	flex-wrap: wrap;
	/* baseline, not center: pills anchored to the name's text line read as level;
	   centering against the tall h1 line box makes them look a couple px high */
	align-items: baseline;
	gap: 0.5rem 0.6rem;
	padding-right: 2.25rem;
}
.mod-title-row h1 { margin-bottom: 0; padding-right: 0; overflow-wrap: anywhere; line-height: 0.8em; }
/* Chip and scan badge share exact metrics so they sit pixel-aligned on one line */
.mod-title-row .status-badge,
.mod-version-chip { display: inline-flex; align-items: center; font-size: 0.8rem; font-weight: 600; line-height: 1.4; padding: 0.15em 0.55em; border-radius: var(--radius-small); }
.mod-version-chip { color: var(--clr-text-muted); background: var(--clr-surface-alt); border: 1px solid var(--clr-border); }

.mod-byline { color: var(--clr-text-muted); font-size: 0.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.25rem 0 0.75rem; }
.mod-cog-menu { position: absolute; top: 0; right: 0; }
.mod-cog-menu > summary { list-style: none; cursor: pointer; width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-small); color: var(--clr-text-muted); font-size: 1.1rem; user-select: none; }
.mod-cog-menu > summary::-webkit-details-marker { display: none; }
.mod-cog-menu > summary:hover { background: var(--clr-bg); color: var(--clr-text); }
.mod-cog-panel { position: absolute; top: calc(100% + 2px); right: 0; min-width: 180px; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-small); box-shadow: var(--shadow-md); padding: 0.3rem; z-index: 10; display: flex; flex-direction: column; gap: 0.1rem; }
.mod-cog-panel a,
.mod-cog-panel > form > button,
.mod-cog-panel > button { display: block; width: 100%; box-sizing: border-box; text-align: left; padding: 0.35rem 0.65rem; border-radius: var(--radius-small); font-size: 0.875rem; background: none; border: none; cursor: pointer; color: var(--clr-text); text-decoration: none; }
.mod-cog-panel a:hover,
.mod-cog-panel > form > button:hover,
.mod-cog-panel > button:hover { background: var(--clr-bg); text-decoration: none; }
.mod-cog-panel .destructive-action { color: var(--clr-danger, #c0392b); }
.mod-cog-panel .destructive-action:hover { background: var(--clr-bg); }
.mod-cog-panel .positive-action { color: var(--clr-success, #27ae60); }
.mod-cog-panel hr { border: none; border-top: 1px solid var(--clr-border); margin: 0.25rem 0; }
.mod-cog-panel .report-inline-form { display: flex; gap: 0.3rem; padding: 0.25rem 0.65rem 0.35rem; }
.mod-cog-panel .report-inline-form input[type=text] { flex: 1; min-width: 0; font-size: 0.8rem; }
.mod-cog-panel .report-inline-form button { width: auto; padding: 0.2rem 0.5rem; }

.mod-actions { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--clr-border); }
a.mod-download-btn { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.9rem; background: var(--clr-link); color: var(--clr-on-link); border: 1px solid var(--clr-link); border-radius: var(--radius-small); font-weight: 600; text-decoration: none; }
a.mod-download-btn:hover { background: var(--clr-link-hover); border-color: var(--clr-link-hover); color: var(--clr-on-link); text-decoration: none; }
.mod-manager-download-btn img { height: 1.5em; }
/* Reference links (changelog, graph, website/source/license) flow in the same row as
   Download/Install and wrap together — one continuous line that uses the available
   width instead of two short stacked rows with empty space trailing each one. These
   are real navigation links, so they use normal link styling/color like anywhere else
   on the site — no invented "muted secondary link" look. */
.mod-action-links { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.85rem; }
/* Dependency string is a copy action, not a link — kept visually muted/plain so it
   doesn't read as "go somewhere" like the real links around it. */
.mod-inline-link { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: none; padding: 0; margin: 0; font: inherit; font-size: inherit; color: var(--clr-text-muted); cursor: pointer; }
.mod-inline-link:hover { color: var(--clr-text); background: none; }

.mod-hidden-notice,
.mod-deprecated-notice { background: var(--clr-warning-bg); border: 1px solid var(--clr-warning-border); color: var(--clr-warning); border-radius: var(--radius-small); padding: 0.65rem 0.9rem; margin: 0.75rem 0; font-size: 0.9rem; }
.mod-deletion-notice { background: var(--clr-danger-bg); border: 1px solid var(--clr-danger-border); color: var(--clr-danger); border-radius: var(--radius-small); padding: 0.65rem 0.9rem; margin: 0.75rem 0; font-size: 0.9rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

.mod-suggestions-pending,
.mod-suggestions-approved { margin-bottom: 0.75rem; padding: 0.5rem 1.25rem 0; }
.mod-suggestions-pending ul,
.mod-suggestions-approved ul { list-style: none; margin: 0.25rem 0 0; padding: 0; }
.mod-suggestions-pending li,
.mod-suggestions-approved li { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; flex-wrap: wrap; }
.mod-suggestion-inline-form { display: inline; }
.mod-suggestion-inline-form button { width: auto; padding: 0.15rem 0.5rem; font-size: 0.8rem; }
.mod-suggestion-search-results { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.35rem; max-height: 12rem; overflow-y: auto; }
.mod-suggestion-result { text-align: left; width: 100%; padding: 0.3rem 0.5rem; border: 1px solid var(--clr-border); border-radius: var(--radius-small); background: var(--clr-surface); cursor: pointer; }
.mod-suggestion-result:hover { background: var(--clr-surface-alt); }

.tag-vote-form { display: inline; }
.tag--suggested { opacity: 0.75; border-style: dashed; cursor: pointer; }
.tag--voted { opacity: 1; outline: 1px solid currentColor; }
.tag--suggest-btn { cursor: pointer; background: none; border-style: dashed; color: var(--clr-text-muted); }

.user-images-pending { margin-top: 0.5rem; }
.user-images-pending summary { cursor: pointer; font-size: 0.9rem; color: var(--clr-text-muted); }
.gallery-item--pending { opacity: 0.85; }
.user-image-review-actions { position: absolute; bottom: 4px; right: 4px; display: flex; gap: 4px; }
.user-image-review-actions button { font-size: 0.8rem; padding: 0.1rem 0.45rem; cursor: pointer; }

.mod-image-gallery-section { margin: 0.75rem 0; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-large); padding: 0.75rem 1rem; box-shadow: var(--shadow-sm); }
.mod-image-gallery { display: flex; gap: 0.5rem; overflow-x: auto; overflow-y: hidden; padding: 0; scroll-snap-type: x mandatory; padding-bottom: 7px; }
.gallery-item { position: relative; flex-shrink: 0; height: 150px; scroll-snap-align: start; }
.gallery-item.dragging { opacity: 0.4; }
/* Where the tile will land. Fixed: the gallery is `display: contents` and has no box. */
.gallery-drop-line { position: fixed; width: 3px; border-radius: 3px; background: var(--clr-link); box-shadow: 0 0 0 1px color-mix(in srgb, var(--clr-link) 40%, transparent), 0 0 10px 2px color-mix(in srgb, var(--clr-link) 55%, transparent); pointer-events: none; z-index: 2500; }
/* The rest of the band steps back while a tile is in flight, so the line is what reads. */
.mod-image-gallery--reordering .gallery-item:not(.dragging) { opacity: 0.72; }
.mod-image-gallery--saving .gallery-item { transition: opacity 0.15s; opacity: 0.85; }
.mod-image-gallery--drop-active { outline: 2px dashed var(--clr-link); outline-offset: 3px; background: color-mix(in srgb, var(--clr-link) 8%, transparent); border-radius: var(--radius-small); }
/* Only rendered empty at all for the mod author (drop target for drag-and-drop upload) —
   needs a minimum size to actually be droppable, and a hint since it'd otherwise be blank. */
.mod-image-gallery:empty { min-height: 60px; align-items: center; justify-content: center; border: 1px dashed var(--clr-border); border-radius: var(--radius-small); }
.mod-image-gallery:empty::before { content: 'Drag and drop images here'; color: var(--clr-text-muted); font-size: 0.85rem; }
.gallery-thumb { max-height: 150px; max-width: 260px; object-fit: contain; cursor: pointer; border-radius: var(--radius-small); display: block; }
.gallery-delete-btn { position: absolute; top: 3px; right: 3px; background: rgba(0,0,0,.65); color: #fff; border: none; border-radius: 50%; width: 22px; height: 22px; font-size: 15px; line-height: 1; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0; }
.gallery-item:hover .gallery-delete-btn { display: flex; }
.gallery-uploader-tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%) translateY(-4px); background: rgba(0,0,0,.8); color: #fff; padding: 3px 8px; border-radius: var(--radius-small); font-size: 0.75rem; white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s ease; z-index: 2; }
.gallery-item:hover .gallery-uploader-tooltip { opacity: 1; visibility: visible; }
.gallery-upload-btn { display: inline-block; padding: 0.3rem 0.75rem; border: 1px dashed var(--clr-border); border-radius: var(--radius-small); cursor: pointer; font-size: 0.85rem; color: var(--clr-text-muted); }
.gallery-upload-btn:hover { border-color: var(--clr-link); color: var(--clr-link); }

/* Lightbox */
#lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.88); z-index: 2000; display: none; align-items: center; justify-content: center; }
#lightbox.open { display: flex; }
/* fit-content, so the bar below is exactly as wide as the rendered image. */
#lightbox-figure { display: flex; flex-direction: column; width: fit-content; max-width: calc(100vw - 20px); margin: 0; min-width: 0; }
#lightbox img {
	max-width: 100%;
	/* Leaves room for the bar below. */
	max-height: calc(100vh - 20px - 2.4rem);
	object-fit: contain;
	border-radius: var(--radius-small);
}
#lightbox-close { position: absolute; top: 10px; right: 16px; background: none; border: none; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
#lightbox-prev, #lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: #fff; font-size: 4rem; line-height: 1; cursor: pointer; padding: 0 0.5rem; opacity: 0.7; }
#lightbox-prev:hover, #lightbox-next:hover { opacity: 1; }
/* Position and credit, directly under the photo rather than in the corners of the screen. */
#lightbox-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.5rem 0.15rem 0; color: #fff; font-size: 0.9rem; font-weight: 600; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); }
#lightbox-count { flex-shrink: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
#lightbox-caption { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* An empty caption must not collapse the row, or the counter jumps. */
#lightbox-caption:empty::before { content: '\200b'; }
#lightbox-prev { left: 0; }
#lightbox-next { right: 0; }

.tag-section { margin: 0.75rem 0; padding: 0.75rem 1rem; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-small); }
.tag-section > strong { display: block; margin-bottom: 0.5rem; }
.tag-section .tag-list { display: inline; }

.tag-with-remove { display: inline-flex; align-items: center; gap: 0; }

.tag-remove-btn { background: none; border: none; color: var(--clr-text-muted); padding: 0 0.2em; font-size: 0.85em; cursor: pointer; line-height: 1; border-radius: 0 999px 999px 0; }
.tag-remove-btn:hover { color: var(--clr-danger); background: none; }

.tag-add-form { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; }
.tag-request-area { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap; }
.tag-request-hint { font-size: 0.82rem; color: var(--clr-text-muted); padding: 0.5rem 1.25rem 0; }

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

.mod-readme { margin: 1rem 0; padding: 1.25rem; overflow-x: auto; }
.mod-faq-panel :first-child { margin-top: 0; }
.mod-readme-edit-btn { float: right; color: var(--clr-text-muted); display: flex; align-items: center; z-index: 1; }
.mod-readme-edit-btn:hover { color: var(--clr-text); }

/* The toggle button floats top-right (like .mod-readme-edit-btn); its panel is a normal-flow
   sibling that fully replaces the README's spot when open, rather than overlaying it. */
.mod-faq-toggle-btn { float: right; cursor: pointer; list-style: none; font-size: 1.1rem; font-weight: 600; color: var(--clr-on-link); padding: calc(1.05rem + 1px) 2.5rem; border-radius: var(--radius-large); background: var(--clr-link); margin-top: calc(-1.25rem - 1px); margin-right: -1.25rem; border-bottom-right-radius: 0; border-top-left-radius: 0; margin-left: 1em; }
.mod-faq-toggle-btn::-webkit-details-marker { display: none; }
.mod-faq-toggle-btn:hover { background: var(--clr-link-hover); border-color: var(--clr-link-hover); color: var(--clr-on-link); }
.mod-faq-toggle[open] > .mod-faq-toggle-btn { color: var(--clr-text); border-color: var(--clr-link); }
.mod-readme:has(.mod-faq-toggle[open]) .mod-readme-edit-btn, .mod-readme:has(.mod-faq-toggle[open]) .mod-readme-inner { display: none; }
.mod-faq-empty { margin: 0 0 0.4rem; }
.mod-faq-links { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.mod-faq-links li { padding: 0.15rem 0; display: flex; align-items: center; gap: 0.35rem; }
.mod-faq-entry { flex: 1; min-width: 0; }
/* A group the author can drop into but which has no entries yet (moving the last item out of a
   section, or the top-level list when every entry currently lives in a section) still needs a
   visible, sizeable target — an empty <ul> alone collapses to nothing. */
.mod-faq-links[data-faq-group]:empty { min-height: 1.7rem; border: 1px dashed var(--clr-border); border-radius: var(--radius-small); }
/* The dragged row itself stays interactive-looking; every other droppable list gets a faint
   highlight so it is clear the drag is being tracked, not just the one row under the pointer. */
.mod-faq-inline:has(.mod-faq-dragging) .mod-faq-links[data-faq-group] { background: color-mix(in srgb, var(--clr-link) 5%, transparent); border-radius: var(--radius-small); }
.mod-faq-dragging { opacity: 0.45; }
.mod-faq-saving { opacity: 0.6; }
/* The ribbon: a small grip, quiet until hovered — the row's other controls (permalink, edit) sit
   right next to it, so it must not compete with them at rest. */
.mod-faq-handle { display: inline-flex; align-items: center; flex-shrink: 0; color: var(--clr-text-muted); opacity: 0.45; cursor: grab; touch-action: none; }
.mod-faq-handle:hover { opacity: 1; color: var(--clr-text); }
.mod-faq-handle:active { cursor: grabbing; }
.mod-faq-entry > summary { cursor: pointer; }
.mod-faq-entry-body { margin: -0.5rem 0 0.5rem 0.75rem; padding-left: 0.75rem; border-left: 2px solid var(--clr-border); }
.mod-faq-permalink { margin-left: 0.4rem; color: var(--clr-text-muted); opacity: 0.6; float: right; }
.mod-faq-permalink:hover { opacity: 1; color: var(--clr-link); }
.mod-faq-edit-link { color: var(--clr-text-muted); text-decoration: none; flex-shrink: 0; }
.mod-faq-edit-link:hover { color: var(--clr-text); }
.mod-faq-label { background: var(--clr-bg); }
.mod-faq-section { margin: 0.75rem 0; }
.mod-faq-section-title { margin: 0 0 0.25rem; font-size: 0.9rem; color: var(--clr-text-muted); }
.mod-faq-new-link { font-size: 0.85rem; }
.mod-faq-page-heading { display: flex; align-items: center; gap: 0.5rem; }
.mod-readme h1:first-child { margin-top: 0; }
.mod-readme h1, .mod-readme h2, .mod-readme h3,
.mod-readme h4, .mod-readme h5, .mod-readme h6 { margin: 1.2em 0 0.5em; }
.mod-readme h1 { font-size: 1.4rem; border-bottom: 1px solid var(--clr-border); padding-bottom: 0.3em; }
.mod-readme h2 { font-size: 1.15rem; border-bottom: 1px solid var(--clr-border); padding-bottom: 0.2em; }
.mod-readme p  { margin: 0.7em 0; }
.mod-readme ul, .mod-readme ol { padding-left: 1.5rem; margin: 0.5em 0; }
.mod-readme pre { background: var(--clr-surface-alt); border: 1px solid var(--clr-border); border-radius: var(--radius-small); padding: 0.75rem 1rem; overflow-x: auto; margin: 0.75em 0; }
.mod-readme pre code { background: none; border: none; padding: 0; font-size: 0.875rem; }
.mod-readme img { max-width: 100%; height: auto; }
/* Not scoped to .mod-readme — Markdown::renderSafe() is shared by FAQ, changelogs and
   forum posts too, so a YouTube-link paragraph can turn into this embed anywhere. */
.md-youtube-embed { position: relative; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; margin: 0.7em 0; }
.md-youtube-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: 6px; }
.md-youtube-caption { margin-top: 0.3em; font-size: 0.85em; opacity: 0.75; }
.mod-readme table { border-collapse: collapse; width: 100%; margin: 0.75em 0; }
.mod-readme table th,
.mod-readme table td { border: 1px solid var(--clr-border); padding: 0.35rem 0.6rem; }

.why-hexium-table th:not(:first-child),
.why-hexium-table td:not(:first-child) { text-align: right; }
.why-hexium td, .why-hexium th { padding: .3em 1em; }

main.home-main { display: flex; flex-direction: column; min-height: calc(100vh - var(--header-height)); }
.why-hexium { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem 0; }
.why-hexium-table { width: auto; margin: 0; }
.mod-readme blockquote { border-left: 3px solid var(--clr-border); padding-left: 0.75rem; margin-left: 0; color: var(--clr-text-muted); }

.thread-new-form { background: var(--clr-surface); display: flex; flex-direction: column; gap: 0.6rem; }
.thread-new-form input[type=text] { width: 100%; }

.thread-opening-post,
.thread-post { margin: 0.6rem 0; overflow: hidden; }

.thread-opening-post .post-header { padding: 0.65rem 1rem; background: var(--clr-surface-alt); border-bottom: 1px solid var(--clr-border); display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }

.post-author { font-weight: 600; }
.post-timestamp { font-size: 0.82rem; color: var(--clr-text-muted); }
.post-permalink { text-decoration: none; }
.post-permalink:hover { text-decoration: underline; color: var(--clr-link); }
.thread-post:target,
.thread-opening-post:target { border-color: var(--clr-link); box-shadow: 0 0 0 1px var(--clr-link); }
.post-edited-label { font-size: 0.82rem; color: var(--clr-text-muted); font-style: italic; }
.post-visibility-label { font-size: 0.82rem; color: var(--clr-text-muted); font-style: italic; }

.post-controls { margin-left: auto; display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; }
.post-controls button,
.post-controls input[type=text] { font-size: 0.82rem; padding: 0.2rem 0.5rem; }

.thread-opening-post .post-body,
.thread-post .post-body { padding: 0.9rem 1rem; word-break: break-word; line-height: 1.6; }
.thread-opening-post .post-body > *:first-child,
.thread-post .post-body > *:first-child { margin-top: 0; }
.thread-opening-post .post-body > *:last-child,
.thread-post .post-body > *:last-child { margin-bottom: 0; }
.post-body p { margin: 0.5em 0; }
.post-body ul, .post-body ol { padding-left: 1.5em; margin: 0.4em 0; }
.post-body code { font-family: monospace; font-size: 0.9em; background: color-mix(in srgb, var(--clr-border) 50%, transparent); padding: 0.1em 0.3em; border-radius: 3px; }
.post-body pre { background: color-mix(in srgb, var(--clr-border) 50%, transparent); padding: 0.75em 1em; border-radius: var(--radius-small); overflow-x: auto; margin: 0.5em 0; }
.post-body pre code { background: none; padding: 0; }
.post-body blockquote { border-left: 3px solid var(--clr-border); margin: 0.5em 0; padding: 0.1em 0.75em; color: var(--clr-text-muted); }
.post-body a { color: var(--clr-link); }
.post-body h1, .post-body h2, .post-body h3, .post-body h4 { margin: 0.75em 0 0.25em; font-size: 1em; font-weight: 600; }

/* Reply posts use <details> */
.thread-post > summary { list-style: none; cursor: pointer; padding: 0.65rem 1rem; background: var(--clr-surface-alt); border-bottom: 1px solid transparent; display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; user-select: none; }
.thread-post > summary::-webkit-details-marker { display: none; }
.thread-post[open] > summary { border-bottom-color: var(--clr-border); }


.thread-post--hidden-by-author { border-color: var(--clr-border); }
.thread-post--hidden-by-author > summary { color: var(--clr-text-muted); }

.thread-post--moderator-deleted { border-color: var(--clr-danger-border); border-left: 3px solid var(--clr-danger); }
.thread-post--moderator-deleted > summary { color: var(--clr-danger); }

.thread-post--self-deleted { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-small); padding: 0.5rem 1rem; color: var(--clr-text-muted); font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; }

.thread-status-badge { display: inline-block; font-size: 0.7rem; font-weight: 600; padding: 0.15em 0.55em; border-radius: 999px; vertical-align: middle; text-transform: uppercase; letter-spacing: 0.04em; }
.thread-status-badge--acknowledged { background: color-mix(in srgb, #3b82f6 15%, transparent); color: #3b82f6; border: 1px solid color-mix(in srgb, #3b82f6 35%, transparent); }
.thread-status-badge--done { background: var(--clr-success-bg); color: var(--clr-success); border: 1px solid var(--clr-success-border); }
.thread-status-badge--wont-do { background: var(--clr-surface-alt); color: var(--clr-text-muted); border: 1px solid var(--clr-border); }
.thread-opening-post--resolved { opacity: 0.75; }

.post-edit-form { padding: 0 1rem 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.post-edit-form .edit-form-actions { display: flex; gap: 0.4rem; }
.post-edit-form textarea { min-height: 100px; }

.thread-reply-form { padding: 1rem; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-large); margin-top: 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.thread-reply-actions { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.thread-reply-hint { font-size: 0.8rem; color: var(--clr-text-muted); }

.host-switcher { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-size: 0.9rem; color: var(--clr-text-muted); }
.user-profile-header { padding: 1rem; margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-start; }
.user-profile-info { flex: 1; min-width: 160px; }
.user-profile-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.user-profile-actions form { display: contents; }

.user-teams-section { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-small); padding: 0.5rem 1rem; margin: 0.75rem 0; }
.community-ban-list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; padding: 0; font-size: 0.9rem; }
/* Profile-page "Send message": card the expanded form (inbox embeds already sit on cards) */
main > .mod-send-message .contact-form { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-large); padding: 1rem; }

.user-post-search { display: flex; gap: 0.5rem; align-items: center; margin: 0.75rem 0; }

.post-list-item { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-small); padding: 0.75rem 1rem; margin: 0.5rem 0; }
.post-list-item .post-context { font-size: 0.9rem; margin-bottom: 0.25rem; }
.post-list-item .post-meta { font-size: 0.82rem; color: var(--clr-text-muted); margin-bottom: 0.4rem; }

/* Section heading band: readable over the animated page background — shared by several
   non-admin pages too (see admin.css for the moderation-only tag-request rules). */
.section-heading { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; padding: 0.6rem 1rem; font-size: 1rem; font-weight: 700; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-large); box-shadow: var(--shadow-sm); }

.pagination-nav { display: flex; gap: 1rem; margin-top: 1rem; align-items: baseline; }
.pagination-info { color: var(--clr-text-muted); font-size: 0.85rem; }

.version-entry { margin: 1rem 0; padding: 1rem 1.25rem; scroll-margin-top: calc(var(--header-height) + 0.75rem); }
.version-entry[data-latest] { border-color: var(--clr-link); }
/* Changelog nested in a version card: alt surface so it stays distinct */
.version-entry .mod-readme { background: var(--clr-surface-alt); margin-top: 0.6rem; }

/* One header row instead of three stacked ones — identity (version number, badges,
   date, scan status) on the left, Download anchored to the right via space-between.
   Crew feedback (Oriana/bwoebi, 2026-07-23): the old 3-row header made every card too
   thick; date/scan-status belonged on the same line as the version number, and the
   download button reads better pinned right than left-stacked under everything. */
.version-header-row { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 1rem; }
.version-identity { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; min-width: 0; }
.version-number { font-size: 1.15rem; margin: 0; }
.version-anchor-link { color: var(--clr-text-muted); text-decoration: none; margin-right: 0.3rem; font-weight: 400; }
.version-anchor-link:hover { color: var(--clr-link); }
.version-identity .version-date,
.version-identity .version-uploader { font-size: 0.8rem; color: var(--clr-text-muted); }

/* Download group: anchored to the right of the header row on desktop. */
.version-download-group { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; }
.version-download { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.7rem; background: var(--clr-surface-alt); border: 1px solid var(--clr-border); border-radius: var(--radius-small); font-size: 0.85rem; font-weight: 600; text-decoration: none; min-height: 2.1rem; }
.version-download:hover { background: var(--clr-border); text-decoration: none; }
.version-download-count { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; color: var(--clr-text-muted); }
.version-size { font-size: 0.8rem; color: var(--clr-text-muted); }

.version-deps { font-size: 0.88rem; color: var(--clr-text-muted); margin: 0.6rem 0 0; }
.version-deps a { color: var(--clr-link); }

/* Moderator-only controls: tucked behind <details> so regular visitors never see admin chrome */
.scan-findings-table { overflow-x: auto; display: block; }
.version-mod-controls { margin-top: 0.75rem; padding-top: 0.6rem; border-top: 1px dashed var(--clr-border); }
.version-mod-controls summary { cursor: pointer; font-size: 0.8rem; color: var(--clr-text-muted); }
.version-mod-controls-body { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.version-mod-comments { list-style: none; margin: 0; padding: 0; flex: 1 0 100%; }
.version-mod-comments li { padding: 0.4rem 0; border-bottom: 1px solid var(--clr-border); }
.version-mod-comments li:last-child { border-bottom: none; }
.version-mod-comment-meta { font-size: 0.75rem; color: var(--clr-text-muted); }
.version-mod-comment-body { white-space: pre-wrap; }
.version-mod-controls-body form:has(textarea) { flex: 1 0 100%; display: flex; gap: 0.5rem; }
.version-mod-controls-body textarea { flex: 1; box-sizing: border-box; resize: vertical; }
.version-mod-comments-full-line { width: 100%; }

@media (max-width: 640px) {
	.version-entry { padding: 0.85rem 1rem; }
	.version-number { font-size: 1.05rem; }
	/* Identity and the download group each take the full width and stack — the
	   side-by-side anchored layout only makes sense once there's room for both. */
	.version-identity,
	.version-download-group { flex-basis: 100%; }
	.version-download-group .version-download { flex: 1 1 auto; justify-content: center; }
}

.upload-instructions { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-small); padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.9rem; color: var(--clr-text-muted); }
.upload-form { display: flex; flex-direction: column; gap: 1rem; }
.upload-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; min-height: 200px; border: 2px dashed var(--clr-border); border-radius: var(--radius-large); background: var(--clr-surface); color: var(--clr-text-muted); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; padding: 2rem; text-align: center; }
.upload-dropzone:hover, .upload-dropzone.drag-over { border-color: var(--clr-link); background: color-mix(in srgb, var(--clr-link) 6%, var(--clr-surface)); color: var(--clr-text); }
.upload-dropzone-primary { font-size: 1.05rem; font-weight: 500; }
.upload-dropzone-hint { font-size: 0.82rem; }

.mod-desc-tags { margin-top: 0.75rem; }

.source-url-dialog-body { padding: 1rem 1.25rem 0.75rem; }
.source-url-dialog-form input[type=url] { width: 100%; box-sizing: border-box; }
.source-url-hint { font-size: 0.8rem; color: var(--clr-text-muted); margin-top: 0.5rem; }
.inline-hint { font-size: 0.8rem; color: var(--clr-text-muted); }

.readme-gallery-details { margin-bottom: 1rem; }
.readme-gallery-details > summary { cursor: pointer; font-weight: 600; margin-bottom: 0.5rem; }
.readme-gallery-details .gallery-thumb { cursor: pointer; }
.readme-edit-form { display: flex; flex-direction: column; gap: 0.75rem; }
.readme-upload-progress { height: 6px; border-radius: 3px; background: var(--clr-surface-alt); overflow: hidden; }
.readme-upload-progress-bar { height: 100%; width: 0; background: var(--clr-link); transition: width 0.15s ease; }
.readme-editor { font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; font-size: 0.875rem; min-height: 500px; }
.readme-edit-actions { display: flex; gap: 0.5rem; align-items: center; }
.readme-edit-toolbar { display: flex; align-items: center; gap: 0.6rem; }
.readme-toggle-btn { font-size: 0.85rem; padding: 0.3rem 0.7rem; }
#readme-preview.fmt-preview { min-height: 500px; }

.rank-table-icon { width: 1.4em; height: 1.4em; vertical-align: middle; }

.rank-icons-grid { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.75rem; margin-bottom: 1.5rem; }
.rank-icon-card { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.5rem 0.75rem; min-width: 80px; text-align: center; }
.rank-icon-card--active { background: color-mix(in srgb, var(--clr-link) 8%, transparent); border: 1px solid color-mix(in srgb, var(--clr-link) 35%, transparent); border-radius: var(--radius-large); }
.rank-icon-card-img { width: 48px; height: 48px; }
.rank-icon-card strong { font-size: 0.85rem; }
.rank-icon-card span { font-size: 0.78rem; color: var(--clr-text-muted); }

.rank-progress-bar-wrap { margin-top: 0.5rem; height: 8px; background: var(--clr-border); border-radius: 999px; max-width: 400px; overflow: hidden; }
.rank-progress-bar { height: 100%; background: var(--clr-link); border-radius: 999px; transition: width 0.3s ease; }

.author-rank-icon { width: 1.3em; height: 1.3em; vertical-align: middle; margin-left: 0.3em; }

.user-points { font-size: 0.78rem; font-weight: 600; color: var(--clr-header-link); background: linear-gradient(
		to right,
		rgba(255,255,255,0.18) var(--rank-progress, 0%),
		rgba(255,255,255,0.06) var(--rank-progress, 0%)
	); border: 1px solid rgba(255,255,255,0.12); border-radius: 999px; padding: 0.1rem 0.55rem; white-space: nowrap; text-decoration: none; }
.user-points:hover { color: var(--clr-header-link-hover); text-decoration: none; }

.user-mods-link { display: flex; align-items: center; gap: 0.5rem; color: inherit; text-decoration: none; }
.user-mods-link:hover { color: var(--clr-header-link-hover); text-decoration: none; }
.user-mods-link:hover .user-name { text-decoration: underline; }

.settings-link { display: inline-flex; align-items: center; color: var(--clr-header-link); opacity: 0.7; transition: opacity 0.15s; text-decoration: none; vertical-align: middle; }
.settings-link:hover { opacity: 1; color: var(--clr-header-link-hover); }

.notice { border-radius: var(--radius-small); padding: 0.75rem 1rem; margin: 0 0 1rem; font-size: 0.9rem; line-height: 1.5; }
.notice-warning { background: var(--clr-warning-bg); border: 1px solid var(--clr-warning-border); color: var(--clr-warning); }
.notice-info { background: var(--clr-surface-alt); border: 1px solid var(--clr-border); color: var(--clr-text-muted); }
.notice-success { background: var(--clr-success-bg); border: 1px solid var(--clr-success-border); color: var(--clr-success); }

.page-card { padding: 1.25rem 1.5rem; margin-bottom: 1rem; }
.page-card h2 { font-size: 1rem; font-weight: 700; margin-bottom: 0.9rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--clr-border); color: var(--clr-text); }
.page-card.page-card--danger { border-color: var(--clr-danger-border); background: var(--clr-danger-bg); }
.page-card.page-card--danger h2 { border-color: var(--clr-danger-border); color: var(--clr-danger); }

.team-banner { width: 100%; max-width: 1000px; aspect-ratio: 1000 / 250; border-radius: var(--radius-large); overflow: hidden; margin-bottom: 0.75rem; }
.team-banner-img { display: block; width: 100%; height: 100%; object-fit: cover; }

.team-achievements { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.team-achievement { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-radius: var(--radius-small); background: var(--clr-bg); border: 1px solid var(--clr-border); opacity: 0.5; filter: grayscale(1); }
.team-achievement--unlocked { opacity: 1; filter: none; border-color: var(--clr-link); }
.team-achievement-icon { font-size: 1.4rem; line-height: 1; }
.team-achievement-text { display: flex; flex-direction: column; }
.team-achievement-title { font-size: 0.92rem; }
.team-achievement-desc { font-size: 0.82rem; color: var(--clr-text-muted); }

/* Pinned achievements: a single row of small chips right below the team name/banner —
   icon + title only, full description is a native title-attribute tooltip on hover. */
.team-pinned-achievements { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.team-pinned-achievement { display: inline-flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.4rem 0.6rem; border-radius: var(--radius-small); background: var(--clr-surface); border: 1px solid var(--clr-link); font-size: 0.78rem; font-weight: 600; text-align: center; cursor: default; }
.team-pinned-achievement-icon { font-size: 1.3rem; line-height: 1; }

.status-pill { display: inline-block; padding: 0.12rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.status-pill--approved { color: var(--clr-success); background: var(--clr-success-bg); border: 1px solid var(--clr-success-border); }
.status-pill--rejected { color: var(--clr-danger); background: var(--clr-danger-bg); border: 1px solid var(--clr-danger-border); }
.status-pill--pending { color: var(--clr-warning); background: var(--clr-warning-bg); border: 1px solid var(--clr-warning-border); }

.request-icon-thumb { display: block; width: 2.75rem; height: 2.75rem; object-fit: cover; border-radius: var(--radius-small); border: 1px solid var(--clr-border); }
.request-slug-input { width: 9rem; padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.request-edit-input { width: 100%; min-width: 10rem; padding: 0.35rem 0.5rem; font-size: 0.85rem; font-weight: 600; }
.request-edit-desc { width: 100%; min-width: 14rem; padding: 0.35rem 0.5rem; font-size: 0.85rem; }
.tag-request-actions { flex-wrap: wrap; }
.tag-request-actions form { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

/* Tables that restack into cards on phones: each row becomes a bordered card, each cell a
 * label/value pair from its data-label attribute. Opt-in via the class — other wide tables
 * keep the site-wide horizontal-scroll fallback. */
@media (max-width: 768px) {
	table.stacked-mobile { display: block; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
	table.stacked-mobile thead { display: none; }
	table.stacked-mobile tbody { display: flex; flex-direction: column; gap: 0.6rem; }
	table.stacked-mobile tr { display: block; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-large); padding: 0.6rem 0.8rem; box-shadow: var(--shadow-sm); }
	table.stacked-mobile td { display: block; border: none; padding: 0.3rem 0; }
	table.stacked-mobile td:empty { display: none; }
	table.stacked-mobile td[data-label]::before { content: attr(data-label); display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--clr-text-muted); margin-bottom: 0.15rem; }
	table.stacked-mobile .request-slug-input { flex: 1; min-width: 8rem; }
	table.stacked-mobile .tag-reject-reason { flex: 1; min-width: 8rem; width: auto; }
}

.teams-list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; padding: 0; }
.teams-list a { display: inline-block; padding: 0.25rem 0.75rem; border: 1px solid var(--clr-border); border-radius: var(--radius-small); background: var(--clr-surface-alt); font-size: 0.875rem; font-weight: 500; color: var(--clr-text); text-decoration: none; transition: border-color 0.12s, background 0.12s; }
.teams-list a:hover { border-color: var(--clr-link); color: var(--clr-link); background: color-mix(in srgb, var(--clr-link) 6%, var(--clr-surface)); }

.teams-member-list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; padding: 0; }
.teams-member-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.75rem; background: var(--clr-surface-alt); border: 1px solid var(--clr-border); border-radius: var(--radius-small); font-size: 0.9rem; }
.teams-member-item span,
.teams-member-item a { font-weight: 500; }
.team-master-badge { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; background: color-mix(in srgb, var(--clr-link) 12%, transparent); color: var(--clr-link); border-radius: var(--radius-small); padding: 0.1rem 0.45rem; }
.teams-member-item form { margin-left: auto; }
.teams-member-item form + form { margin-left: 0; }
.team-donation-link { margin-bottom: 0.5rem; font-size: 0.9rem; }

.settings-form { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 0.5rem 1rem; margin-top: 0.75rem; }
.settings-form label { font-weight: 500; white-space: nowrap; display: inline; }
.settings-form input { max-width: 200px; }
.settings-form label small { font-weight: 400; color: var(--clr-text-muted); display: block; }
.settings-form input[type="hidden"] { display: none; }
.settings-form .settings-form-actions { grid-column: 2; margin-top: 0.25rem; }
.inline-form { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.6rem; margin-top: 0.75rem; }
.inline-form label { font-weight: 500; }
.inline-form input[type="hidden"] { display: none; }
.simple-form { margin-top: 0.75rem; }
.simple-form label { display: block; font-weight: 500; margin-bottom: 0.3rem; }
.simple-form input { display: block; margin-bottom: 0.5rem; }
.simple-form p { margin: 0.4rem 0 0.6rem; font-size: 0.85rem; color: var(--clr-text-muted); }
.simple-form input[type="hidden"] { display: none; }
.notification-prefs label { display: block; margin-bottom: 0.35rem; }
.notif-table { border-collapse: collapse; margin-top: 0.25rem; }
.notif-table th { font-weight: 600; padding: 0.2rem 0.75rem 0.4rem; text-align: center; }
.notif-table th:first-child { text-align: left; }
.notif-table td { padding: 0.25rem 0.75rem; vertical-align: middle; }
.notif-table td:not(:first-child) { text-align: center; }

.upload-password-label { display: block; font-weight: 500; margin-top: 1rem; margin-bottom: 0.25rem; }
.upload-password-input { width: 100%; max-width: 320px; }
.upload-fun-question label { display: block; font-weight: 500; margin-bottom: 0.25rem; font-style: italic; }
.upload-fun-question input { width: 100%; }
.upload-fun-question input::placeholder { font-size: 0.8rem; }

.submit-tabs { display: flex; gap: 0.35rem; margin: 0.75rem 0 1rem; border-bottom: 1px solid var(--clr-border); }
.submit-tab { padding: 0.45rem 1rem; background: none; border: 1px solid transparent; border-bottom: none; border-radius: var(--radius-small) var(--radius-small) 0 0; color: var(--clr-text-muted); cursor: pointer; font-size: 0.95rem; margin-bottom: -1px; }
.submit-tab--active { background: var(--clr-surface); border-color: var(--clr-border); color: inherit; font-weight: 600; }
/* Solid card behind both submit forms so the animated background stays behind
   the content instead of seeping through the form. */
.submit-tab-panel { padding: 1.25rem 1.5rem; }
.submit-tab-panel .upload-instructions { background: var(--clr-surface-alt); }

.upload-form .builder-hint {
	font-size: 0.8rem;
	color: var(--clr-text-muted);
	/*margin-top: -0.75rem;*/
}
.dep-picker { margin-top: -0.5rem; }
.dep-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.4rem; }
.dep-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.55rem; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-small); font-size: 0.85rem; font-family: monospace; }
.dep-chip-remove { background: none; border: none; color: var(--clr-text-muted); cursor: pointer; padding: 0 0.15rem; font-size: 1rem; line-height: 1; }
.dep-chip-remove:hover { color: var(--clr-danger, #e05555); }
.dep-search-wrap { position: relative; max-width: 420px; }
.dep-search-wrap input { width: 100%; }
.dep-search-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-small); overflow: hidden; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.dep-search-result { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; width: 100%; padding: 0.4rem 0.6rem; background: none; border: none; text-align: left; cursor: pointer; font-family: monospace; font-size: 0.85rem; }
.dep-search-result:hover { background: var(--clr-bg); }
.dep-search-result-version { color: var(--clr-text-muted); font-size: 0.8rem; }

.builder-label-optional { font-weight: normal; font-size: 0.85em; color: var(--clr-text-muted); }
.extra-dropzone { min-height: 90px; }
.extra-files-list { display: flex; flex-direction: column; gap: 0.4rem; }
.extra-file-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; align-items: center; gap: 0.5rem; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-small); padding: 0.35rem 0.6rem; }
.extra-file-name { font-size: 0.85rem; color: var(--clr-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.extra-file-row input[type=text] { font-size: 0.85rem; }
.extra-file-remove { background: none; border: none; cursor: pointer; color: var(--clr-text-muted); font-size: 1rem; padding: 0 0.1rem; line-height: 1; flex-shrink: 0; }
.extra-file-remove:hover { color: var(--clr-danger, #e05555); }

.page-card--highlight { border-left: 3px solid var(--clr-link); }


.nav-toggle { display: none; position: relative; flex-shrink: 0; background: transparent; border: 1px solid rgba(255,255,255,0.2); color: var(--clr-header-link); padding: 0.3rem 0.45rem; border-radius: var(--radius-small); line-height: 0; }
.nav-toggle:hover { background: rgba(255,255,255,0.1); color: var(--clr-header-link-hover); border-color: rgba(255,255,255,0.35); }
.nav-toggle.has-notifications::after { content: ''; position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--clr-notification); border: 1px solid var(--clr-header-bg); }

@media (max-width: 900px) {
	#site-header { gap: 0.6rem; padding: 0 0.5rem; }
	.nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
	#site-header .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0.15rem; background: var(--clr-header-bg); padding: 0.5rem 0.75rem 0.9rem; border-top: 1px solid rgba(255,255,255,0.08); box-shadow: var(--shadow-md); max-height: calc(100vh - var(--header-height)); max-height: calc(100dvh - var(--header-height)); overflow-y: auto; }
	#site-header.nav-open .site-nav { display: flex; }
	#site-header .site-nav a { font-size: 1rem; padding: 0.6rem 0.75rem; }
	#site-header .site-nav > * { margin: 0; }
	#site-header .user-info { gap: 0.45rem; }
}

@media (max-width: 620px) {
	#site-header .user-info .user-name { display: none; }
}
@media (max-width: 420px) {
	#site-header .site-logo { gap: .2rem; font-size: 1rem; }
	#site-header .user-points { display: none; }
}

@media (max-width: 768px) {
	main { padding: 1rem 0.75rem 2px; }

	h1 { font-size: 1.35rem; overflow-wrap: anywhere; }

	/* 16px inputs prevent iOS zoom-on-focus */
	input[type=text],
	input[type=url],
	input[type=search],
	input[type=file],
	select,
	textarea { font-size: 16px; }

	/* clamp inputs with inline widths (e.g. width:20rem) to the viewport */
	input[type=text],
	input[type=url],
	input[type=search] { max-width: 100%; }

	/* wide tables scroll inside their own box instead of stretching the page */
	.user-list,
	.audit-log,
	.tag-request-list,
	.notif-table,
	.points-criteria-table,
	.points-ranks-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

	.mod-title-row { gap: 0.35rem 0.5rem; }

	/* Actions collapse to: Download + Install side by side (equal width, easy tap
	   targets), then the reference-link line drops to its own row below instead of
	   wrapping into the buttons — mixing button chrome and dot-separated text in one
	   wrapping line is what made this look messy on narrow screens. */
	.mod-actions { gap: 0.6rem; }
	.mod-actions a.mod-download-btn { flex: 1 1 calc(50% - 0.3rem); justify-content: center; }
	.mod-action-links { flex-basis: 100%; row-gap: 0.5rem; font-size: 0.9rem; }

	/* search / filter bar stacks */
	.mod-search-bar { flex-direction: column; align-items: stretch; }
	.mod-search-form { padding: 0.6rem 0.75rem; }
	.mod-search-form input[type=search] { flex-basis: 100%; }
	.submit-mod-btn { justify-content: center; }

	.sort-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.sort-bar-label,
	.sort-bar-option { white-space: nowrap; }

	/* active-filter summary drops below the tabs, left-aligned */
	.tabs-filters { margin-left: 0; flex-basis: 100%; }

	/* settings form collapses to one column */
	.settings-form { grid-template-columns: 1fr; }
	.settings-form label { white-space: normal; }
	.settings-form input { max-width: 100%; }
	.settings-form .settings-form-actions { grid-column: 1; }

	/* post controls drop below the author line instead of squeezing right */
	.post-controls { margin-left: 0; width: 100%; }

	.mod-readme { padding: 0.9rem; }
	.readme-editor { min-height: 320px; }

	.upload-dropzone { min-height: 150px; padding: 1.25rem; }

	#lightbox-prev, #lightbox-next { font-size: 2.6rem; padding: 0 0.75rem; }
}

@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; }
}

@media (pointer: coarse) {
	button:not(.tag-remove-btn):not(.star-btn):not(.no-button-background):not(.gallery-delete-btn):not(.source-url-edit-btn) { min-height: 40px; }
	.mod-cog-menu > summary { width: 2.25rem; height: 2.25rem; }
	/* no hover on touch — keep gallery delete buttons visible */
	.gallery-item .gallery-delete-btn { display: flex; }
}

.faq-controls { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; }
.faq-list { display: flex; flex-direction: column; gap: 0.5rem; }
.faq-item { overflow: hidden; }
.faq-question { display: flex; align-items: center; gap: 0.5rem; padding: 0.9rem 1.25rem; font-weight: 600; font-size: 1rem; cursor: pointer; list-style: none; user-select: none; }
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after { content: ''; display: inline-block; margin-left: auto; width: 0.55em; height: 0.55em; border-right: 2px solid var(--clr-text-muted); border-bottom: 2px solid var(--clr-text-muted); transform: rotate(45deg); transition: transform 0.15s; flex-shrink: 0; }
.faq-item[open] > .faq-question::after { transform: rotate(-135deg); }
.faq-item[open] > .faq-question { border-bottom: 1px solid var(--clr-border); }
.faq-anchor { font-weight: 400; font-size: 0.85em; color: var(--clr-text-muted); text-decoration: none; flex-shrink: 0; }
.faq-anchor:hover { color: var(--clr-link); }
.faq-answer { padding: 1rem 1.25rem; }
.faq-answer p { margin: 0 0 0.75rem; line-height: 1.65; }
.faq-answer p:last-child { margin-bottom: 0; }


.code-block-wrap { position: relative; margin: 0.75em 0; }
.mod-readme pre, .post-body pre { margin: 0; }
.code-actions { position: absolute; top: 0.35rem; right: 0.35rem; display: flex; gap: 0.2rem; opacity: 0; transition: opacity 0.15s; z-index: 1; }
.code-block-wrap:hover .code-actions { opacity: 1; }
.code-action-btn { display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; padding: 0; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-small); color: var(--clr-text-muted); cursor: pointer; transition: color 0.1s, background 0.1s; }
.code-action-btn:hover { color: var(--clr-text); background: color-mix(in srgb, var(--clr-border) 40%, var(--clr-surface)); }
.code-action-btn svg { width: 0.85rem; height: 0.85rem; pointer-events: none; }

.scheme-toggle { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.scheme-btn { display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.85rem; background: var(--clr-surface-alt); border: 1px solid var(--clr-border); border-radius: var(--radius-small); color: var(--clr-text-muted); cursor: pointer; font-size: 0.875rem; transition: color 0.1s, border-color 0.1s, background 0.1s; }
.scheme-btn:hover { color: var(--clr-text); border-color: var(--clr-link); }
.scheme-btn--active { color: var(--clr-link); border-color: var(--clr-link); background: color-mix(in srgb, var(--clr-link) 10%, var(--clr-surface)); }
.scheme-btn svg { width: 1rem; height: 1rem; flex-shrink: 0; }

.version-download--unobf { background: var(--clr-warning-bg); color: var(--clr-warning); border: 1px solid var(--clr-warning-border); }
.mod-hidden-banner { background: var(--clr-danger-bg); border: 1px solid var(--clr-danger-border); color: var(--clr-danger); border-radius: var(--radius-small); padding: 0.8rem 1rem; margin-bottom: 1rem; line-height: 1.5; }
.mod-hidden-banner a { color: var(--clr-danger); text-decoration: underline; }

.bulk-files-list { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0; }
.bulk-file-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.4rem 0.6rem; border: 1px solid var(--clr-border); border-radius: var(--radius-small); background: var(--clr-surface); }
.bulk-file-name { font-weight: 600; flex: 1; min-width: 8rem; word-break: break-all; }
.bulk-install { flex-shrink: 0; }
.bulk-file-status { font-size: 0.85rem; color: var(--clr-text-muted); min-width: 7rem; }
.bulk-file-status--busy, .bulk-file-status--wait { color: var(--clr-link); }
.bulk-file-status--ok { color: var(--clr-success); }
.bulk-file-status--err { color: var(--clr-danger); }
.bulk-progress { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0; flex-wrap: wrap; }
.bulk-progress progress { width: 16rem; max-width: 100%; height: 0.9rem; }
.bulk-progress-status { font-size: 0.9rem; color: var(--clr-text); }
.upload-submit-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.upload-submit-row .bulk-progress { margin: 0; }

/* Full-bleed band: without an opaque surface the fixed hex canvas shows through the footer. */
.site-footer { margin-top: 3rem; background: var(--clr-surface); border-top: 1px solid var(--clr-border); font-size: 0.9rem; }
.site-footer-inner { max-width: var(--content-width); margin: 0 auto; padding: 2rem 1.25rem 1.5rem; }
html.full-width .site-footer-inner { max-width: none; }

.site-footer-cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 1.5rem 2rem; }
.site-footer-brand p { margin: 0.5rem 0 0.75rem; color: var(--clr-text-muted); max-width: 30ch; }
.site-footer-logo { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; font-size: 1rem; color: var(--clr-text); }
.site-footer-logo:hover { color: var(--clr-link); }
.site-footer-social { display: flex; gap: 0.9rem; }

.site-footer-col { display: flex; flex-direction: column; gap: 0.4rem; }
.site-footer-col h2 { margin: 0 0 0.2rem; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clr-text-muted); }
.site-footer a { color: var(--clr-text-muted); }
.site-footer a:hover { color: var(--clr-link); }
.site-footer-logo img { display: block; border-radius: var(--radius-small); }

.site-footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--clr-border); color: var(--clr-text-muted); font-size: 0.82rem; }

@media (max-width: 700px) {
	.site-footer-cols { grid-template-columns: 1fr 1fr; }
	.site-footer-brand { grid-column: 1 / -1; }
}
/* One column on phones: a short list beside a long one leaves a gap under the short one. */
@media (max-width: 480px) {
	.site-footer-cols { grid-template-columns: 1fr; gap: 1.25rem; }
}

.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; }

/* Readable by screen readers and crawlers, takes no space on the page. */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }