/* =============================================================================
   A TIPOGRAFIA DO ARQUIVO — uma escala só, para o site inteiro.

   O QUE ESTE ARQUIVO RESOLVE

   O acervo cresceu página por página, e cada página escolheu o seu tamanho: o
   mesmo rótulo de tabela aparecia com 10px numa tela, 12px na seguinte e 13px
   na terceira; o vermelho do clube tinha quatro versões (#cc0000, #dc2626,
   #b91c1c, #e11d48) e o verde da vitória, duas. Ninguém lê isso como "quatro
   vermelhos" — lê como um site desalinhado, e a diferença de 1px entre dois
   rótulos iguais é justamente a que cansa sem que se saiba por quê.

   Aqui ficam OITO degraus de tamanho e SEIS tintas. Não há nada entre eles: se
   um texto precisa de um tamanho novo, ou ele é um dos oito, ou a escala é que
   está errada e muda aqui — não na página.

   COMO ISTO CONVERSA COM O TEMA

   Quando o tema Arquivo Clean está ativo, ele é a fonte da verdade: cada valor
   abaixo aponta primeiro para o token do tema (`--arqc-…`) e só usa o número
   próprio como reserva. Trocar o vermelho do clube no tema troca o vermelho
   aqui também. Com outro tema, o plugin continua de pé sozinho.

   E NÃO ENCOSTA NO PALCO. Esta folha é do plugin do arquivo; as telas do
   Escalação Tática desenham a si mesmas e tiram da fila tudo o que não é
   delas.
   ============================================================================= */

