/* =====================================================================
   <projeto sem nome> -- espaço aberto da NEW Intercambio

   Mesma identidade do newintercambio.com: os tokens abaixo são os do
   style.css do site (vinho #862029, papel #FAFAFA, raio 18/50, as duas
   sombras) e a mesma dupla de fontes -- Montserrat no texto, Fraunces nos
   títulos. Quem chega aqui vindo do site tem que sentir que é o mesmo lugar.

   O que muda em relação ao site: aqui a página é uma sequência de textos de
   gente, então o vinho aparece nos gestos (a marca no topo, o botão, o que é
   da equipe) e some do resto -- fundo colorido atrás de cada post
   competiria com o que está escrito neles.
   ===================================================================== */

:root {
	/* paleta da marca -- as mesmas do site */
	--ni-red:        #862029;
	--ni-red-bright: #B22234;
	--ni-slate:      #535353;
	--ni-ink:        #232323;
	--ni-paper:      #FAFAFA;
	--ni-paper-alt:  #F0EFED;
	--ni-border:     rgba(0, 0, 0, .08);

	--ni-radius:      18px;
	--ni-radius-pill: 50px;
	--ni-shadow-sm:   0 6px 18px rgba(35, 21, 12, .06);
	--ni-shadow:      0 20px 42px rgba(35, 21, 12, .12);

	/* só daqui pra baixo é coisa deste projeto */
	--ni-faint:   #8d8783;
	--ni-wash:    #F7EFEF;   /* vinho lavadíssimo, pro que é da equipe */
	--ni-ok:      #1f7a4d;
	--ni-ok-wash: #EAF4EE;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--ni-paper);
	color: var(--ni-ink);
	font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: 15.5px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
	font-weight: 600;
	line-height: 1.15;
	text-wrap: balance;
	margin: 0;
}

