/** Tokens **/
/* Escala: 1 = más sutil … 6 = más fuerte. En oscuro se invierte la luminosidad. */
:root {
	--primary-1: #e3efe6;
	--primary-2: #a9cdb2;
	--primary-3: #4f8a5e;
	--primary-4: #2f6b3f;
	--primary-5: #23552f;
	--primary-6: #1b3b24;
	--on-primary: #ffffff;

	--page-bg: #f7faf8;
	--text: #111827;
	--visited: #7e22ce;
	--user-label: color-mix(in srgb, var(--primary-4) 45%, #2563eb);
	--greentext: #4d7c0f;
	--error: #b91c1c;
	--ok: #0f766e;
	--spoiler: #f7faf8;

	/* Semánticos: iguales en ambos temas */
	--primary: var(--primary-4);
	--primary-hover: var(--primary-5);
	--surface-bg: var(--primary-1);
	--surface-text: var(--primary-6);
	--hover-bg: var(--primary-2); /* hover y post objetivo */
	--border: var(--primary-3);
	--border-soft: var(--primary-2);

	--font: Arial, Helvetica, sans-serif;
	--font-mono: monospace;
	--text-body: 1rem;
	--text-small: 0.75rem;
	--text-title: 1.75rem;
	--text-subject: 1rem;
	--letter-spacing: 0;
	--line-height: 1.5;

	--radius: 3px;
	--border-width: 1px;

	/* escala de espaciado: 4, 8, 12, 16 */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;

	--pad-y: var(--space-2);
	--pad-x: var(--space-3);
	--section-gap: var(--space-4);
	--mobile-padding: var(--space-2);
	--desktop-padding: var(--space-3);
}

/* Debe ir en <html> (mismo elemento que :root) para que los semánticos se re-resuelvan */
.theme-dark {
	color-scheme: dark;

	--primary-1: #12241a;
	--primary-2: #1d3a28;
	--primary-3: #3f7e56;
	--primary-4: #86c99a;
	--primary-5: #a9dbb7;
	--primary-6: #c4dccb;
	--on-primary: #052e16;

	--page-bg: #131815;
	--text: #cfd5d1;
	--visited: #c4b5fd;
	--greentext: #9bbf5a;
	--error: #e08080;
	--ok: #2dd4bf;
	--spoiler: #131815;

	--border-soft: var(--primary-3);

	--letter-spacing: 0.02em;
	--line-height: 1.65;
}

.theme-ceibo {
	/* Rojo flor: 1 = pétalo muy pálido … 6 = rojo casi corteza */
	--primary-1: #fbe9e7;
	--primary-2: #f1b4ad;
	--primary-3: #d9473f;
	--primary-4: #b3261e;
	--primary-5: #8f1d17;
	--primary-6: #4a1411;
	--on-primary: #ffffff;

	--page-bg: #fdf8f4;
	--text: #2a1d17;
	--visited: #6b3fa0;
	--user-label: #754608;
	--greentext: #3d6b1f;
	--error: #b91c1c;
	--ok: #2f7d32;
	--spoiler: #fdf8f4;
}

.theme-ceibo.theme-dark {
	--primary-1: #2a1613;
	--primary-2: #45201b;
	--primary-3: #b8483f;
	--primary-4: #f07a6e;
	--primary-5: #f5a198;
	--primary-6: #f2cdc7;
	--on-primary: #2a0a07;

	--page-bg: #1a1412; /* corteza de noche */
	--text: #e6dcd6;
	--visited: #c4b5fd;
	--user-label: #e0a458; /* ocre claro sobre corteza oscura */
	--greentext: #9bbf5a;
	--error: #ff8a8a;
	--ok: #6fcf8a;
	--spoiler: #1a1412;
}

.theme-morpho {
	--primary-1: #dff2fc;
	--primary-2: #a8d9f2;
	--primary-3: #55addb;
	--primary-4: #2479ad;
	--primary-5: #185781;
	--primary-6: #103650;
	--on-primary: #ffffff;

	--page-bg: #f5faff;
	--text: #172633;
	--visited: #7652a5;
	--user-label: #245a87;
	--greentext: #4d7c0f;
	--error: #b91c1c;
	--ok: #0f766e;
	--spoiler: #f5faff;
}

.theme-morpho.theme-dark {
	--primary-1: #122633;
	--primary-2: #19394d;
	--primary-3: #326b8e;
	--primary-4: #70bce5;
	--primary-5: #9bd5f3;
	--primary-6: #c6e8f8;
	--on-primary: #082536;

	--page-bg: #131a20;
	--text: #d7e1e8;
	--visited: #c4b5fd;
	--user-label: #74acdf;
	--greentext: #9bbf5a;
	--error: #ff8a8a;
	--ok: #5ee0cb;
	--spoiler: #131a20;
}

/** Base **/
body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding-left: var(--mobile-padding);
	padding-right: var(--mobile-padding);
}