:root {
	/* A FONTE — uma só, a do sistema de quem lê. */
	--ac-fonte: var(
		--arqc-fonte,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		"Helvetica Neue",
		Arial,
		"Noto Sans",
		sans-serif
	);

	/* ── OS SETE DEGRAUS ──────────────────────────────────────────────────
	 *
	 * mini      selo, legenda de foto, rodapé de tabela
	 * apoio     rótulo de campo, texto secundário
	 * lista     célula de tabela, item de lista
	 * corpo     o texto que se lê de verdade
	 * destaque  primeira linha de um cartão, número grande de estatística
	 * titulo3   título de bloco dentro do cartão
	 * titulo2   título de seção
	 * titulo1   o nome da página
	 *
	 * O menor é 12px: os 10px que havia em selos e legendas eram menores do
	 * que o mínimo confortável de leitura em celular. E entre um degrau e o
	 * seguinte há sempre pelo menos 2px — o 14 e o 14,5 que existiam lado a
	 * lado não eram dois tamanhos, eram um tamanho e um deslize.
	 */
	--ac-mini: var(--arqc-t-mini, 12px);
	--ac-apoio: var(--arqc-t-apoio, 14px);
	--ac-corpo: var(--arqc-t-corpo, 16px);
	--ac-destaque: var(--arqc-t-destaque, 19px);
	--ac-titulo3: var(--arqc-t-titulo3, 23px);
	--ac-titulo2: var(--arqc-t-titulo2, 29px);
	--ac-titulo1: var(--arqc-t-titulo1, clamp(32px, 4.5vw, 42px));

	/* Acima da escala, e só uma vez por site: o nome na capa. */
	--ac-hero: var(--arqc-t-hero, clamp(36px, 5vw, 50px));

	/* Texto pequeno respira mais; título, menos. */
	--ac-entrelinha: 1.55;
	--ac-entrelinha-titulo: 1.15;

	/* ── AS SEIS TINTAS ───────────────────────────────────────────────── */
	--ac-texto: var(--arqc-tinta, #16181d);
	--ac-texto-fraco: var(--arqc-suave, #667085);
	--ac-texto-claro: var(--arqc-claro, #ffffff);
	--ac-marca: var(--arqc-clube, #c1121f);

	/*
	 * RESULTADO: três cores, e nenhuma outra.
	 *
	 * O verde #00cc00 e o amarelo #ffcc00 que circulavam pelas fichas eram
	 * cores de tela de jogo, não de texto: sobre branco, o amarelo dava 1,7
	 * de contraste — some. Estes três passam em contraste tanto ESCRITOS
	 * sobre branco quanto PREENCHENDO um pedaço da barra com número branco
	 * em cima.
	 *
	 * O amarelo é a exceção que se explica: nenhum tom que ainda pareça
	 * amarelo aguenta texto branco. Então o empate tem duas entradas — a
	 * escura, para quando ele é texto ou ícone; e a viva, para quando é
	 * preenchimento, aí com tinta escura por cima.
	 */
	--ac-vitoria: var(--arqc-vitoria, #12783e);
	--ac-empate: var(--arqc-empate, #8a5a00);
	--ac-derrota: var(--arqc-derrota, #c1121f);

	--ac-empate-fundo: var(--arqc-empate-fundo, #e0a800);
	--ac-empate-tinta: var(--arqc-empate-tinta, #3d2f00);
}

/* =============================================================================
   O CORPO DAS PÁGINAS DO ARQUIVO

   Escopo curto de propósito: estes três são os invólucros que as páginas do
   acervo usam — `.ac-wrap` nas fichas e listas, `.ac-game` na página do jogo,
   `.ac-front` na capa. Fora deles, quem manda é o tema.
   ============================================================================= */

.ac-wrap,
.ac-game,
.ac-front {
	font-family: var(--ac-fonte);
	font-size: var(--ac-corpo);
	line-height: var(--ac-entrelinha);
	color: var(--ac-texto);
}

.ac-wrap :is(h1, h2, h3, h4),
.ac-game :is(h1, h2, h3, h4),
.ac-front :is(h1, h2, h3, h4) {
	font-family: var(--ac-fonte);
	line-height: var(--ac-entrelinha-titulo);
	color: var(--ac-texto);
	text-wrap: balance;
}

.ac-wrap h1,
.ac-game h1,
.ac-front h1 {
	font-size: var(--ac-titulo1);
	letter-spacing: -0.02em;
}

.ac-wrap h2,
.ac-game h2,
.ac-front h2 {
	font-size: var(--ac-titulo2);
	letter-spacing: -0.01em;
}

.ac-wrap h3,
.ac-game h3,
.ac-front h3 {
	font-size: var(--ac-titulo3);
}

.ac-wrap h4,
.ac-game h4,
.ac-front h4 {
	font-size: var(--ac-destaque);
}

/* Um título de cartão é um título de bloco, não um título de página. */
.ac-card h3,
.ac-box h3 {
	font-size: var(--ac-titulo3);
}

.ac-card h4,
.ac-box h4 {
	font-size: var(--ac-destaque);
}

/*
 * O TÍTULO QUE ABRE UM CARTÃO ENCOSTA NO TOPO DELE.
 *
 * Todo título carrega uma margem em cima — ela é o que o separa do parágrafo
 * anterior. Mas quando ele é a PRIMEIRA coisa dentro de um cartão não existe
 * parágrafo anterior: a margem se soma ao respiro interno e vira um palmo de
 * branco entre a moldura e o "Últimos jogos". Num h2 de 29px são uns quarenta
 * pixels de nada, e o cartão parece ter começado antes do próprio título.
 *
 * A regra vale também para a última coisa de cada cartão: o mesmo excesso
 * acontecia embaixo, com a margem do último parágrafo afastando a borda do
 * conteúdo.
 */
.ac-box > :first-child,
.ac-card > :first-child,
.ac-panel > :first-child,
.ac-wrap section > :first-child,
.ac-game section > :first-child,
.ac-front section > :first-child {
	margin-top: 0;
}

.ac-box > :last-child,
.ac-card > :last-child,
.ac-panel > :last-child,
.ac-wrap section > :last-child,
.ac-game section > :last-child,
.ac-front section > :last-child {
	margin-bottom: 0;
}

/* =============================================================================
   TABELAS E LISTAS — onde mora quase todo o texto do acervo
   ============================================================================= */

.ac-wrap table,
.ac-game table,
.ac-front table,
.ac-table {
	font-size: var(--ac-apoio);
	color: var(--ac-texto);
}

.ac-wrap th,
.ac-game th,
.ac-front th,
.ac-table th {
	font-size: var(--ac-apoio);
	color: var(--ac-texto-fraco);
	font-weight: 700;
}

.ac-toplist,
.ac-stat-list {
	font-size: var(--ac-apoio);
}

/* =============================================================================
   TEXTO DE APOIO, SELOS E LINKS
   ============================================================================= */

.ac-muted,
.ac-photo-fallback,
.ac-legenda {
	font-size: var(--ac-apoio);
	color: var(--ac-texto-fraco);
}

.ac-link {
	font-size: var(--ac-mini);
	color: var(--ac-marca);
}

/* =============================================================================
   LINKS — sem sublinhado

   O sublinhado sumiu do estado normal: numa página do acervo quase tudo é
   link — nome de jogador, adversário, competição, estádio, cada jogo da
   lista —, e sublinhar tudo transforma a página numa grade de riscos.

   O que fica no lugar dele: a cor da marca marca o link, e ao passar o mouse
   ou chegar pelo teclado o sublinhado VOLTA. Tirar as duas coisas deixaria o
   link indistinguível de texto vermelho qualquer.
   ============================================================================= */

.ac-wrap a,
.ac-game a,
.ac-front a {
	color: var(--ac-marca);
	text-decoration: none;
}

.ac-wrap a:hover,
.ac-game a:hover,
.ac-front a:hover,
.ac-wrap a:focus-visible,
.ac-game a:focus-visible,
.ac-front a:focus-visible {
	text-decoration: underline;
}

/* =============================================================================
   SEM FOTO — as iniciais no lugar do retrato

   O acervo tem muita gente sem retrato. A caixa tracejada escrita "sem foto"
   ocupava o mesmo espaço da foto e não dizia nada sobre quem era: vinte
   caixinhas iguais numa lista de elenco. As iniciais ocupam o mesmo espaço e
   distinguem uma pessoa da outra.
   ============================================================================= */

.ac-iniciais {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-width: 44px;
	min-height: 44px;
	aspect-ratio: 1;
	border-radius: 10px;
	background: var(--arqc-papel, #f6f7f9);
	border: 1px solid var(--arqc-borda, #e5e8ee);
	color: var(--ac-texto-fraco);
	font-size: var(--ac-apoio);
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1;
	overflow: hidden;
}

.ac-iniciais--grande {
	min-width: 72px;
	min-height: 72px;
	border-radius: 14px;
	font-size: var(--ac-titulo3);
}

/* =============================================================================
   "VER LISTA COMPLETA" — um botão, e no canto direito
   ============================================================================= */

.ac-header-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
}

.ac-link {
	/* `margin-left:auto` mantém o botão no canto mesmo quando o título quebra
	   e ele desce para a linha de baixo. */
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	border: 1px solid var(--arqc-borda-forte, #d3d8e2);
	border-radius: 999px;
	white-space: nowrap;
	text-decoration: none;
}

.ac-link:hover {
	border-color: var(--ac-marca);
	text-decoration: none;
}

/* =============================================================================
   RESULTADO — vitória, empate e derrota falam pelas mesmas três cores
   ============================================================================= */

.ac-res--v,
.ac-vitoria {
	color: var(--ac-vitoria);
}

.ac-res--e,
.ac-empate {
	color: var(--ac-empate);
}

.ac-res--d,
.ac-derrota {
	color: var(--ac-derrota);
}