/* ===========================================================================
   Violet -- 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: #B049CA pe lumina, #BC65D2 pe intuneric
           (contrast 4.5:1 si 4.6:1; tema veche avea #F09EFE).
   =========================================================================== */

/* --- 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:    #B049CA;
	--on-accent: #FFFFFF;

	/* cromatica de cadru: bara de sus si rindul de file */
	--bar:   #882E9E;
	--bar-2: #A638C2;

	--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:    #BC65D2;
		--on-accent: #14171A;
		--bar:       #2C0F33;
		--bar-2:     #3D1547;
	}
}

/* --- 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;
	/* Era 0, ca antetul sa para un bloc singur. Dar ce urmeaza -- unitatea de
	   reclama sau lista -- ajungea lipit de bara de file. */
	margin-bottom: 12px;
}
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;
}
/* Starea si linkul catre reteaua de forumuri au avut celula lor in mijlocul
   antetului, unde strangeau titlul intre doua coloane. Acum stau la capatul
   din dreapta al barii de file: aceeasi informatie, zero inaltime in plus. */
span.punmeta {
	/* margin-left:auto merge fiindca e element flex al barii de file; in schimb
	   inauntru textul trebuie sa curga normal -- ca inline-flex cu gap, fiecare
	   bucata de text devenea element separat si fraza se rupea inainte de punct. */
	margin-left: auto;
	padding-left: 18px;
	display: block;
	font-size: 12px;
	color: rgba(255,255,255,.72);
	white-space: nowrap;
}
span.punmeta b { color: #fff; font-weight: 600; }
table.punmast > tbody > tr > td.puncon1 span.punmeta a {
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	padding: 0;
	margin: 0 0 0 14px;
	border-bottom: 0;
}
table.punmast > tbody > tr > td.puncon1 span.punmeta a:hover {
	background: transparent;
	text-decoration: underline;
}

table.punmast > tbody > tr > td.puncon1 {
	display: flex; align-items: center; 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; }
}

/* Distantierul gol din PunBB: <tr><td>&nbsp;</td></tr>, o singura celula si
   nimic in ea. Tine loc de margine intre tabele, dar tabelele isi au acum
   marginea lor, iar el adauga 27px de nimic plus inca 12 de margine proprie.
   :only-child il deosebeste de barile de actiuni, care au mai multe celule --
   verificat pe toate aparitiile din aplicatie: cele cu o singura celula sint
   goale fara exceptie. */
table.punspacer:has(> tbody > tr > td:only-child):not(:has(td.punright)) { display: none; }

/* --- 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; }
/* paginarea, mutata aici din capul firului */
td.pagini { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
td.pagini a, td.pagini strong {
	min-width: 26px; text-align: center; padding: 4px 7px; border-radius: 6px;
	border: 1px solid var(--rule); font-size: 12px; font-weight: 400; color: var(--meta);
}
td.pagini strong { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 500; }
td.pagini a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
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 ------------------------------------------------------- */
/* Copil direct, nu descendent: cu " td" simplu, regula prindea si celulele
   tabelului dinauntrul reclamei din antet -- care sta intr-un tr.punhead -- si
   le desena o bordura de cap de coloana pe sub datele profilului. */
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: flex; align-items: center; gap: 8px; }
/* Coloana "ultimul mesaj" se aliniaza la stinga, cap si continut: chipul e
   primul element, si numai asa ajung toate pe aceeasi verticala. */
td:has(> .ultim) { text-align: left; }
table.punmain:has(td.puncon3) tr.punhead td:nth-child(5),
table.punmain:has(td.puncon3) tr.punhead td:nth-child(6),
table.punmain:has(tr.puntopic) tr.punhead td:nth-child(6) { text-align: left; }
/* moderatorii, la fel: doua coloane vecine, una la stinga si alta la dreapta,
   lasau intre ele o banda goala cit jumatate de tabel */
tr.puncon1:has(> td.puncent) > td:nth-child(6) { 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 1 auto;
	max-width: 330px;
	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;
}
/* max-width: none anuleaza regula generala img { max-width: 100% }: creativul
   de mobil vine cu <td width=80>, iar celula stivuita in grid ajunge un bloc
   de 80px, care taia poza de 104px la 80x104 -- patrata la sursa, turtita pe
   ecran. Celula primeste si ea 104px, ca poza sa nu-i iasa din cutie. */
td.punsonerii img {
	display: block; width: 104px; height: 104px; border-radius: 9px;
	object-fit: cover; border: 1px solid var(--rule); max-width: none;
}
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: 104px 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; width: 104px;
}
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; }