.site-main {
	flex: 1;
	padding-bottom: var(--section-gap);
}

.site-main:has(> .home),
.site-main:has(> .error),
.site-main:has(> .login) {
	display: flex;
}

.home {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: auto;
}

.home ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-panel {
	border: var(--border-width) solid var(--border-soft);
	border-radius: var(--radius);
	overflow: hidden;
}

.home-panel-head {
	margin: 0;
	padding: var(--pad-y) var(--pad-x);
	font-size: var(--text-body);
	font-weight: bold;
	background: color-mix(in srgb, var(--surface-bg) 70%, transparent);
	border-bottom: 4px ridge var(--border);
}

.home-panel-body {
	padding: var(--pad-y) var(--pad-x);
}

.home .boards {
	margin-bottom: var(--section-gap);
}

@media (min-width: 640px) and (pointer: fine) {
	body {
		padding-left: var(--desktop-padding);
		padding-right: var(--desktop-padding);
	}
}

html {
	box-sizing: border-box;
	font-size: 100%;
	color-scheme: light;
	min-height: 100vh;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	background-color: var(--page-bg);
	background-image: linear-gradient(to bottom, var(--surface-bg), var(--page-bg) 30rem);
	background-repeat: no-repeat;
	color: var(--text);
	font-family: var(--font);
	font-size: var(--text-body);
	line-height: var(--line-height);
	letter-spacing: var(--letter-spacing);
	margin: 0;
}

.theme-dark body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
table,
pre,
textarea {
	max-width: 100%;
}

img {
	height: auto;
}

