/*
 * Content Warnings – stylesheet
 *
 * Works with prosilver and prosilver-based styles, light or dark, without
 * knowing their colours:
 *
 *  - Every badge brings its own fill colour (--cw-bg) and a text colour
 *    (--cw-fg) that the server picks for maximum contrast (WCAG, >= 4.58:1).
 *    The label is therefore readable on any style.
 *  - The badge element itself keeps the inherited text colour of the style.
 *    That colour contrasts with the page background by definition, so a thin
 *    ring in currentColor separates the badge from light and dark backgrounds
 *    alike. Only the badge's children switch to --cw-fg.
 *  - Notices use currentColor tints instead of fixed background colours.
 */

/* ------------------------------------------------------------------------
 * Badges
 * ------------------------------------------------------------------------ */

.cw-badges .cw-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0.15em 0.25em 0.15em 0;
	padding: 0.15em 0.6em;
	border: 0;
	border-radius: 1em;
	background-color: var(--cw-bg, #6b7280);
	background-image: none;
	box-shadow: 0 0 0 1px rgba(128, 128, 128, 0.65);
	font-weight: bold;
	font-style: normal;
	line-height: 1.3;
	text-decoration: none;
	text-transform: none;
	vertical-align: middle;
	white-space: nowrap;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.cw-badges .cw-badge {
		box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 60%, transparent);
	}
}

.cw-badges .cw-badge > * {
	color: var(--cw-fg, #ffffff);
	text-decoration: none;
}

.cw-badges .cw-badge .icon {
	font-size: 1.05em;
	line-height: 1;
}

.cw-badges .cw-badge-label {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Linked badges (topic lists, topic) lead to the legend */
.cw-badges a.cw-badge:hover,
.cw-badges a.cw-badge:focus {
	text-decoration: none;
	filter: brightness(1.12) saturate(1.1);
}

.cw-badges a.cw-badge:hover {
	box-shadow: 0 0 0 2px currentColor;
}

.cw-badges a.cw-badge:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Icon-only mode (ACP setting) keeps the name for screen readers and tooltips */
.cw-badges--compact .cw-badge {
	padding: 0.2em 0.35em;
}

.cw-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ------------------------------------------------------------------------
 * Topic lists (viewforum, search results, MCP)
 * ------------------------------------------------------------------------ */

.cw-badges--list {
	font-size: 0.9em;
}

/*
 * prosilver places a <br> between the topic title and the
 * topiclist_row_topic_title_after event. Where :has() is supported, hide
 * exactly that line break so the badges sit right next to the title, and
 * break the line after the badges instead. Older browsers simply show the
 * badges on the line below the title.
 */
@supports selector(br:has(+ *)) {
	br:has(+ .cw-badges--list) {
		display: none;
	}

	.cw-badges--list {
		margin-left: 0.35em;
	}

	.cw-badges--list::after {
		content: "\A";
		white-space: pre;
	}
}

/* ------------------------------------------------------------------------
 * Topic (viewtopic)
 * ------------------------------------------------------------------------ */

.cw-topic-warnings {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3em 0.4em;
	margin: 0.2em 0 0.8em;
	font-size: 1.1em;
}

.cw-topic-warnings .cw-badges .cw-badge {
	margin: 0.1em 0.35em 0.1em 0;
}

.cw-topic-warnings-label {
	font-weight: bold;
}

/* ------------------------------------------------------------------------
 * Notices (hidden topics in a list, filtered topic opened directly)
 * ------------------------------------------------------------------------ */

.cw-notice {
	margin: 0.6em 0;
	padding: 0.5em 0.8em;
	border: 1px solid rgba(128, 128, 128, 0.5);
	border-left-width: 4px;
	border-radius: 4px;
	font-size: 1.1em;
	line-height: 1.5;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	.cw-notice {
		border-color: color-mix(in srgb, currentColor 30%, transparent);
		border-left-color: color-mix(in srgb, currentColor 70%, transparent);
		background-color: color-mix(in srgb, currentColor 6%, transparent);
	}
}

.cw-notice .icon {
	margin-right: 0.2em;
}

/* ------------------------------------------------------------------------
 * Choosing categories (posting form, UCP)
 * ------------------------------------------------------------------------ */

.cw-select {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em 1em;
	margin: 0.2em 0 0.4em;
}

.cw-choice {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	cursor: pointer;
}

.cw-choice input {
	margin: 0;
	flex-shrink: 0;
}

.cw-badges .cw-choice .cw-badge {
	margin: 0;
	transition: filter 0.15s ease;
}

.cw-choice input:focus-visible + .cw-badge {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Posting form: unchecked categories are muted (luminance and thus contrast is kept) */
.cw-select .cw-choice input:not(:checked) + .cw-badge {
	filter: saturate(0.25);
}

.cw-select .cw-choice input:checked + .cw-badge {
	box-shadow: 0 0 0 2px currentColor;
}

.cw-help {
	margin-top: 0.3em;
	opacity: 0.85;
}

/* UCP list: one category per row with its explanation */
.cw-filter-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cw-filter-list > li {
	padding: 0.6em 0;
	border-bottom: 1px solid rgba(128, 128, 128, 0.25);
}

.cw-filter-list > li:last-child {
	border-bottom: 0;
}

.cw-filter-list .cw-description {
	margin: 0.3em 0 0 1.9em;
}

/* ------------------------------------------------------------------------
 * Legend page
 * ------------------------------------------------------------------------ */

.cw-legend {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cw-legend-item {
	display: grid;
	grid-template-columns: minmax(10em, 16em) 1fr;
	gap: 0.4em 1.2em;
	align-items: start;
	padding: 0.8em 0.4em;
	border-bottom: 1px solid rgba(128, 128, 128, 0.25);
	scroll-margin-top: 4em;
}

.cw-legend-item:last-child {
	border-bottom: 0;
}

/* Jumped to via a badge link */
.cw-legend-item:target {
	border-radius: 6px;
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

.cw-legend-item .cw-badge {
	margin: 0;
	white-space: normal;
}

.cw-description {
	font-size: 1.1em;
	line-height: 1.5;
}

@media (max-width: 700px) {
	.cw-legend-item {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------------
 * Accessibility & print
 * ------------------------------------------------------------------------ */

/* Windows high contrast etc.: system colours replace ours, keep a border */
@media (forced-colors: active) {
	.cw-badges .cw-badge {
		border: 1px solid CanvasText;
		box-shadow: none;
	}
}

@media print {
	.cw-badges .cw-badge {
		border: 1px solid #000000;
		background: none !important;
		box-shadow: none;
	}

	.cw-badges .cw-badge > * {
		color: #000000 !important;
	}
}