/* --- unitatea de linkuri promovate (filehost.ro / show.file) --------------
   Vine prin document.write in <pun_announcement>. Markupul e din 2005: trei
   tabele imbricate, culori puse ca atribute, <font> pentru text. Nu poate fi
   schimbat de aici, dar clasa .ch de pe celula fiecarui anunt e destula.

   Forma aleasa e cea de rezultat de cautare: titlu-link, descriere, sursa.
   Cistigul vine din faptul ca linkul devine tot blocul -- inainte se putea da
   clic doar pe textul titlului, 79x17 pixeli.

   Tabelul care le contine iese si el din asezarea de tabel: cit ramine
   table-cell, celula .ch primeste inaltimea liniei si isi taie continutul. */
table.punmain:has(td.ch),
table.punmain:has(td.ch) > tbody,
table.punmain:has(td.ch) > tbody > tr { display: block; }

td.puncon2:has(td.ch) { display: block; padding: 11px 13px; }
td.puncon2:has(td.ch)::before {
	content: "Publicitate";
	display: block;
	font-size: 10.5px;
	color: var(--meta);
	margin-bottom: 9px;
}
td.puncon2:has(td.ch) > br { display: none; }

/* :not(.ch) -- altfel resetul, avind specificitate mai mare, sterge fisei
   fundalul si linia de separare. */
td.puncon2:has(td.ch) table,
td.puncon2:has(td.ch) tbody,
td.puncon2:has(td.ch) tr,
td.puncon2:has(td.ch) td:not(.ch) {
	display: block;
	width: auto;
	padding: 0;
	background: transparent;
	border: 0;
}

/* table.punmain td { background: transparent } din sistem bate .ch pe
   specificitate, de aceea selectorul are tabelul in fata. */
table.punmain td.ch {
	display: block;
	width: auto;
	/* cellpadding="4" de pe tabelul creativului adauga patru pixeli sus si jos
	   in jurul unei fise care isi are deja spatiul din a si font. */
	padding: 0;
	/* Creativul pune height="41" pe fiecare celula. Cu inaltimea fixata, textul
	   se revarsa peste ce urmeaza -- overflow e visible, deci nu se taie, se
	   suprapune. */
	height: auto;
	background: var(--paper);
	border-top: 1px solid var(--rule-soft);
}
table.punmain tr > td.ch:first-child { border-top: 0; }
td.ch br { display: none; }

td.ch a {
	display: block;
	padding: 10px 10px 2px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--accent);
	text-decoration: none;
}
td.ch:hover a { text-decoration: underline; }

/* Creativul isi pune marimile si culorile prin atribute <font>, uneori
   imbricate. !important e singurul mod de a avea o unitate care arata la fel
   indiferent ce trimite reteaua. */
td.ch > font {
	display: block;
	padding: 0 10px;
	font-size: 13px !important;
	line-height: 1.45;
	color: var(--ink) !important;
}
td.ch > font:last-of-type {
	padding: 3px 10px 11px;
	font-size: 11.5px !important;
	color: var(--meta) !important;
}
td.ch font font { font-size: inherit !important; color: inherit !important; }



/* ==========================================================================
   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 {
		display: block; white-space: normal; overflow-x: visible; padding: 0 8px 6px;
	}
	span.punmeta {
		display: block; margin: 4px 3px 0; padding: 7px 0 0;
		white-space: normal;
		border-top: 1px solid rgba(255,255,255,.16);
	}
	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; }

	/* Subsolul de pe prima pagina: statisticile in stinga si drepturile in
	   dreapta stau alaturi doar pe desktop. Pe telefon coloana din dreapta e
	   pusa pe nowrap din markup si stringea textul din stinga intr-o banda de
	   citeva litere, deci cele doua celule trec una sub alta. */
	table.punplain:has(> tbody > tr > td.puntopright),
	table.punplain:has(> tbody > tr > td.puntopright) > tbody,
	table.punplain:has(> tbody > tr > td.puntopright) > tbody > tr,
	table.punplain:has(> tbody > tr > td.puntopright) > tbody > tr > td {
		display: block; margin-right: 0 !important;
	}
	table.punplain > tbody > tr > td.puntopright {
		white-space: normal !important; text-align: left; padding-top: 10px;
	}

	/* 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; }

	/* Unitatea de linkuri promovate, mai strinsa: pe un ecran de 390px fiecare
	   rind de spatiu alb costa un forum mai putin vazut fara derulare. */
	td.puncon2:has(td.ch) { padding: 9px 10px; }
	td.puncon2:has(td.ch)::before { margin-bottom: 6px; font-size: 10px; }
	td.ch a { padding: 8px 10px 1px; font-size: 15px; }
	td.ch > font { font-size: 12.5px !important; line-height: 1.4; }
	td.ch > font:last-of-type { padding: 2px 10px 9px; font-size: 11px !important; }

	/* 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; }
}