pre {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

a {
	color: var(--primary);
}

a:visited {
	color: var(--visited);
}

h1 {
	font-size: var(--text-title);
	color: var(--primary-6);
}

.subject,
.dialog-title {
	font-size: var(--text-subject);
	font-weight: bold;
}

.dialog-title {
	margin-top: 0;
}

.user-label {
	color: var(--user-label);
	font-weight: bold;
	overflow-wrap: anywhere;
}

.greentext {
	color: var(--greentext);
}

.spoiler {
	background: var(--text);
	color: var(--text);
}

.spoiler:hover {
	color: var(--spoiler);
}

.code {
	font-family: var(--font-mono);
	white-space: pre-wrap;
}

/** Iconos (mask) **/
.sticky,
.locked,
.hint,
.report-btn,
.catalog-card-go,
.notice-info::before {
	display: inline-block;
	width: 1em;
	height: 1em;
	vertical-align: -0.125em;
	background-color: currentColor;
	mask: var(--icon) center / contain no-repeat;
}

.sticky {
	--icon: url("/static/thumbtack-solid.svg");
}
.locked {
	--icon: url("/static/lock-alt-solid.svg");
}
.hint {
	--icon: url("/static/question-circle-solid.svg");
}
.report-btn {
	--icon: url("/static/play-solid.svg");
	border: 0;
	padding: 0;
	color: inherit;
	cursor: pointer;
}

.catalog-card-go {
	--icon: url("/static/angle-right.svg");
}

/** Avisos **/
.notice {
	border: var(--border-width) solid var(--border);
	font-weight: bold;
	padding: var(--space-2) var(--space-1);
	width: max-content;
}

.notice-info {
	color: var(--primary);
}
.notice-error {
	color: var(--error);
}
.notice-ok {
	color: var(--ok);
}

.notice-info::before {
	content: "";
	margin-right: 0.25em;
	--icon: url("/static/info-circle-solid.svg");
}

.notice-error::before {
	content: "✗ ";
}
.notice-ok::before {
	content: "✓ ";
}

.form-error,
.dialog-error {
	color: var(--error);
}

.dialog-error {
	font-weight: bold;
}

.form-error:empty,
.dialog-error:empty {
	display: none;
}

/** Formularios y botones **/
.form-row {
	margin: 0 0 var(--space-2);
}

.form-row:has(:disabled) {
	opacity: 0.5;
	cursor: not-allowed;
}

input[type="file"] {
	font: inherit;
}

input[type="file"]::file-selector-button {
	font: inherit;
	border-radius: var(--radius);
	border: thin solid grey;
}

.btn,
.pagination a,
dialog button {
	--btn-bg: var(--surface-bg);
	--btn-fg: var(--primary);
	--btn-border: var(--border);
	font: inherit;
	cursor: pointer;
	border-radius: var(--radius);
	background: var(--btn-bg);
	color: var(--btn-fg);
	border: var(--border-width) solid var(--btn-border);
}

.btn-primary {
	--btn-bg: var(--primary);
	--btn-fg: var(--on-primary);
	--btn-border: var(--primary);
	--btn-hover-bg: var(--primary-hover);
	--btn-hover-fg: var(--on-primary);
}

.btn:hover:not(:disabled):not([aria-disabled="true"]),
.pagination a:hover,
dialog button:hover {
	background: var(--btn-hover-bg, var(--hover-bg));
	color: var(--btn-hover-fg, var(--surface-text));
}

.btn:active:not(:disabled):not([aria-disabled="true"]),
.pagination a:active,
dialog button:active,
input[type="file"]:not(:disabled)::file-selector-button:active {
	transform: translateY(1px);
}

.btn:disabled,
.btn[aria-disabled="true"],
input[type="file"]:disabled::file-selector-button {
	opacity: 0.4;
	cursor: not-allowed;
}

.inline-form {
	align-items: center;
	display: flex;
	gap: var(--space-2);
}

.manage-form {
	margin-top: var(--space-3);
}

.form-toggle {
	margin-bottom: var(--section-gap);
}

.form-toggle > button {
	display: none;
}

@media (pointer: coarse), (max-width: 40rem) {
	.form-toggle > button {
		display: inline-block;
	}

	.form-toggle:not(.is-open) > form {
		display: none;
	}

	.form-toggle.is-open > button {
		display: none;
	}
}
.form-block {
	margin-bottom: var(--space-2);
}

.edit-form textarea {
	width: 100%;
}
.field-sm {
	width: 5em;
}
.field-md {
	width: 6em;
}
.field-lg {
	width: 8em;
}

.honeypot {
	position: absolute;
	left: -9999px;
}

/** Dialogs **/
dialog {
	width: min(24rem, calc(100vw - 2rem));
	padding: 1rem 1.25rem;
	background: var(--surface-bg);
	color: var(--surface-text);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgb(0 0 0 / 0.3);
}

/* sin variables: ::backdrop no siempre hereda custom properties */
dialog::backdrop {
	background: rgb(0 0 0 / 0.5);
}

dialog p {
	margin: 0.25em 0;
}

dialog button {
	padding: 0.35em 1em;
	margin: 0.75em 0.5em 0 0;
}

.dialog-actions {
	align-items: center;
	display: flex;
	gap: var(--space-2);
	margin-top: 0.75em;
}

.dialog-actions button {
	margin: 0;
}

/* opciones (radio / checkbox): toda la fila es clickeable */
dialog label:has(input[type="radio"], input[type="checkbox"]) {
	display: flex;
	align-items: center;
	gap: 0.6em;
	padding: 0.25em 0.4em;
	margin: 0.1em 0;
	border-radius: var(--radius);
	cursor: pointer;
}

dialog label:has(input[type="radio"], input[type="checkbox"]):hover,
dialog label:has(:checked) {
	background: var(--hover-bg);
}

dialog label:has(:checked) {
	font-weight: bold;
}

dialog input[type="radio"],
dialog input[type="checkbox"] {
	accent-color: var(--primary);
	flex: none;
	margin: 0;
	width: 1.1em;
	height: 1.1em;
}

/** Tablas **/
table {
	width: 100%;
	border-collapse: collapse;
	border: var(--border-width) solid var(--border);
}

caption {
	text-align: left;
	font-weight: bold;
	padding: 0.5em 0;
}

th,
td {
	padding: 0.5em 0.75em;
	text-align: left;
	border-bottom: var(--border-width) solid var(--border);
}

thead th {
	background: var(--surface-bg);
	color: var(--surface-text);
}

tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--surface-bg) 40%, transparent);
}

