/* ===========================================================================
   Mercury -- sistemul vizual "Sina" pentru interiorul forumurilor 3xForum.

   GENERAT DE /home/make_3xforum_style.py. NU EDITA ACEST FISIER.
   Modificarile se fac in generator si se regenereaza tot setul.

   Foaia intreaga a temei: desktop si telefon, dintr-un singur fisier.
   header.php o incarca fara atribut media si o versioneaza cu
   STYLE_CSS_V, altfel cacheul de 365 de zile pus de nginx pe /style/
   ar tine luni intregi foaia veche pe ecranele vizitatorilor vechi.

   Markupul PunBB nu se atinge. Toate starile pe care le arata foaia asta --
   necitit, subiect inchis, care tabel e antetul de site, care e lista de
   subiecte, care e o postare -- sint citite din HTML-ul existent, cu
   selectoare structurale si :has(). Browserele fara :has() primesc
   in tacere varianta simpla: aceleasi culori si aceeasi tipografie, fara
   pliere in card si fara sina colorata. Nimic nu se rupe.

   Accent: #9A6B04 pe lumina, #B37C05 pe intuneric
           (contrast 4.7:1 si 4.5:1; tema veche avea #F6B620).
   =========================================================================== */

/* --- fonturi -------------------------------------------------------------
   Gazduite local, in /style/fonts/, subsetate pe alfabetul de care are nevoie
   un forum romanesc. Motivul care le-a ales pe amindoua: s si t cu virgula
   dedesubt, nu cu sedila. Se reconstruiesc cu make_3xforum_style.py --fonturi.
   Ambele sint sub SIL Open Font License 1.1; textul licentei sta linga ele. */
@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/style/fonts/fira-sans-400.woff2?v=1") format("woff2");
}
@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("/style/fonts/fira-sans-500.woff2?v=1") format("woff2");
}
@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("/style/fonts/fira-sans-600.woff2?v=1") format("woff2");
}
@font-face {
	font-family: "Literata";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("/style/fonts/literata.woff2?v=1") format("woff2");
}
@font-face {
	font-family: "Literata";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("/style/fonts/literata-italic.woff2?v=1") format("woff2");
}

/* --- variabile ----------------------------------------------------------- */
:root {
	--paper:     #FFFFFF;
	--ground:    #E9ECEF;
	--ink:       #1F252B;
	--meta:      #5A6672;
	--rule:      #D8DDE3;
	--rule-soft: #EDEFF2;
	--wash:      #F5F7F9;
	--quote:     #F3F5F7;
	--accent:    #9A6B04;
	--on-accent: #FFFFFF;

	/* cromatica de cadru: bara de sus si rindul de file */
	--bar:   #724F03;
	--bar-2: #906404;

	--ff:      "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--ff-read: "Literata", Georgia, "Times New Roman", serif;
	--ff-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
	:root {
		--paper:     #1C2024;
		--ground:    #14171A;
		--ink:       #E6E9EC;
		--meta:      #97A1AB;
		--rule:      #2C3238;
		--rule-soft: #242A2F;
		--wash:      #20252A;
		--quote:     #22282D;
		--accent:    #B37C05;
		--on-accent: #14171A;
		--bar:       #412D02;
		--bar-2:     #5A3E02;
	}
}

/* --- baza ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body {
	max-width: 1180px;
	margin: 0 auto;
	padding: 12px 16px 44px;
	background: var(--ground);
	color: var(--ink);
	font: 14px/1.5 var(--ff);
	-webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a.punclosed, a:link.punclosed, a:visited.punclosed { color: var(--meta); }
a.punhot, a:link.punhot, a:visited.punhot { color: var(--accent); font-weight: 600; }
.punhot { color: var(--accent); }
img { max-width: 100%; height: auto; }
form { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
td { overflow-wrap: break-word; }
pre, code { font-family: var(--ff-mono); font-size: 13px; }
pre {
	margin: 0 0 12px; padding: 11px 13px; background: var(--wash);
	border: 1px solid var(--rule); border-radius: 8px;
	white-space: pre-wrap; word-wrap: break-word; overflow-x: auto;
}

table.punmain, table.punplain, table.punspacer {
	width: 100%; border-collapse: separate; border-spacing: 0; margin: 0;
}
table.punmain {
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 10px;
	margin: 0 0 12px;
	overflow: hidden;
}
table.punmain td { background: transparent; }
td.puncon1, td.puncon2, td.puncon3 { padding: 12px 16px; }

/* --- antetul: bara colorata plus rindul de file --------------------------
   main.tpl marcheaza tabelul cu .punmast, deci nu mai e nevoie de ghicit
   dupa structura. */
