/*-------------------------------------------------------------------------*/
/* Forum module
/*-------------------------------------------------------------------------*/
/* Theme adaptation works the same way the bugtracker does: every colour is
   read from a `--havoc-*` variable with a neutral fallback, so the module
   inherits the active theme's palette and still looks right on a theme that
   defines none of them.

   A future theme only needs to define those variables (or override the
   `--forum-*` tokens below) to restyle the whole module.               */
/*-------------------------------------------------------------------------*/

/*-------------------------------------------------------------------------*/
/* Tokens
/*-------------------------------------------------------------------------*/
.forum {
	/* Surfaces */
	--forum-surface:       var(--havoc-surface-soft,  rgba(255, 255, 255, 0.025));
	--forum-surface-raise: var(--havoc-surface-hover, rgba(255, 255, 255, 0.05));
	--forum-surface-sunk:  rgba(0, 0, 0, 0.25);

	/* Lines */
	--forum-line:      var(--havoc-border-soft, rgba(255, 255, 255, 0.08));
	--forum-line-hard: var(--havoc-border,      rgba(255, 255, 255, 0.16));

	/* Text */
	--forum-text:     var(--havoc-text,       #a8a48a);
	--forum-muted:    var(--havoc-text-muted, #757364);
	--forum-heading:  var(--havoc-heading,    #eae4b4);
	--forum-emphasis: var(--havoc-emphasis,   #f5e4c6);

	/* Accents */
	--forum-gold:   var(--havoc-gold,        #b4a355);
	--forum-bright: var(--havoc-gold-bright, #f1cd27);
	--forum-focus:  var(--havoc-green-glow,  rgba(116, 229, 68, 0.24));
	--forum-danger: #c05a5a;

	/* Per category / board accent, set inline from the database colour */
	--forum-accent: var(--forum-gold);

	/* Metrics */
	--forum-gap:    1.25rem;
	--forum-pad:    1.25rem;
	--forum-radius: 6px;
}

/*-------------------------------------------------------------------------*/
/* Layout
/*-------------------------------------------------------------------------*/
.forum {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: var(--forum-gap);
	color: var(--forum-text);
	font-size: 0.95rem;
	line-height: 1.6;
}

.forum *,
.forum *::before,
.forum *::after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.forum a {
	color: var(--forum-gold);
	text-decoration: none;
	-webkit-transition: color 200ms ease-in-out;
	transition: color 200ms ease-in-out;
}

.forum a:hover,
.forum a:focus-visible {
	color: var(--forum-bright);
}

.forum .forum-section-title {
	margin: 0 0 0.75rem 0;
	color: var(--forum-heading);
	font-size: 1.2rem;
	font-family: var(--font-family-secondary, inherit);
	text-transform: uppercase;
}

/*-------------------------------------------------------------------------*/
/* Search
/*-------------------------------------------------------------------------*/
.forum .forum-search {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.forum .forum-search input[type='search'] {
	-ms-flex: 1 1 16rem;
	flex: 1 1 16rem;
	min-width: 0;
	padding: 0.7rem 1rem;
	color: var(--forum-emphasis);
	border: 1px solid var(--forum-line);
	background-color: var(--forum-surface-sunk);
	-webkit-border-radius: var(--forum-radius);
	border-radius: var(--forum-radius);
}

.forum .forum-search input[type='search']:focus {
	outline: none;
	border-color: var(--forum-gold);
	-webkit-box-shadow: 0 0 0 0.2rem var(--forum-focus);
	box-shadow: 0 0 0 0.2rem var(--forum-focus);
}

.forum .forum-search-button {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	white-space: nowrap;
}

/*-------------------------------------------------------------------------*/
/* Actions bar
/*-------------------------------------------------------------------------*/
.forum .forum-actions,
.forum .forum-bar {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: justify;
	justify-content: space-between;
	gap: 0.75rem;
}

.forum .forum-actions {
	-ms-flex-pack: end;
	justify-content: flex-end;
}

.forum .forum-breadcrumb {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.9rem;
	text-transform: uppercase;
}

.forum .forum-breadcrumb > * + *::before {
	content: '/';
	margin: 0 0.5rem 0 0;
	color: var(--forum-line-hard);
}

.forum .forum-breadcrumb .is-current {
	color: var(--forum-heading);
}

.forum .forum-back {
	font-size: 0.9rem;
	text-transform: uppercase;
}

/*-------------------------------------------------------------------------*/
/* Category
/*-------------------------------------------------------------------------*/
.forum .forum-category {
	padding: var(--forum-pad);
	border: 1px solid var(--forum-line);
	border-left: 3px solid var(--forum-accent);
	background-color: var(--forum-surface);
	-webkit-border-radius: var(--forum-radius);
	border-radius: var(--forum-radius);
}

.forum .forum-category-head {
	margin: 0 0 var(--forum-pad) 0;
}

.forum .forum-category-title {
	margin: 0;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.6rem;
	color: var(--forum-heading);
	font-size: 1.05rem;
	font-weight: normal;
	font-family: var(--font-family-secondary, inherit);
	text-transform: uppercase;
}

.forum .forum-category-title i {
	color: var(--forum-accent);
}

.forum .forum-category-desc {
	margin: 0.35rem 0 0 0;
	color: var(--forum-muted);
	font-size: 0.875rem;
}

/*-------------------------------------------------------------------------*/
/* Board cards
/*-------------------------------------------------------------------------*/
.forum .forum-board-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: var(--forum-gap);
}

/* Boards without a description pack tighter */
.forum .forum-board-grid:has(.forum-board.is-compact) {
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.forum .forum-board {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: start;
	align-items: flex-start;
	gap: 0.85rem;
	padding: 0.9rem;
	color: var(--forum-text);
	border: 1px solid var(--forum-line);
	background-color: var(--forum-surface-sunk);
	-webkit-border-radius: var(--forum-radius);
	border-radius: var(--forum-radius);
	-webkit-transition: border-color 200ms ease-in-out, background-color 200ms ease-in-out;
	transition: border-color 200ms ease-in-out, background-color 200ms ease-in-out;
}

.forum .forum-board:hover {
	color: var(--forum-text);
	border-color: var(--forum-accent);
	background-color: var(--forum-surface-raise);
}

.forum .forum-board-icon {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: 2.6rem;
	height: 2.6rem;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	color: #fff;
	font-size: 1.05rem;
	background-color: var(--forum-accent);
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

/* Compact (class) boards carry their WoW class colour on the glyph and the
   border rather than as a solid fill: several class colours are near white,
   which would make a white glyph vanish. */
.forum .forum-board.is-compact .forum-board-icon {
	width: 2rem;
	height: 2rem;
	font-size: 0.85rem;
	color: var(--forum-accent);
	border: 1px solid var(--forum-accent);
	background-color: var(--forum-surface-raise);
	-webkit-border-radius: var(--forum-radius);
	border-radius: var(--forum-radius);
}

.forum .forum-board-body {
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
	display: block;
}

.forum .forum-board-name {
	display: block;
	color: var(--forum-heading);
	font-weight: bold;
	font-size: 0.95rem;
	line-height: 1.3;
}

.forum .forum-board-lock {
	margin-left: 0.35rem;
	color: var(--forum-muted);
	font-size: 0.75rem;
}

.forum .forum-board-desc {
	display: block;
	margin: 0.25rem 0 0 0;
	color: var(--forum-muted);
	font-size: 0.82rem;
	line-height: 1.45;
}

.forum .forum-board-meta {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.25rem 0.85rem;
	margin: 0.6rem 0 0 0;
	color: var(--forum-muted);
	font-size: 0.75rem;
}

.forum .forum-board.is-compact .forum-board-meta {
	margin-top: 0.25rem;
	font-size: 0.7rem;
}

.forum .forum-board-last {
	margin-left: auto;
	font-style: italic;
	opacity: 0.85;
}

.forum .forum-stat i {
	margin-right: 0.25rem;
	opacity: 0.7;
}

/*-------------------------------------------------------------------------*/
/* Statistics strip
/*-------------------------------------------------------------------------*/
.forum .forum-stats-bar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--forum-gap);
	padding: var(--forum-pad);
	border: 1px solid var(--forum-line);
	background-color: var(--forum-surface);
	-webkit-border-radius: var(--forum-radius);
	border-radius: var(--forum-radius);
}

.forum .forum-stats-item {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.75rem;
}

.forum .forum-stats-item i {
	color: var(--forum-gold);
	font-size: 1.6rem;
	opacity: 0.8;
}

.forum .forum-stats-value {
	color: var(--forum-heading);
	font-size: 1.4rem;
	font-family: var(--font-family-secondary, inherit);
	line-height: 1;
}

.forum .forum-stats-label {
	color: var(--forum-muted);
	font-size: 0.78rem;
	text-transform: uppercase;
}

/*-------------------------------------------------------------------------*/
/* Topic list
/*-------------------------------------------------------------------------*/
.forum .forum-topic-list {
	border: 1px solid var(--forum-line);
	background-color: var(--forum-surface);
	-webkit-border-radius: var(--forum-radius);
	border-radius: var(--forum-radius);
	overflow: hidden;
}

.forum .forum-topic-head,
.forum .forum-topic-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 5rem 5rem 11rem;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem var(--forum-pad);
}

.forum .forum-topic-head {
	color: var(--forum-heading);
	border-bottom: 1px solid var(--forum-line-hard);
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background-color: rgba(0, 0, 0, 0.2);
}

.forum .forum-topic-row {
	border-bottom: 1px solid var(--forum-line);
	-webkit-transition: background-color 150ms ease-in-out;
	transition: background-color 150ms ease-in-out;
}

.forum .forum-topic-row:last-child {
	border-bottom: none;
}

.forum .forum-topic-row:hover {
	background-color: rgba(180, 163, 85, 0.07);
}

.forum .forum-topic-row.is-pinned {
	background-color: rgba(180, 163, 85, 0.06);
}

.forum .forum-topic-row.is-deleted {
	opacity: 0.55;
}

.forum .forum-topic-head .col-count,
.forum .forum-topic-row .col-count {
	text-align: center;
}

.forum .forum-topic-row .col-topic {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.forum .forum-topic-main {
	min-width: 0;
}

.forum .forum-topic-title {
	display: block;
	color: var(--forum-heading);
	font-weight: bold;
	word-break: break-word;
}

.forum .forum-topic-title i {
	margin-right: 0.25rem;
	color: var(--forum-gold);
	font-size: 0.8rem;
}

.forum .forum-topic-meta {
	margin-top: 0.15rem;
	color: var(--forum-muted);
	font-size: 0.78rem;
}

.forum .forum-topic-row .col-last {
	color: var(--forum-muted);
	font-size: 0.78rem;
	text-align: right;
}

.forum .forum-last-author,
.forum .forum-last-date {
	display: block;
}

.forum .forum-avatar {
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--forum-line-hard);
	object-fit: cover;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

/*-------------------------------------------------------------------------*/
/* Rank badge
/*-------------------------------------------------------------------------*/
.forum .forum-rank {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border: 1px solid currentColor;
	color: var(--forum-muted);
	font-size: 0.68rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	-webkit-border-radius: 999px;
	border-radius: 999px;
}

/*-------------------------------------------------------------------------*/
/* Topic view
/*-------------------------------------------------------------------------*/
.forum .forum-topic-header {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: baseline;
	align-items: baseline;
	-ms-flex-pack: justify;
	justify-content: space-between;
	gap: 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--forum-line);
}

.forum .forum-topic-heading {
	margin: 0;
	color: var(--forum-heading);
	font-size: 1.5rem;
	font-weight: normal;
	font-family: var(--font-family-secondary, inherit);
	line-height: 1.3;
	word-break: break-word;
}

.forum .forum-topic-substats {
	display: -ms-flexbox;
	display: flex;
	gap: 1rem;
	color: var(--forum-muted);
	font-size: 0.82rem;
	white-space: nowrap;
}

/*-------------------------------------------------------------------------*/
/* Posts
/*-------------------------------------------------------------------------*/
.forum .forum-posts {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: var(--forum-gap);
}

.forum .forum-post {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: var(--forum-gap);
	padding: var(--forum-pad);
	border: 1px solid var(--forum-line);
	background-color: var(--forum-surface);
	-webkit-border-radius: var(--forum-radius);
	border-radius: var(--forum-radius);
}

.forum .forum-post.is-first {
	border-left: 3px solid var(--forum-gold);
}

.forum .forum-post.is-deleted {
	opacity: 0.6;
}

.forum .forum-post-author {
	-ms-flex: 0 0 10rem;
	flex: 0 0 10rem;
	min-width: 0;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.5rem;
	text-align: center;
}

.forum .forum-post-avatar img {
	width: 4.5rem;
	height: 4.5rem;
	display: block;
	border: 2px solid var(--forum-line-hard);
	object-fit: cover;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}

.forum .forum-post-name {
	color: var(--forum-heading);
	font-weight: bold;
	word-break: break-word;
}

/*-------------------------------------------------------------------------*/
/* Author counters
/*-------------------------------------------------------------------------*/
/* A two column definition list: label left, value right. Using <dl> rather
   than a table keeps it readable when the sidebar drops below the post on a
   narrow screen.

   The value column is sized to its own content and never wraps, the label
   column takes whatever is left and wraps as needed. It has to be that way
   round: a label is a translated sentence of unknown length ("Valoración de
   intercambios" is two and a half times "Trade rating"), while a value is a
   short number. Sizing the label column to its content instead - which is what
   `auto` plus `white-space: nowrap` did - let a long translation eat the whole
   sidebar and squeeze every value into a one character wide column.        */
.forum .forum-author-stats {
	display: -ms-grid;
	display: grid;
	-ms-grid-columns: minmax(0, 1fr) auto;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0.15rem 0.5rem;
	width: 100%;
	margin: 0.35rem 0 0;
	padding-top: 0.6rem;
	border-top: 1px solid var(--forum-line);
	font-size: 0.72rem;
	line-height: 1.5;
	text-align: left;
}

.forum .forum-author-stats dt {
	margin: 0;
	min-width: 0;
	color: var(--forum-muted);
	font-weight: normal;
	overflow-wrap: break-word;
	word-wrap: break-word;
}

.forum .forum-author-stats dd {
	margin: 0;
	min-width: 0;
	color: var(--forum-text);
	text-align: right;
	white-space: nowrap;
}

.forum .forum-author-stats dd.is-strong {
	color: var(--forum-emphasis);
	font-weight: bold;
}

.forum .forum-stat-given {
	color: var(--forum-bright);
}

.forum .forum-stat-received {
	color: var(--forum-gold);
}

.forum .forum-stat-sep {
	color: var(--forum-muted);
	padding: 0 0.1rem;
}

.forum .forum-stat-percent {
	color: var(--forum-muted);
}

.forum .forum-post-main {
	-ms-flex: 1 1 18rem;
	flex: 1 1 18rem;
	min-width: 0;
	/* A column so the social bar can be pushed to the bottom of the post
	   rather than sitting directly under a short message. The author sidebar
	   is usually the taller of the two, and this fills the gap.          */
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
}

.forum .forum-post-head {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: justify;
	justify-content: space-between;
	gap: 0.5rem;
	padding-bottom: 0.6rem;
	margin-bottom: 0.85rem;
	border-bottom: 1px solid var(--forum-line);
	color: var(--forum-muted);
	font-size: 0.78rem;
}

.forum .forum-post-tools {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.75rem;
}

.forum .forum-tool-form {
	display: inline;
}

.forum .forum-tool {
	padding: 0;
	color: var(--forum-muted);
	border: none;
	cursor: pointer;
	font-size: 0.78rem;
	background: none;
	-webkit-transition: color 200ms ease-in-out;
	transition: color 200ms ease-in-out;
}

.forum .forum-tool:hover {
	color: var(--forum-bright);
}

.forum .forum-tool.is-danger:hover {
	color: var(--forum-danger);
}

.forum .forum-post-body {
	color: var(--forum-text);
	word-wrap: break-word;
	overflow-wrap: break-word;
	/* Take the slack, so everything after it lands at the foot of the post */
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}

.forum .forum-post-foot {
	margin-top: 0.85rem;
	color: var(--forum-muted);
	font-size: 0.75rem;
	text-align: right;
}

/*-------------------------------------------------------------------------*/
/* Social bar: reactions and thanks
/*-------------------------------------------------------------------------*/
.forum .forum-post-social {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center;
	align-items: center;
	/* Bottom right of the post: `auto` above it eats the leftover height,
	   `flex-end` packs the controls against the right edge. */
	-ms-flex-pack: end;
	justify-content: flex-end;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.7rem;
	border-top: 1px solid var(--forum-line);
	font-size: 0.78rem;
}

.forum .forum-reaction-list {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.forum .forum-reaction-form {
	display: inline;
}

/* Chip for one reaction. Rendered as a <button> when the reader may react and
   as a <span> when they may not, so both need the same box.               */
.forum .forum-reaction {
	display: -ms-inline-flexbox;
	display: inline-flex;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.25rem;
	padding: 0.12rem 0.5rem;
	color: var(--forum-text);
	border: 1px solid var(--forum-line-hard);
	background-color: var(--forum-surface-raise);
	font-size: 0.78rem;
	line-height: 1.4;
	cursor: pointer;
	-webkit-border-radius: 999px;
	border-radius: 999px;
	-webkit-transition: border-color 200ms ease-in-out, background-color 200ms ease-in-out;
	transition: border-color 200ms ease-in-out, background-color 200ms ease-in-out;
}

.forum .forum-reaction.is-static {
	cursor: default;
}

.forum .forum-reaction:not(.is-static):hover {
	border-color: var(--forum-gold);
	background-color: var(--forum-surface-sunk);
}

/* The reader's own reaction */
.forum .forum-reaction.is-mine {
	border-color: var(--forum-bright);
	color: var(--forum-emphasis);
	background-color: rgba(255, 255, 255, 0.08);
}

.forum .forum-reaction-emoji {
	font-size: 0.95rem;
	line-height: 1;
	/* Keep the glyph on a font that actually has colour emoji */
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

.forum .forum-reaction-count {
	color: var(--forum-muted);
	font-variant-numeric: tabular-nums;
}

.forum .forum-reaction.is-mine .forum-reaction-count {
	color: var(--forum-emphasis);
}

/*-------------------------------------------------------------------------*/
/* Reaction picker
/*-------------------------------------------------------------------------*/
.forum .forum-reaction-picker {
	position: relative;
	display: inline-block;
}

.forum .forum-reaction-picker > summary {
	display: -ms-inline-flexbox;
	display: inline-flex;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.3rem;
	padding: 0.12rem 0.55rem;
	color: var(--forum-muted);
	border: 1px dashed var(--forum-line-hard);
	cursor: pointer;
	list-style: none;
	-webkit-border-radius: 999px;
	border-radius: 999px;
	-webkit-transition: color 200ms ease-in-out, border-color 200ms ease-in-out;
	transition: color 200ms ease-in-out, border-color 200ms ease-in-out;
}

/* Hide the native disclosure marker in every engine */
.forum .forum-reaction-picker > summary::-webkit-details-marker {
	display: none;
}

.forum .forum-reaction-picker > summary::marker {
	content: "";
}

.forum .forum-reaction-picker > summary:hover,
.forum .forum-reaction-picker[open] > summary {
	color: var(--forum-bright);
	border-color: var(--forum-gold);
	border-style: solid;
}

.forum .forum-reaction-choices {
	position: absolute;
	z-index: 20;
	bottom: calc(100% + 0.35rem);
	/* Anchored to the right, because the bar it lives in is now flush with the
	   right edge of the post - opening leftwards keeps it on screen. */
	right: 0;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	/* An absolutely positioned box shrink-to-fits, and with a wrapping flex
	   child that resolves to the width of the widest single button - which
	   stacks the emoji into a column. Sizing to max-content makes it as wide as
	   one row needs; max-width still lets a long set wrap onto a second row. */
	width: -webkit-max-content;
	width: -moz-max-content;
	width: max-content;
	max-width: 20rem;
	gap: 0.15rem;
	padding: 0.35rem;
	border: 1px solid var(--forum-line-hard);
	background-color: #14150f;
	background-color: var(--havoc-surface, #14150f);
	-webkit-box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
	-webkit-border-radius: var(--forum-radius);
	border-radius: var(--forum-radius);
}

.forum .forum-reaction-choices form {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.15rem;
}

.forum .forum-reaction-choice {
	padding: 0.2rem 0.35rem;
	border: 1px solid transparent;
	cursor: pointer;
	font-size: 1.1rem;
	line-height: 1;
	background: none;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	-webkit-border-radius: var(--forum-radius);
	border-radius: var(--forum-radius);
	-webkit-transition: background-color 150ms ease-in-out, transform 150ms ease-in-out;
	transition: background-color 150ms ease-in-out, transform 150ms ease-in-out;
}

.forum .forum-reaction-choice:hover {
	background-color: var(--forum-surface-raise);
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
}

.forum .forum-reaction-choice.is-mine {
	border-color: var(--forum-bright);
	background-color: var(--forum-surface-raise);
}

/*-------------------------------------------------------------------------*/
/* Thanks
/*-------------------------------------------------------------------------*/
.forum .forum-thanks-btn {
	display: -ms-inline-flexbox;
	display: inline-flex;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.3rem;
	padding: 0.12rem 0.6rem;
	color: var(--forum-muted);
	border: 1px solid var(--forum-line-hard);
	cursor: pointer;
	font-size: 0.78rem;
	background: none;
	-webkit-border-radius: 999px;
	border-radius: 999px;
	-webkit-transition: color 200ms ease-in-out, border-color 200ms ease-in-out;
	transition: color 200ms ease-in-out, border-color 200ms ease-in-out;
}

.forum .forum-thanks-btn:hover,
.forum .forum-thanks-btn.is-active {
	color: var(--forum-bright);
	border-color: var(--forum-gold);
}

/*-------------------------------------------------------------------------*/
/* Reputation
/*-------------------------------------------------------------------------*/
/* Same pill as the thanks button so the pair reads as one control group;
   only the accent differs, and the star repeats in the counter.          */
.forum .forum-rep-btn {
	display: -ms-inline-flexbox;
	display: inline-flex;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.3rem;
	padding: 0.12rem 0.6rem;
	color: var(--forum-muted);
	border: 1px solid var(--forum-line-hard);
	cursor: pointer;
	font-size: 0.78rem;
	background: none;
	-webkit-border-radius: 999px;
	border-radius: 999px;
	-webkit-transition: color 200ms ease-in-out, border-color 200ms ease-in-out;
	transition: color 200ms ease-in-out, border-color 200ms ease-in-out;
}

.forum .forum-rep-btn:hover,
.forum .forum-rep-btn.is-active {
	color: var(--forum-emphasis);
	border-color: var(--forum-emphasis);
}

.forum .forum-count-rep i {
	color: var(--forum-emphasis);
}

/* Counts sit at the left of the bar, so the buttons stay together on the right
   and do not shift sideways as the numbers grow. */
.forum .forum-post-counts {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-right: auto;
	color: var(--forum-muted);
}

.forum .forum-count-thanks i {
	color: var(--forum-bright);
}

.forum .forum-post-thanks {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: baseline;
	align-items: baseline;
	-ms-flex-pack: end;
	justify-content: flex-end;
	gap: 0.4rem;
	margin-top: 0.5rem;
	color: var(--forum-muted);
	font-size: 0.75rem;
	text-align: right;
}

.forum .forum-post-thanks i {
	color: var(--forum-bright);
}

.forum .forum-thanks-names {
	min-width: 0;
	word-break: break-word;
}

/*-------------------------------------------------------------------------*/
/* Mentions
/*-------------------------------------------------------------------------*/
.forum .forum-post-body .forum-mention {
	padding: 0 0.25rem;
	color: var(--forum-bright);
	background-color: rgba(255, 255, 255, 0.05);
	font-weight: bold;
	white-space: nowrap;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

.forum .forum-post-body .forum-mention:hover {
	background-color: rgba(255, 255, 255, 0.1);
}

/*-------------------------------------------------------------------------*/
/* Tagged members
/*-------------------------------------------------------------------------*/
.forum .forum-tags {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.6rem;
	padding: 0.75rem var(--forum-pad);
	border: 1px solid var(--forum-line);
	background-color: var(--forum-surface);
	font-size: 0.8rem;
	-webkit-border-radius: var(--forum-radius);
	border-radius: var(--forum-radius);
}

.forum .forum-tags-label {
	color: var(--forum-muted);
	white-space: nowrap;
}

.forum .forum-tags-empty {
	color: var(--forum-muted);
	font-style: italic;
}

.forum .forum-tag-list {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.forum .forum-tag {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.3rem;
	padding: 0.1rem 0.5rem;
	border: 1px solid var(--forum-line-hard);
	background-color: var(--forum-surface-raise);
	-webkit-border-radius: 999px;
	border-radius: 999px;
}

.forum .forum-tag-remove {
	display: inline;
}

.forum .forum-tag-x {
	padding: 0;
	color: var(--forum-muted);
	border: none;
	cursor: pointer;
	font-size: 0.95rem;
	line-height: 1;
	background: none;
	-webkit-transition: color 200ms ease-in-out;
	transition: color 200ms ease-in-out;
}

.forum .forum-tag-x:hover {
	color: var(--forum-danger);
}

.forum .forum-tag-add {
	display: -ms-flexbox;
	display: flex;
	-ms-flex: 1 1 14rem;
	flex: 1 1 14rem;
	gap: 0.4rem;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

.forum .forum-tag-add .form-control {
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 22rem;
}

.forum .forum-deleted-note {
	color: var(--forum-muted);
}

/*-------------------------------------------------------------------------*/
/* Post content produced by Forum_parser
/*-------------------------------------------------------------------------*/
.forum .forum-post-body .forum-media {
	display: block;
	margin: 0.75rem 0;
	max-width: 100%;
}

.forum .forum-post-body .forum-media-image img {
	max-width: 100%;
	max-height: 32rem;
	height: auto;
	border: 1px solid var(--forum-line);
	-webkit-border-radius: var(--forum-radius);
	border-radius: var(--forum-radius);
}

.forum .forum-post-body .forum-media-video {
	position: relative;
	width: 100%;
	max-width: 40rem;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	-webkit-border-radius: var(--forum-radius);
	border-radius: var(--forum-radius);
}

.forum .forum-post-body .forum-media-video iframe {
	width: 100%;
	height: 100%;
	border: none;
	display: block;
}

.forum .forum-post-body .forum-quote {
	margin: 0.75rem 0;
	padding: 0.75rem 1rem;
	border-left: 3px solid var(--forum-gold);
	color: var(--forum-muted);
	background-color: var(--forum-surface-sunk);
	-webkit-border-radius: 0 var(--forum-radius) var(--forum-radius) 0;
	border-radius: 0 var(--forum-radius) var(--forum-radius) 0;
}

.forum .forum-post-body .forum-quote cite {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--forum-gold);
	font-style: normal;
	font-weight: bold;
	font-size: 0.82rem;
}

.forum .forum-post-body .forum-code {
	margin: 0.75rem 0;
	padding: 0.85rem 1rem;
	overflow-x: auto;
	color: var(--forum-emphasis);
	border: 1px solid var(--forum-line);
	background-color: var(--forum-surface-sunk);
	font-size: 0.85rem;
	-webkit-border-radius: var(--forum-radius);
	border-radius: var(--forum-radius);
}

.forum .forum-post-body .forum-list {
	margin: 0.5rem 0;
	padding-left: 1.25rem;
}

/*-------------------------------------------------------------------------*/
/* Moderation panel
/*-------------------------------------------------------------------------*/
.forum .forum-moderation {
	padding: 0.75rem var(--forum-pad);
	border: 1px solid var(--forum-line);
	background-color: var(--forum-surface);
	-webkit-border-radius: var(--forum-radius);
	border-radius: var(--forum-radius);
}

.forum .forum-moderation > summary {
	color: var(--forum-heading);
	cursor: pointer;
	font-size: 0.9rem;
	text-transform: uppercase;
}

.forum .forum-moderation-body {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 0.85rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--forum-line);
}

.forum .forum-moderation-row,
.forum .forum-moderation-row form {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.5rem;
}

.forum .forum-moderation-row form {
	-ms-flex: 1 1 20rem;
	flex: 1 1 20rem;
}

.forum .forum-moderation-row .form-control,
.forum .forum-moderation-row .form-select {
	-ms-flex: 1 1 10rem;
	flex: 1 1 10rem;
	min-width: 0;
	width: auto;
}

.forum .forum-moderation-row .forum-days {
	-ms-flex: 0 0 6rem;
	flex: 0 0 6rem;
}

.forum .nice_button.is-danger {
	color: var(--forum-danger);
}

/*-------------------------------------------------------------------------*/
/* Write form
/*-------------------------------------------------------------------------*/
.forum .forum-form,
.forum .forum-reply {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: var(--forum-gap);
	padding: var(--forum-pad);
	border: 1px solid var(--forum-line);
	background-color: var(--forum-surface);
	-webkit-border-radius: var(--forum-radius);
	border-radius: var(--forum-radius);
}

.forum .forum-field {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	gap: 0.4rem;
}

.forum .forum-field > label {
	color: var(--forum-heading);
	font-size: 0.85rem;
	text-transform: uppercase;
}

.forum .forum-editor {
	width: 100%;
	min-height: 12rem;
	padding: 0.75rem 1rem;
	color: var(--forum-emphasis);
	border: 1px solid var(--forum-line);
	background-color: var(--forum-surface-sunk);
	font-family: inherit;
	font-size: 0.95rem;
	line-height: 1.6;
	resize: vertical;
	-webkit-border-radius: var(--forum-radius);
	border-radius: var(--forum-radius);
}

.forum .forum-editor:focus {
	outline: none;
	border-color: var(--forum-gold);
	-webkit-box-shadow: 0 0 0 0.2rem var(--forum-focus);
	box-shadow: 0 0 0 0.2rem var(--forum-focus);
}

.forum .forum-hint {
	margin: 0;
	color: var(--forum-muted);
	font-size: 0.78rem;
}

.forum .forum-form-actions {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center;
	align-items: center;
	gap: 1rem;
}

/*-------------------------------------------------------------------------*/
/* Formatting toolbar
/*-------------------------------------------------------------------------*/
.forum .forum-toolbar {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.3rem;
	padding: 0.45rem;
	border: 1px solid var(--forum-line-hard);
	border-bottom: none;
	background-color: rgba(0, 0, 0, 0.35);
	-webkit-border-radius: var(--forum-radius) var(--forum-radius) 0 0;
	border-radius: var(--forum-radius) var(--forum-radius) 0 0;
}

/* The toolbar sits flush on top of its textarea */
.forum .forum-toolbar + .forum-editor {
	-webkit-border-radius: 0 0 var(--forum-radius) var(--forum-radius);
	border-radius: 0 0 var(--forum-radius) var(--forum-radius);
}

/* Each button is a real, visible chip: the previous version was a bare
   transparent square with a muted glyph, which read as disabled. */
.forum .forum-toolbar-btn {
	width: 2.2rem;
	height: 2.2rem;
	padding: 0;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
	-ms-flex-align: center;
	align-items: center;
	color: var(--forum-gold);
	border: 1px solid var(--forum-line-hard);
	cursor: pointer;
	font-size: 0.95rem;
	line-height: 1;
	background-color: var(--forum-surface-raise);
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-webkit-transition: color 150ms ease-in-out, background-color 150ms ease-in-out, border-color 150ms ease-in-out;
	transition: color 150ms ease-in-out, background-color 150ms ease-in-out, border-color 150ms ease-in-out;
}

/* Keep the glyph centred whichever Font Awesome style is used. Duotone sets
   `position: absolute` on its ::before, which pulls the glyph out of the
   button - the toolbar therefore uses `fa-solid`, and this makes sure any
   substitution stays centred too. */
.forum .forum-toolbar-btn i,
.forum .forum-toolbar-btn svg {
	display: block;
	width: 1em;
	height: 1em;
	position: static;
	line-height: 1;
	text-align: center;
	--fa-primary-opacity: 1;
	--fa-secondary-opacity: 1;
}

.forum .forum-toolbar-btn:hover,
.forum .forum-toolbar-btn:focus-visible {
	color: var(--forum-bright);
	border-color: var(--forum-gold);
	background-color: rgba(180, 163, 85, 0.18);
}

.forum .forum-toolbar-btn:focus-visible {
	outline: none;
	-webkit-box-shadow: 0 0 0 0.15rem var(--forum-focus);
	box-shadow: 0 0 0 0.15rem var(--forum-focus);
}

.forum .forum-toolbar-btn:active {
	background-color: rgba(180, 163, 85, 0.3);
}

.forum .forum-toolbar-sep {
	width: 1px;
	height: 1.4rem;
	margin: 0 0.3rem;
	background-color: var(--forum-line-hard);
}

/*-------------------------------------------------------------------------*/
/* Notices
/*-------------------------------------------------------------------------*/
.forum .forum-notice {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-ms-flex-align: center;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem var(--forum-pad);
	border: 1px solid var(--forum-line);
	border-left: 3px solid var(--forum-gold);
	background-color: var(--forum-surface);
	font-size: 0.9rem;
	-webkit-border-radius: var(--forum-radius);
	border-radius: var(--forum-radius);
}

.forum .forum-notice.is-danger {
	border-left-color: var(--forum-danger);
	color: #d98b8b;
	background-color: rgba(160, 60, 60, 0.1);
}

.forum .forum-login-prompt {
	-ms-flex-pack: center;
	justify-content: center;
}

.forum .forum-error-list {
	margin: 0;
	padding-left: 1.1rem;
}

.forum .forum-empty {
	padding: 2.5rem var(--forum-pad);
	color: var(--forum-muted);
	text-align: center;
	border: 1px dashed var(--forum-line-hard);
	-webkit-border-radius: var(--forum-radius);
	border-radius: var(--forum-radius);
}

.forum .forum-message-actions {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.forum .forum-search-count {
	margin: 0;
	color: var(--forum-muted);
	font-size: 0.85rem;
}

/*-------------------------------------------------------------------------*/
/* Pagination
/*-------------------------------------------------------------------------*/
.forum .forum-pagination-wrap {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: center;
	justify-content: center;
}

.forum .forum-pagination {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.forum .forum-pagination .page-link {
	display: inline-block;
	min-width: 2.2rem;
	padding: 0.35rem 0.6rem;
	color: var(--forum-muted);
	border: 1px solid var(--forum-line);
	text-align: center;
	font-size: 0.85rem;
	-webkit-border-radius: var(--forum-radius);
	border-radius: var(--forum-radius);
}

.forum .forum-pagination .page-item.active .page-link {
	color: var(--forum-bright);
	border-color: var(--forum-gold);
	background-color: rgba(180, 163, 85, 0.12);
}

/*-------------------------------------------------------------------------*/
/* Narrow screens
/*-------------------------------------------------------------------------*/
@media screen and (max-width: 780px) {
	.forum {
		--forum-gap: 1rem;
		--forum-pad: 1rem;
	}

	/* Drop the counter columns, keep topic + last post */
	.forum .forum-topic-head {
		display: none;
	}

	.forum .forum-topic-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 0.5rem;
	}

	.forum .forum-topic-row .col-count {
		display: none;
	}

	.forum .forum-topic-row .col-last {
		text-align: left;
	}

	.forum .forum-last-author,
	.forum .forum-last-date {
		display: inline;
	}

	/* Author beside the message instead of above it */
	.forum .forum-post-author {
		-ms-flex: 1 1 100%;
		flex: 1 1 100%;
		-ms-flex-direction: row;
		flex-direction: row;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		gap: 0.75rem;
		text-align: left;
	}

	.forum .forum-post-avatar img {
		width: 3rem;
		height: 3rem;
	}

	/* The counters drop below the avatar row and use the full width, so the
	   label/value columns stay readable instead of being crushed. */
	.forum .forum-author-stats {
		-ms-flex: 1 1 100%;
		flex: 1 1 100%;
		margin-top: 0;
	}

	.forum .forum-board-last {
		margin-left: 0;
		width: 100%;
	}
}