tbody tr:hover {
	background: var(--hover-bg);
	color: var(--surface-text);
}

tbody tr:last-child td {
	border-bottom: 0;
}

.site-footer {
	border-top: 1px solid var(--primary);
	font-size: 14px;
	padding: var(--space-2) 0;
}

/** Paginación **/
.pagination {
	display: flex;
	gap: var(--space-2);
	padding: var(--space-2);
	margin: 0 auto;
	width: max-content;
}

.pagination a,
.pagination [aria-current="page"],
.pagination li[aria-hidden="true"] {
	display: inline-block;
	min-width: 2em;
	padding: 0.25em 0.6em;
	text-align: center;
	border-radius: var(--radius);
}

.pagination a {
	text-decoration: none;
}

.pagination [aria-current="page"] {
	background: var(--primary);
	color: var(--on-primary);
	border: var(--border-width) solid var(--primary);
	font-weight: bold;
}

.pagination li[aria-hidden="true"] {
	opacity: 0.6;
}

.pagination .page-label {
	display: none;
}

.pagination .page-numbers {
	display: flex;
	gap: 4px;
}

/** Layout **/
.container {
	padding: var(--pad-y) var(--pad-x);
	border: var(--border-width) solid var(--border-soft);
	border-radius: var(--radius);
}

.center {
	display: flex;
	justify-content: center;
}

.board-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.section {
	margin-bottom: var(--section-gap);
}

.scroll {
	max-height: 24em;
	overflow: auto;
}

.scroll-lg {
	max-height: 40em;
}

.ghost-button {
	font: inherit;
	color: var(--primary);
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.ghost-button:visited {
	color: var(--primary);
}

.ghost-button:hover {
	color: var(--primary-6);
	text-decoration: underline;
}

/* Las páginas del pie no llevan navegación completa: solo la vuelta al inicio. */
.page-top {
	display: flex;
	justify-content: flex-end;
}

.board-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: start;
	justify-content: space-between;
}

.board-nav,
.mod-nav,
.site-footer {
	margin-left: calc(-1 * var(--mobile-padding));
	margin-right: calc(-1 * var(--mobile-padding));
	padding-left: var(--mobile-padding);
	padding-right: var(--mobile-padding);
}

@media (min-width: 640px) and (pointer: fine) {
	.board-nav,
	.mod-nav,
	.site-footer {
		margin-left: calc(-1 * var(--desktop-padding));
		margin-right: calc(-1 * var(--desktop-padding));
		padding-left: var(--desktop-padding);
		padding-right: var(--desktop-padding);
	}
}

.board-nav label {
	flex-basis: 100%;
}

.board-nav ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mod-nav ul,
.site-footer ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer ul {
	justify-content: flex-end;
}

.board-nav label,
.board-nav select {
	display: none;
}

/** Contacto **/
.contact-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-label {
	font-weight: 600;
}

/** Reglas y about **/
.rules-page, .about-page {
	margin: 0 auto;
	max-width: 1024px;
}

.rules-sections {
	display: flex;
	flex-wrap: wrap;
	gap: var(--section-gap);
}

.rules-boards {
	flex: 0 0 12rem;
}

.rules-boards ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.rules-list {
	flex: 1 1 20rem;
}

.rules-list li {
	white-space: pre-line;
}

/** Feedback **/
.feedback-form {
	max-width: 40rem;
}

.feedback-form.is-idea .feedback-bug {
	display: none;
}

/** Login de mod **/
.login {
	align-items: center;
	display: flex;
	flex-direction: column;
	margin: auto;
}