table.punmast {
	background: var(--bar);
	border: 0;
	border-radius: 10px 10px 0 0;
	margin-bottom: 0;
}
table.punmast, table.punmast > tbody, table.punmast > tbody > tr { display: block; }
table.punmast > tbody > tr.punhead {
	display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
table.punmast > tbody > tr.punhead > td {
	display: block; width: auto !important; border: 0;
	padding: 13px 20px 11px;
	color: rgba(255,255,255,.72); font-size: 12.5px; line-height: 1.45;
	white-space: normal;
}
span.puntitle {
	display: block; font-family: var(--ff); font-size: 20px; font-weight: 600;
	letter-spacing: -.01em; line-height: 1.2; color: #fff; margin-bottom: 2px;
	overflow-wrap: break-word;
}
td.punstatus { text-align: right; flex: 0 0 auto; }
td.punstatus a { color: #fff; }

table.punmast > tbody > tr > td.puncon1 {
	display: block; background: var(--bar-2); border: 0;
	padding: 0 10px; white-space: nowrap; overflow-x: auto;
}
table.punmast > tbody > tr > td.puncon1 a {
	display: inline-block; padding: 9px 13px;
	color: rgba(255,255,255,.85); font-size: 13.5px; font-weight: 500;
	border-bottom: 3px solid transparent;
}
table.punmast > tbody > tr > td.puncon1 a:hover {
	color: #fff; background: rgba(255,255,255,.09); text-decoration: none;
}
table.punmast > tbody > tr > td.puncon1 a.on { color: #fff; border-bottom-color: #fff; }

/* index.php scrie style="display: inline-block" pe celula de forum, ceea ce o
   scoate din asezarea de tabel: bordura de jos se opreste la jumatate. Fixul
   sta inchis intr-un @media de desktop, fiindca pe telefon celula e oricum
   blocata de containerul flex al rindului. */
@media (min-width: 1024px) {
	tr.puncon1:has(> td.puncent) > td { display: table-cell !important; }
}

/* --- barile de drum si de actiuni (punspacer) ---------------------------- */
table.punspacer { display: block; margin: 0 0 12px; }
table.punspacer > tbody { display: block; }
table.punspacer tr {
	display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 4px 0;
}
table.punspacer td {
	display: block; padding: 0; width: auto !important;
	font-size: 12.5px; color: var(--meta);
}
table.punspacer:has(td.punright) tr {
	padding: 10px 16px; background: var(--paper);
	border: 1px solid var(--rule); border-radius: 10px;
}
table.punspacer td.punright { margin-left: auto; text-align: right; }
table.punspacer td.punright > b > a {
	display: inline-block; background: var(--accent); color: var(--on-accent);
	font-weight: 500; font-size: 13px; padding: 7px 14px; border-radius: 7px;
}
table.punspacer td.punright > b > a:hover { text-decoration: none; filter: brightness(1.08); }

/* --- capul de tabel ------------------------------------------------------- */
tr.punhead td, td.punhead, td.punheadcent {
	padding: 10px 16px; border-bottom: 1px solid var(--rule);
	font-size: 12px; font-weight: 500; color: var(--meta); text-align: left;
}
td.punheadcent { white-space: nowrap; }
tr.punhead td:nth-child(n+3) { text-align: right; }

/* --- capul de sectiune din index.php -------------------------------------
   Categoriile sint <tr> fara clasa; <tr class="puncon3"> e cardul de reclama
   si subsolul, care nu trebuie sa devina titluri. */
tr:not(.puncon3) > td.puncon3 {
	background: var(--wash);
	border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
	padding: 9px 18px; font-size: 12.5px; font-weight: 600; color: var(--meta);
}
tr:first-child > td.puncon3 { border-top: 0; }

/* --- rindurile de lista --------------------------------------------------- */
tr.puncon1:has(> td.puncent) > td,
tr.puntopic > td {
	padding: 11px 10px; border-bottom: 1px solid var(--rule-soft);
	vertical-align: middle; color: var(--meta); font-size: 13px;
}
tr.puncon1:has(> td.puncent):hover > td,
tr.puntopic:hover > td { background: var(--wash); }

/* PASTILA. Prima celula tine deja starea de necitit, ca <b>. */
tr.puncon1:has(> td.puncent) > td:first-child,
tr.puntopic > td:first-child {
	width: 70px; padding-left: 18px; padding-right: 0;
	font-size: 0; color: transparent;
}
tr.puncon1:has(> td.puncent) > td:first-child::before {
	content: ""; display: block; width: 40px; height: 40px; border-radius: 12px;
	border: 1px solid var(--rule);
	background:
		linear-gradient(var(--meta), var(--meta)) 11px 14px/18px 3px no-repeat,
		linear-gradient(var(--meta), var(--meta)) 11px 21px/12px 3px no-repeat,
		var(--wash);
}
tr.puncon1:has(> td.puncent > span > b) > td:first-child::before {
	border-color: var(--accent);
	background:
		linear-gradient(#fff, #fff) 11px 14px/18px 3px no-repeat,
		linear-gradient(#fff, #fff) 11px 21px/12px 3px no-repeat,
		var(--accent);
}
tr.puncon1:has(> td a.punclosed) > td:first-child::before { border-style: dashed; opacity: .65; }

/* --- chipurile din liste --------------------------------------------------
   In lista de subiecte, prima celula tine chipul celui care a deschis firul --
   un forum e o rubrica, un subiect e al cuiva. Semnul de necitit ramine acolo,
   ca <b>, dar nu se mai vede: se arata ca un inel in culoarea temei. */
.punav {
	display: block; width: 44px; height: 44px; border-radius: 50%;
	object-fit: cover; border: 1px solid var(--rule); background: var(--wash);
}
.punav-gol {
	display: flex; align-items: center; justify-content: center;
	font: 600 15px/1 var(--ff); color: var(--meta);
}
tr.puntopic:has(> td:first-child b) .punav {
	box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent);
}
tr.puntopic:has(> td a.punclosed) .punav { opacity: .55; }

/* ultimul care a scris: chip mic, nume, cind */
.ultim { display: inline-flex; align-items: center; gap: 8px; text-align: left; }
.ultim .punav { width: 28px; height: 28px; flex: 0 0 28px; }
.ultim .punav-gol { font-size: 12px; }
.ultim .t { display: block; font-size: 11.5px; line-height: 1.35; white-space: nowrap; }
.ultim .t b { display: block; font-weight: 500; color: var(--ink); }

span.punheadline,
tr.puntopic > td:nth-child(2) > a,
tr.puntopic > td:nth-child(2) > b > a {
	display: block; font-family: var(--ff); font-size: 15px; font-weight: 600;
	line-height: 1.35; color: var(--ink); margin-bottom: 1px;
}
span.punheadline a { color: var(--ink); }
tr.puncon1:hover span.punheadline a,
tr.puntopic:hover > td:nth-child(2) a { color: var(--accent); text-decoration: none; }
span.meta-line { display: block; font-size: 12px; color: var(--meta); }

/* Autorul are acum linia lui de meta sub titlu, deci coloana separata din
   viewforum.php nu mai spune nimic nou. */
tr.puntopic > td:nth-child(3),
table.punmain:has(tr.puntopic) tr.punhead td:nth-child(3) { display: none; }

/* cifrele, cu eticheta coloanei dedesubt */
td.stat { text-align: right; white-space: nowrap; }
td.stat .n {
	display: block; font-size: 14px; font-weight: 600; color: var(--ink);
	font-variant-numeric: tabular-nums; line-height: 1.2;
}
td.stat .l { display: block; font-size: 11px; color: var(--meta); }
td.puncent { text-align: right; }
td.punright, td.puntopright { text-align: right; }
td.puntop, td.puntopright { vertical-align: top; }

/* --- postarile ------------------------------------------------------------ */
td.punbar {
	padding: 8px 18px; background: var(--wash);
	border-bottom: 1px solid var(--rule-soft);
	font-size: 12.5px; color: var(--meta);
	overflow: hidden;
}
td.punbar .when { float: left; }
td.punbar .nr { float: right; font-variant-numeric: tabular-nums; }

table.punmain > tbody > tr > td.puntop:first-child {
	width: 176px; padding: 15px 14px; vertical-align: top; text-align: center;
	border-right: 1px solid var(--rule-soft);
	font-size: 11.5px; color: var(--meta); line-height: 1.6;
}
table.punmain > tbody > tr > td.puntop:first-child div { width: auto !important; }
img.punavatar {
	width: 64px; height: 64px; object-fit: cover; border-radius: 50%;
	border: 1px solid var(--rule); background: var(--wash);
	display: block; margin: 0 auto 8px;
}
table.punmain > tbody > tr > td.puntop:first-child span.punheadline {
	font-size: 14.5px; margin-bottom: 3px;
}
span.rank {
	display: inline-block; font-size: 11px; font-weight: 500;
	padding: 2px 9px; border-radius: 999px;
	background: var(--accent); color: var(--on-accent); margin-bottom: 5px;
}
span.rank:empty { display: none; }

table.punmain > tbody > tr > td.puntop + td.puntop { padding: 15px 18px 2px; vertical-align: top; }
table.punplain[style*="table-layout"] span.puntext {
	display: block; font-family: var(--ff-read); font-size: 16px; line-height: 1.65;
	color: var(--ink); max-width: 70ch;
	word-wrap: break-word; overflow-wrap: break-word;
}
table.punplain[style*="table-layout"] span.puntext img { max-width: 100%; }
td.punquote, .punquote {
	display: block; background: var(--quote); border: 0;
	border-left: 3px solid var(--rule); border-radius: 0 7px 7px 0;
	padding: 10px 14px; margin: 3px 0 11px; font-size: 15px; color: var(--meta);
}
span.punsignature {
	display: block; margin-top: 14px; padding-top: 10px;
	border-top: 1px solid var(--rule-soft);
	font-family: var(--ff); font-size: 12px; color: var(--meta);
}
span.punsignature img { max-width: 100%; }
span.punedited { display: inline-block; margin-top: 9px; font-size: 12px; font-style: italic; color: var(--meta); }

/* rindul de actiuni de sub postare */
table.punmain > tbody > tr:has(> td.puntop) + tr > td {
	padding: 9px 16px 11px; border-top: 1px solid var(--rule-soft);
	color: var(--meta); font-size: 12.5px; vertical-align: middle;
}
table.punmain > tbody > tr:has(> td.puntop) + tr td.punright { text-align: right; }
table.punmain > tbody > tr:has(> td.puntop) + tr a { color: var(--meta); }
table.punmain > tbody > tr:has(> td.puntop) + tr a:hover { color: var(--accent); }

/* --- formulare ------------------------------------------------------------ */
td.puncon1right {
	width: 170px; padding: 13px 14px 13px 18px;
	border-bottom: 1px solid var(--rule-soft);
	text-align: left; vertical-align: top; white-space: normal;
	color: var(--meta); font-size: 13px;
}
table.punmain:has(td.puncon1right) td.puncon2 {
	padding: 11px 18px; border-bottom: 1px solid var(--rule-soft);
	vertical-align: top; color: var(--ink); font-size: 14px;
}
input[type="text"], input[type="password"], input[type="email"],
input[type="url"], input[type="number"], textarea, select {
	font: 14.5px/1.5 var(--ff); color: var(--ink); background: var(--paper);
	border: 1px solid var(--rule); border-radius: 8px; padding: 9px 12px; max-width: 100%;
}
input[type="text"], input[type="password"], input[type="email"], select { width: 100%; max-width: 420px; }
textarea {
	display: block; width: 100%; font-family: var(--ff-read); font-size: 16px;
	line-height: 1.6; min-height: 180px; resize: vertical;
}
input:focus, textarea:focus, select:focus {
	outline: 0; border-color: var(--accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
input[type="submit"], input[type="button"], button {
	font: 500 14px var(--ff); background: var(--accent); color: var(--on-accent);
	border: 0; border-radius: 8px; padding: 10px 19px; cursor: pointer;
}
input[type="submit"]:hover, input[type="button"]:hover, button:hover { filter: brightness(1.08); }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); }
input[type="file"] { font: 13.5px var(--ff); color: var(--meta); max-width: 100%; }

/* --- subsolul ------------------------------------------------------------- */
table.punmain.no-mob tr.puncon3 > td.puncon3 { padding: 14px 18px; font-size: 12.5px; color: var(--meta); }

/* --- reclama de sus ------------------------------------------------------- */
body > center { display: block; margin: 0 0 12px; padding: 6px 0; overflow-x: auto; }

/* --- fisa "Nou pe simpatie" ----------------------------------------------
   Creativul vine de la simpatie.ro prin header.php ($sonerii) si sta in a
   treia celula a antetului -- pe desktop, in dreapta, unde era si inainte de
   refactor. Aduce venit, deci primeste tratamentul unei fise de produs: foaie
   alba pe bara colorata, poza rotunjita, numele ca link pe culoarea temei.

   Vine in doua forme, dupa cum a fost cerut creativul: cea de telefon are trei
   celule intr-un <table width="100%">, cea de desktop are eticheta si numele
   in text, urmate de un <table> fara atribute. Atributul width le desparte. */
table.punmast > tbody > tr.punhead > td.punsonerii {
	flex: 0 0 262px;
	align-self: center;
	background: var(--paper);
	border-radius: 10px;
	padding: 10px 12px;
	margin: 10px 16px 10px 0;
	color: var(--meta);
	font-size: 11px;
	line-height: 1.35;
	text-align: left;
}
/* fara creativ, celula ramine goala: nicio foaie alba pe degeaba */
td.punsonerii:empty { display: none; }

td.punsonerii a {
	display: block; font-size: 12.5px; font-weight: 600;
	color: var(--accent); margin: 1px 0 6px;
}
td.punsonerii img {
	display: block; width: 56px; height: 56px; border-radius: 8px;
	object-fit: cover; border: 1px solid var(--rule);
}
td.punsonerii table { width: auto; }
td.punsonerii table td { padding: 0; vertical-align: top; text-align: left; }
td.punsonerii table td + td { padding-left: 10px; }

td.punsonerii table[width] > tbody > tr {
	display: grid; grid-template-columns: 56px minmax(0, 1fr);
	grid-template-areas: "foto nume" "foto date";
	align-items: center; column-gap: 11px;
}
td.punsonerii table[width] > tbody > tr > td { display: block; padding: 0; }
td.punsonerii table[width] > tbody > tr > td:nth-child(1) { grid-area: foto; }
td.punsonerii table[width] > tbody > tr > td:nth-child(2) { grid-area: date; }
td.punsonerii table[width] > tbody > tr > td:nth-child(3) { grid-area: nume; }
td.punsonerii table[width] a { margin: 0 0 2px; }


/* ==========================================================================
   Banda de telefon. header.php incarca aceeasi foaie pe toate latimile, deci
   forumul isi pastreaza culoarea si aici.
   ========================================================================== */
@media (max-width: 1023px) {

	body { padding: 7px 9px 32px; }
	.no-mob { display: none !important; }

	/* Tabelele inceteaza sa mai fie tabele: latimile in procente si cei 185px ai
	   coloanei de autor sint scrise in markup si ar lati pagina peste ecran. */
	table.punmain,
	table.punmain > tbody,
	table.punmain > tbody > tr { display: block; }
	table.punmain > tbody > tr > td { display: block; width: auto !important; max-width: 100%; }
	table.punmain { border-radius: 10px; margin-bottom: 9px; }
	table.punplain, table.punplain td { max-width: 100%; }

	/* antetul */
	table.punmast > tbody > tr.punhead { flex-wrap: wrap; gap: 2px; }
	table.punmast > tbody > tr.punhead > td { padding: 12px 15px 8px; }
	table.punmast > tbody > tr.punhead > td.punstatus { padding: 0 15px 10px; text-align: left; }
	/* fisa nu incape linga titlu la 390px, deci trece dedesubt, pe toata latimea */
	table.punmast > tbody > tr.punhead > td.punsonerii { flex: 1 1 100%; margin: 0 12px 12px; }
	span.puntitle { font-size: 18px; }
	table.punmast > tbody > tr > td.puncon1 { padding: 0 6px; }
	table.punmast > tbody > tr > td.puncon1 a { padding: 9px 11px; font-size: 13px; }

	/* capetele de coloana n-au ce cauta pe 390px */
	table.punmain > tbody > tr.punhead:has(td.punheadcent) { display: none; }
	tr:not(.puncon3) > td.puncon3 { padding: 8px 15px; }

	/* rindul de lista devine card, cu pastila la stinga */
	table.punmain > tbody > tr.puncon1:has(> td.puncent),
	table.punmain > tbody > tr.puntopic {
		display: flex; flex-wrap: wrap; align-items: flex-start;
		column-gap: 12px; row-gap: 3px;
		padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule-soft);
	}
	table.punmain > tbody > tr.puncon1:has(> td.puncent) > td,
	table.punmain > tbody > tr.puntopic > td {
		display: block; border-bottom: 0; padding: 0; width: auto !important;
		flex: 0 0 auto; text-align: left; font-size: 12px;
	}
	table.punmain > tbody > tr.puncon1:has(> td.puncent) > td:first-child,
	table.punmain > tbody > tr.puntopic > td:first-child { flex: 0 0 44px; padding: 0 0 0 14px; }
	table.punmain > tbody > tr.puncon1:has(> td.puncent) > td:first-child::before {
		width: 36px; height: 36px; border-radius: 10px;
		background-position: 9px 12px, 9px 18px;
		background-size: 17px 3px, 11px 3px;
	}
	.punav { width: 36px; height: 36px; }
	.ultim .punav { width: 26px; height: 26px; flex: 0 0 26px; }
	.ultim .t { white-space: normal; }
	table.punmain > tbody > tr.puncon1:has(> td.puncent) > td:nth-child(2),
	table.punmain > tbody > tr.puntopic > td:nth-child(2) { flex: 1 1 calc(100% - 72px); }
	span.punheadline,
	tr.puntopic > td:nth-child(2) > a,
	tr.puntopic > td:nth-child(2) > b > a { font-size: 15px; }

	/* cifrele se aseaza pe o linie proprie, cu eticheta linga ele */
	table.punmain > tbody > tr.puncon1:has(> td.puncent) > td.stat,
	table.punmain > tbody > tr.puntopic > td.stat { display: block !important; margin-left: 56px; }
	table.punmain > tbody > tr.puncon1:has(> td.puncent) > td.stat:first-of-type,
	table.punmain > tbody > tr.puntopic > td.stat { margin-left: 0; }
	table.punmain > tbody > tr.puncon1:has(> td.puncent) > td.stat ~ td.stat { margin-left: 0; }
	td.stat .n, td.stat .l { display: inline; font-size: 12px; }
	td.stat .l { margin-left: 4px; }
	td.stat .n { font-weight: 600; }
	td.stat .l { color: var(--meta); }
	/* prima cifra se aliniaza sub titlu, restul curg dupa ea */
	table.punmain > tbody > tr.puncon1:has(> td.puncent) > td:nth-child(3),
	table.punmain > tbody > tr.puntopic > td:nth-child(4) { margin-left: 56px !important; }

	/* ultimul mesaj ramine, autorul nu: e deja in linia de meta */
	table.punmain > tbody > tr.puncon1:has(> td.puncent) > td:nth-child(6) { display: none !important; }

	/* postarea: coloana autorului devine antet */
	td.punbar { padding: 8px 15px; }
	table.punmain > tbody > tr > td.puntop:first-child {
		display: flex; align-items: center; gap: 11px; text-align: left;
		border-right: 0; border-bottom: 1px solid var(--rule-soft);
		padding: 11px 15px;
	}
	table.punmain > tbody > tr > td.puntop:first-child table.punplain,
	table.punmain > tbody > tr > td.puntop:first-child table.punplain tbody,
	table.punmain > tbody > tr > td.puntop:first-child table.punplain tr,
	table.punmain > tbody > tr > td.puntop:first-child table.punplain td { display: block; }
	table.punmain > tbody > tr > td.puntop:first-child div { width: auto !important; }
	table.punmain > tbody > tr > td.puntop:first-child span.punheadline { text-align: left; }
	img.punavatar { width: 42px; height: 42px; float: right; margin: 0 0 6px 12px; }
	table.punmain > tbody > tr > td.puntop + td.puntop { padding: 13px 15px 2px; }
	table.punplain[style*="table-layout"] span.puntext { max-width: none; }
	table.punmain > tbody > tr:has(> td.puntop) + tr { display: flex; flex-wrap: wrap; }
	table.punmain > tbody > tr:has(> td.puntop) + tr > td { width: auto !important; padding: 8px 15px 10px; }
	table.punmain > tbody > tr:has(> td.puntop) + tr > td:last-child { margin-left: auto; }

	/* formularele se stivuiesc */
	td.puncon1right { display: block; width: auto; border-bottom: 0; padding: 13px 15px 4px; }
	table.punmain:has(td.puncon1right) td.puncon2 { display: block; padding: 0 15px 13px; }

	table.punspacer:has(td.punright) tr { padding: 9px 14px; }
	table.punspacer td.punright { margin-left: 0; }

	/* Comportament pastrat: blocurile de reclama din <center> nu se afiseaza. */
	body center div { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; }
}