a { color: var(--ni-red); text-underline-offset: 2px; }
a:hover { color: var(--ni-red-bright); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
	outline: 2px solid var(--ni-red-bright);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ---------- topo ----------
   Faixa vinho com o leão, igual às páginas do NEW Link: é o gesto que diz
   "isto é da NEW" antes de qualquer texto. */
.site-header {
	background: var(--ni-red);
	color: #fff;
	position: sticky; top: 0; z-index: 20;
}
.site-header-in {
	max-width: 720px; margin: 0 auto; padding: 14px 20px;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand {
	display: flex; align-items: center; gap: 11px;
	color: #fff; text-decoration: none;
	font-family: 'Fraunces', Georgia, serif; font-size: 1.12rem; font-weight: 600;
}
.brand:hover { color: #fff; }
.brand img {
	width: 34px; height: 34px; border-radius: 50%;
	background: #fff; flex: 0 0 auto;
}
.btn-header {
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .3);
	color: #fff; text-decoration: none;
	font-size: .82rem; font-weight: 700;
	padding: 8px 18px; border-radius: var(--ni-radius-pill);
	transition: background .15s ease;
	white-space: nowrap;
}
.btn-header:hover { background: rgba(255, 255, 255, .26); color: #fff; }

.page { max-width: 720px; margin: 0 auto; padding: 26px 20px 80px; }

/* ---------- blocos ---------- */
.composer, .feed, .post, .replies {
	background: #fff;
	border: 1px solid var(--ni-border);
	border-radius: var(--ni-radius);
	box-shadow: var(--ni-shadow-sm);
	padding: 22px;
	margin-bottom: 18px;
}
.composer.narrow { max-width: 540px; }
.composer h1 { font-size: 1.5rem; margin-bottom: 10px; }

/* ---------- formulário ---------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: .78rem; font-weight: 700; color: var(--ni-slate); }
.opc { font-weight: 500; color: var(--ni-faint); }

input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select {
	font: inherit; color: var(--ni-ink);
	background: var(--ni-paper);
	border: 1px solid var(--ni-border);
	border-radius: 12px;
	padding: 12px 15px;
	width: 100%;
	transition: border-color .14s ease, background .14s ease;
}
input:focus, textarea:focus { background: #fff; border-color: rgba(134, 32, 41, .35); }
textarea { resize: vertical; line-height: 1.65; }
input::placeholder, textarea::placeholder { color: var(--ni-faint); }

.composer .form > textarea { min-height: 104px; font-size: 1rem; }
.send-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.name-field { flex: 1; min-width: 190px; border-radius: var(--ni-radius-pill); padding: 11px 18px; font-size: .88rem; }
.send-row .btn { flex: 0 0 auto; }
.hint { font-size: .78rem; color: var(--ni-faint); margin: 0; }
.hint-weak { margin-top: 16px; }
.composer .form > .hint { margin-top: -4px; }

.code-field {
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	letter-spacing: .14em; text-transform: uppercase; font-size: 1.05rem;
}

/* isca pro robô: fora da tela, e não display:none -- alguns robôs pulam
   campo escondido por display e caem justamente neste. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- botões ---------- */
.btn {
	display: inline-block; border: 0; cursor: pointer;
	font: inherit; font-size: .87rem; font-weight: 700;
	padding: 11px 26px; border-radius: var(--ni-radius-pill); text-decoration: none;
	transition: background .15s ease, transform .12s ease;
}
.btn-primary { background: var(--ni-red); color: #fff; }
.btn-primary:hover { background: var(--ni-red-bright); color: #fff; transform: translateY(-1px); }
.btn-text {
	background: none; border: 0; cursor: pointer; font: inherit; padding: 0;
	font-size: .85rem; color: var(--ni-slate); text-decoration: underline;
}
.btn-mini {
	background: #fff; border: 1px solid var(--ni-border); border-radius: var(--ni-radius-pill);
	font: inherit; font-size: .76rem; font-weight: 700; color: var(--ni-slate);
	padding: 6px 15px; cursor: pointer;
}
.btn-mini:hover { border-color: var(--ni-red); color: var(--ni-red); }
.btn-delete {
	background: none; border: 0; cursor: pointer; font: inherit; padding: 0;
	font-size: .85rem; color: var(--ni-red-bright); text-decoration: underline;
	margin-left: auto;
}
.edit-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* ---------- avisos ---------- */
.alert-error, .alert-ok {
	border-radius: 12px; padding: 12px 16px; margin: 0 0 16px;
	font-size: .88rem; font-weight: 600;
}
.alert-error { background: var(--ni-wash); color: var(--ni-red); }
.alert-ok   { background: var(--ni-ok-wash); color: var(--ni-ok); }

/* ---------- caixa do código ----------
   O único bloco vinho no meio da página: é uma coisa pra copiar e guardar,
   não pra ler e seguir em frente. */
.code-box {
	background: var(--ni-red); color: #fff;
	border-radius: var(--ni-radius);
	box-shadow: var(--ni-shadow);
	padding: 24px; margin-bottom: 18px; text-align: center;
}
.code-box-title {
	font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	margin: 0 0 10px; opacity: .82;
}
.code-box .code {
	font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
	font-size: 1.9rem; font-weight: 600; letter-spacing: .18em;
	margin: 0 0 10px;
}
.code-box p:not(.code):not(.code-box-title) {
	font-size: .82rem; margin: 0 auto 14px; max-width: 44ch; opacity: .9; line-height: 1.6;
}
.code-box .btn-mini { background: #fff; border-color: #fff; color: var(--ni-red); }

/* ---------- lista ---------- */
.feed { padding: 10px; }
/* Um fundo sim, outro não (pedido do Renato): com linha divisória fina os
   textos escorriam uns nos outros e não dava pra ver onde um post acabava.
   A alternância usa o vinho lavado da marca -- o mesmo tom do fundo da
   resposta da equipe -- e não um cinza qualquer. */
.posts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.post-item { padding: 18px; border-radius: 12px; }
.post-item:nth-child(odd) { background: var(--ni-wash); }

.post-text {
	display: block; color: var(--ni-ink); text-decoration: none;
	font-size: 1rem; line-height: 1.7; margin: 6px 0 10px;
	overflow-wrap: break-word;
}
.post-text:hover { color: var(--ni-red); }
.post-replies { margin: 0; font-size: .8rem; font-weight: 700; color: var(--ni-faint); }
.post-item:hover .post-replies { color: var(--ni-red); }

.meta { font-size: .78rem; color: var(--ni-faint); margin: 0; }
.author { font-weight: 700; color: var(--ni-slate); }
/* Selo da equipe: a única assinatura que a página garante ser quem diz ser. */
.author-staff { color: var(--ni-red); }
.author-staff::after {
	content: '✓'; font-size: .62rem; margin-left: 5px;
	display: inline-block; vertical-align: middle;
}
.edited { font-style: italic; }

/* ---------- post e respostas ---------- */
.replies { padding: 10px; }
.body-text { margin: 10px 0 0; line-height: 1.75; overflow-wrap: break-word; }
.body-text a { overflow-wrap: anywhere; }
.actions {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
	margin-top: 16px; padding-top: 13px; border-top: 1px solid var(--ni-border);
}
.link-report, .link-edit {
	font-size: .78rem; color: var(--ni-faint); text-decoration: underline;
}
.link-report:hover, .link-edit:hover { color: var(--ni-red); }

/* Mesma alternância da lista: com linha fina uma resposta escorria na
   outra e não dava pra ver onde uma acabava (achado do Renato). */
.reply-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.reply { padding: 16px 18px; border-radius: 12px; }
.reply:nth-child(odd) { background: var(--ni-wash); }
.reply .body-text { font-size: .95rem; }
.reply .actions { margin-top: 12px; padding-top: 10px; }
/* Resposta da NEW: numa página cheia de gente anônima, a oficial é a que
   precisa ser achada primeiro. */
/* A da equipe nao pode se confundir com a alternancia: ganha a borda vinho
   cheia e um tom proprio, mais forte que o lavado das outras. */
.reply-staff,
.reply-list .reply-staff:nth-child(odd) {
	background: #F2E4E5;
	border-left: 3px solid var(--ni-red);
	border-radius: 4px 12px 12px 4px;
	padding: 16px 18px;
}

.empty { color: var(--ni-faint); font-size: .9rem; margin: 0; }
.back { margin: 4px 0 0; font-size: .85rem; }
.back a { text-decoration: none; font-weight: 700; }

/* ---------- rodapé ---------- */
.site-footer {
	max-width: 720px; margin: 0 auto; padding: 26px 20px 60px;
	border-top: 1px solid var(--ni-border);
	font-size: .78rem; color: var(--ni-faint);
	text-align: center;
}
/* Centralizado, as duas linhas viram um bloco só e precisam de mais ar entre
   elas -- encostadas, pareciam uma frase quebrada no meio. */
.site-footer p { margin: 0 0 7px; }
.site-footer p:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
	.page { padding: 20px 14px 60px; }
	.composer, .feed, .post, .replies { padding: 18px 16px; border-radius: 14px; }
	.code-box .code { font-size: 1.5rem; }
	.site-header-in { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}
/* A data exata mora no title; o cursor avisa que tem algo a mais ali. */
.meta time { cursor: help; border-bottom: 1px dotted transparent; }
.meta time:hover { border-bottom-color: var(--ni-faint); }

/* ---------- oferta do e-mail ----------
   Aparece junto do código: são as duas portas pra mesma coisa, e a pessoa
   escolhe qual prefere guardar -- um código no bloco de notas ou o e-mail
   que ela já sabe de cor. */
.claim {
	border: 1px solid var(--ni-border);
	border-radius: var(--ni-radius);
	background: #fff;
	padding: 20px 22px;
	margin-bottom: 18px;
}
.claim-tit { font-family: 'Fraunces', Georgia, serif; font-size: 1.05rem; font-weight: 600; margin: 0 0 6px; }
.claim > p { font-size: .86rem; color: var(--ni-slate); margin: 0 0 14px; max-width: 56ch; line-height: 1.6; }
.claim-form { display: flex; gap: 10px; flex-wrap: wrap; }
.claim-form input[type="email"] {
	flex: 1; min-width: 200px; border-radius: var(--ni-radius-pill);
	padding: 11px 18px; font-size: .88rem;
}
.claim-form .btn { flex: 0 0 auto; }
.claim .hint { margin-top: 10px; }

/* ---------- denúncia embaixo do próprio texto ----------
   Era uma página separada: a pessoa clicava, perdia de vista o que ia
   denunciar e tinha que confiar na memória. Agora abre aqui mesmo. */
.report-box {
	margin-top: 14px;
	border: 1px solid rgba(134, 32, 41, .25);
	border-radius: 12px;
	background: var(--ni-wash);
	padding: 16px 18px;
}
.report-box[hidden] { display: none; }
.report-form { display: flex; flex-direction: column; gap: 10px; }
.report-tit {
	font-size: .8rem; font-weight: 700; color: var(--ni-red);
	margin: 0; letter-spacing: .01em;
}
.report-form select, .report-form textarea { background: #fff; font-size: .88rem; }
.report-acoes { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.report-box .hint { margin: 0; }

/* O "Denunciar" virou botão: tem que continuar parecendo o link que era. */
button.link-report {
	background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
	font-size: .78rem; color: var(--ni-faint); text-decoration: underline;
}
button.link-report:hover { color: var(--ni-red); }
.site-nav { display: flex; align-items: center; gap: 16px; }
.site-nav > a:not(.btn-header) {
	color: #fff; text-decoration: none; font-size: .84rem; font-weight: 600;
	opacity: .88; white-space: nowrap;
}
.site-nav > a:not(.btn-header):hover { opacity: 1; color: #fff; text-decoration: underline; }
@media (max-width: 420px) { .site-nav > a:not(.btn-header) { display: none; } }

/* ---------- barra de sessão ----------
   Aparece só quando alguém está identificado. Fica logo abaixo do topo, na
   cor da marca mas mais clara, pra ser vista sem competir com o conteúdo. */
.session-bar { background: var(--ni-wash); border-bottom: 1px solid rgba(134, 32, 41, .18); }
.session-bar-in {
	max-width: 720px; margin: 0 auto; padding: 9px 20px;
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	font-size: .8rem; color: var(--ni-red);
}
.session-bar-in b { font-weight: 700; }
.session-out {
	flex: 0 0 auto; font-weight: 700; text-decoration: underline; color: var(--ni-red);
}
.session-out:hover { color: var(--ni-red-bright); }
@media (max-width: 480px) { .session-bar-in { font-size: .74rem; padding: 8px 14px; } }

/* Prévia do que está sendo editado ou denunciado: a pessoa não pode ter que
   lembrar de cabeça qual texto era. */
.edit-preview {
	margin: 0 0 20px; padding: 14px 16px;
	border-left: 3px solid var(--ni-border);
	background: var(--ni-paper);
	border-radius: 0 12px 12px 0;
}
.edit-preview-ctx { font-size: .76rem; color: var(--ni-faint); margin: 0 0 6px; }
.edit-preview-meta { font-size: .76rem; color: var(--ni-faint); margin: 0; }
.edit-preview .body-text { margin-top: 6px; font-size: .92rem; }
/* "Responder"/"N respostas" é link: tem que se comportar como um. */
.post-replies a { color: inherit; text-decoration: none; }
.post-replies a:hover { color: var(--ni-red); text-decoration: underline; }

/* Botão de idioma no topo, junto dos outros links: é escolha de quem lê, não
   configuração escondida. Pílula pra não competir com "Escrever". */
.site-nav .lang-switch {
	font-size: .74rem; font-weight: 700; letter-spacing: .06em;
	padding: 5px 11px; border-radius: 50px;
	border: 1px solid currentColor; opacity: .75;
	text-decoration: none;
}
.site-nav .lang-switch:hover { opacity: 1; }

/* ---------- update ---------- */
.rel {
	background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px;
	padding: 22px 24px; margin: 0 0 16px;
}
.rel-topo { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: .78rem; }
.rel-v {
	font-weight: 700; letter-spacing: .05em; color: #fff; background: #862029;
	padding: 3px 11px; border-radius: 999px; font-size: .72rem;
}
.rel-topo time { color: #6b6360; font-variant-numeric: tabular-nums; }
.rel-tit { font-family: 'Fraunces', Georgia, serif; font-size: 1.3rem; margin: 0 0 4px; text-wrap: balance; }
.rel-sub { color: #6b6360; font-size: .9rem; margin: 0 0 16px; }
.rel-lista { list-style: none; margin: 0; padding: 0; }
.rel-lista li { padding: 11px 0; border-top: 1px solid rgba(0,0,0,.07); display: flex; flex-direction: column; gap: 2px; }
.rel-lista li b { font-size: .93rem; }
.rel-lista li span { font-size: .86rem; color: #6b6360; line-height: 1.55; }

/* O link de Update no rodapé: menor e mais apagado que o resto, porque é
   consulta ocasional -- não é para disputar atenção com o texto de cima. */
.site-footer .foot-update { margin-top: 12px; }
.site-footer .foot-update a {
	font-size: .74rem; color: var(--ni-faint); text-decoration: none;
	border-bottom: 1px solid rgba(0,0,0,.12); padding-bottom: 1px;
}
.site-footer .foot-update a:hover { color: var(--ni-red); border-bottom-color: currentColor; }