/** Error **/
.error {
	align-items: center;
	display: flex;
	flex-direction: column;
	margin: auto;
	text-align: center;
}

/* Una imagen con el borde y el radio del tema. La usan el 404 y la de sobre. */
.framed {
	border: var(--border-width) solid var(--border-soft);
	border-radius: var(--radius);
	display: block;
	height: auto;
	max-height: 60vh;
	max-width: 100%;
	width: auto;
}

.about-image {
	margin: var(--section-gap) auto;
}

.error-image-ceibo {
	display: none;
}

.theme-ceibo .error-image-green {
	display: none;
}

.theme-ceibo .error-image-ceibo {
	display: block;
}

.error-status {
	font-size: 48px;
	font-family: monospace;
}

/** Catálogo **/
.board-header {
	align-items: center;
	display: flex;
	flex-direction: column;
}

.catalog-grid {
	--card: 250px;
	--gap: var(--space-3);
	--cols: 1;

	columns: var(--card);
	column-gap: var(--gap);
	margin: 0 auto;
	max-width: calc(var(--card) * var(--cols) + var(--gap) * (var(--cols) - 1));
}

.catalog-grid:has(> :nth-child(2)) {
	--cols: 2;
}

.catalog-grid:has(> :nth-child(3)) {
	--cols: 3;
}

.catalog-grid:has(> :nth-child(4)) {
	--cols: 4;
}

.catalog-grid:has(> :nth-child(5)) {
	--cols: 5;
}

.catalog-grid:has(> :nth-child(6)) {
	--cols: 6;
}

.catalog-grid:has(> :nth-child(7)) {
	--cols: 7;
}

.catalog-grid:has(> :nth-child(8)) {
	--cols: 8;
}

.catalog-card {
	break-inside: avoid;
	margin: 0 auto var(--space-3);
	max-width: 100%;
	width: var(--card);
	background: var(--surface-bg);
	border: var(--border-width) solid var(--border-soft);
	border-radius: var(--radius);
	overflow: hidden;
}

.catalog-card > * {
	padding: var(--pad-y) var(--pad-x);
}

.catalog-card-head {
	align-items: center;
	border-bottom: var(--border-width) solid var(--border);
	flex-wrap: wrap;
	gap: var(--space-2);
}

.catalog-card-head:hover {
	background: var(--primary-2);
}

.catalog-card-link {
	align-items: center;
	color: var(--text);
	display: flex;
	flex: 1;
	gap: var(--space-2);
	justify-content: center;
	text-decoration: none;
}

.catalog-card-link:visited {
	color: var(--text);
}

.catalog-card-id {
	font-size: var(--text-small);
}

.catalog-card-title {
	text-align: center;
}

.catalog-card-image {
	display: block;
	height: auto;
	max-width: 100%;
}

.catalog-card-foot {
	align-items: center;
	display: flex;
	font-size: var(--text-small);
	gap: var(--space-2);
	justify-content: space-between;
}

.catalog-card-actions {
	align-items: center;
	display: flex;
	gap: var(--space-2);
}

.catalog-grid p {
	margin: 0;
}

/** Índice **/
.index-thread {
	border: calc(var(--border-width) * 2) solid var(--border-soft);
	border-radius: var(--radius);
	margin-bottom: var(--space-6);
	padding: var(--pad-y) var(--pad-x);
}

.index-op {
	align-items: start;
	display: flex;
	gap: var(--space-3);
}

.index-op > div {
	min-width: 0;
	overflow-wrap: anywhere;
}

.index-image {
	display: block;
	height: auto;
	max-width: 150px;
}

.index-head {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.index-date {
	font-size: var(--text-small);
}

.index-meta {
	margin-top: var(--space-2);
	opacity: 0.5;
}

/** Posts **/
.post {
	margin: 0 0 var(--space-3);
}

.post:target {
	background: var(--hover-bg);
}

.op > .post-head {
	margin-left: calc(-1 * var(--mobile-padding));
	margin-right: calc(-1 * var(--mobile-padding));
	padding-left: var(--mobile-padding);
	padding-right: var(--mobile-padding);
}

.post-head,
.post-body {
	padding: var(--pad-y) var(--pad-x);
}

/* display:table => las respuestas no se solapan con floats */
.reply {
	display: table;
	max-width: 100%;
	border: var(--border-width) solid var(--border-soft);
	border-radius: var(--radius);
}

.post pre {
	margin: 0;
	font-family: inherit;
}

.post-no {
	cursor: pointer;
}
.backlinks {
	font-size: var(--text-small);
}
.clear {
	clear: both;
}

@media (min-width: 640px) and (pointer: fine) {
	.op > .post-body > .file {
		display: none;
	}
}

.file {
	float: left;
	margin: 0 var(--space-4) var(--space-2) 0;
	max-width: 250px;
}

.fileText {
	font-size: 0.85em;
	overflow-wrap: anywhere;
}

.fileThumb img {
	display: block;
	max-width: 250px;
	height: auto;
}

.file:has(.fileThumb[data-expanded="true"]) {
	float: none;
	max-width: 100%;
	margin: 0 0 var(--space-2);
}

.fileThumb[data-expanded="true"] img {
	max-width: 100%;
}

.section-separator {
	margin: var(--section-gap) calc(var(--desktop-padding) * -1);
	opacity: 0.5;
}

/** Desktop: acciones de post van en el header **/
@media (min-width: 640px) and (pointer: fine) {
	.post-actions,
	.post-actions-mobile {
		display: none;
	}
}

/** Mobile / táctil **/
@media (pointer: coarse), (max-width: 40rem) {
	.btn,
	dialog button,
	input[type="file"]::file-selector-button {
		min-height: 2.75rem;
		padding: 0.6em 1.25em;
		font-size: 1.125rem;
	}

	input:not([type="file"]),
	textarea {
		min-height: 2.75rem;
	}

	.form-text-field {
		input {
			width: 100%;
		}
	}

	.form-row label {
		display: block;
	}

	th,
	td {
		padding: 0.6em 0.75em;
	}

	dialog {
		width: 75%;
	}

	dialog label:has(input[type="radio"], input[type="checkbox"]) {
		padding: 0.6em 0.5em;
	}

	.board-nav {
		border-bottom: 1px solid var(--primary);
		padding-top: var(--mobile-padding);
		padding-bottom: var(--mobile-padding);
		margin-bottom: var(--space-2);
	}

	.board-nav ul {
		display: none;
	}

	.home-panel-body ul {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.home-panel-body a {
		display: inline-block;
		padding: var(--pad-y) 0;
	}

	.catalog-grid {
		columns: auto;
		max-width: none;
	}

	.catalog-card {
		margin-left: var(--space-1);
		margin-right: var(--space-1);
		width: auto;
	}

	.board-nav label,
	.board-nav select {
		display: block;
		height: 32px;
		font-size: 16px;
	}

	.post-actions-desktop {
		display: none;
	}

	.post-actions {
		align-items: center;
		display: flex;
		flex-wrap: wrap;
		flex-basis: 100%;
		gap: var(--space-3);
		margin: var(--space-2) 0;
	}

	.post-meta {
		align-items: center;
		display: flex;
		gap: var(--space-2);
	}

	.post-actions > * {
		flex-shrink: 0;
	}

	.reply {
		width: 100%;
	}

	.post-head {
		background: color-mix(in srgb, var(--surface-bg) 70%, transparent);
		border-bottom: var(--border-width) solid var(--border);
		padding: calc(var(--pad-y) * 2) var(--pad-x);
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2);
	}

	.op > .file {
		display: none;
	}

	.subject {
		order: -1;
		flex-basis: 100%;
	}

	.op > .post-head {
		margin-left: calc(-1 * var(--mobile-padding));
		margin-right: calc(-1 * var(--mobile-padding));
		padding-left: var(--mobile-padding);
		padding-right: var(--mobile-padding);
	}

	.backlinks {
		font-size: var(--text-body);
	}

	.file,
	.fileThumb img {
		max-width: 125px;
	}

	.pagination {
		justify-content: center;
		width: auto;
	}

	.pagination .page-prev,
	.pagination .page-label {
		display: inline-block;
	}

	.pagination .page-numbers {
		display: none;
	}

	.site-footer {
		ul {
			justify-content: center;
		}
	}
}