/**
 * Telas do circuito: etapa, matriz de ementas, badges e verificação de
 * certificado.
 *
 * Nenhuma cor nova entra aqui. As pastilhas de situação usam os mesmos
 * quatro trios já medidos para o calendário, e o resto sai dos tokens de
 * texto e de linha. Cor nova exige rodar `node tools/contraste.mjs` de
 * novo, e o arquivo de tokens é o único lugar onde ela pode nascer.
 *
 * Toda tabela mora dentro de `.jv-tabela-rolagem`, que rola sozinha. É o
 * que impede a página inteira de rolar de lado a 320 px de largura.
 */

/* ---------------------------------------------------------------------
 * Largura da página da etapa.
 *
 * O tema deixa todo artigo com a largura de leitura, 38rem, que é o certo
 * para texto corrido. A grade de uma etapa tem quatro colunas e não cabe
 * ali sem virar uma pilha de linhas quebradas. Então a página da etapa abre
 * até a largura de conteúdo, e o texto corrido volta para 38rem por dentro,
 * com `.jv-prosa`.
 * ------------------------------------------------------------------ */

.jv-artigo--largo {
	max-width: var(--largura-conteudo);
}

.jv-prosa {
	max-width: var(--largura-texto);
}

/* ---------------------------------------------------------------------
 * Pastilha de situação. Mesma ideia da pastilha do calendário: a borda
 * existe porque o preenchimento claro sozinho não alcança 3:1 contra o
 * fundo, e o nome da situação vai escrito dentro, porque a cor nunca é o
 * único jeito de saber o que ela diz.
 * ------------------------------------------------------------------ */

.jv-situacao {
	display: inline-block;
	padding: var(--esp-1) var(--esp-3);
	border: 1px solid;
	border-radius: var(--raio-pequeno);
	font-family: var(--fonte-interface);
	font-size: var(--corpo-xs);
	font-weight: var(--peso-destaque);
	line-height: 1.3;
}

.jv-situacao--inscricao-aberta {
	background: var(--cor-sit-inscricao-aberta-fundo);
	color: var(--cor-sit-inscricao-aberta-texto);
	border-color: var(--cor-sit-inscricao-aberta-borda);
}

.jv-situacao--etapa {
	background: var(--cor-sit-etapa-fundo);
	color: var(--cor-sit-etapa-texto);
	border-color: var(--cor-sit-etapa-borda);
}

.jv-situacao--regional {
	background: var(--cor-sit-regional-fundo);
	color: var(--cor-sit-regional-texto);
	border-color: var(--cor-sit-regional-borda);
}

.jv-situacao--realizado {
	background: var(--cor-sit-realizado-fundo);
	color: var(--cor-sit-realizado-texto);
	border-color: var(--cor-sit-realizado-borda);
}

/* ---------------------------------------------------------------------
 * Faixa de etapa, no topo da ficha do evento.
 * ------------------------------------------------------------------ */

.jv-prazo {
	margin: var(--esp-2) 0 0;
	font-family: var(--fonte-interface);
	font-size: var(--corpo-sm);
	color: var(--cor-tinta-fraca);
}

.jv-prazo--aberto {
	color: var(--cor-ocre-texto);
	font-weight: var(--peso-destaque);
}

/* ---------------------------------------------------------------------
 * Tabelas. Grade, matriz de ementas e anexo do certificado usam a mesma.
 * ------------------------------------------------------------------ */

.jv-tabela-rolagem {
	overflow-x: auto;
	margin: 0 0 var(--esp-5);
}

.jv-tabela {
	width: 100%;
	border-collapse: collapse;
	background: var(--cor-branco);
	font-family: var(--fonte-interface);
	font-size: var(--corpo-sm);
}

.jv-tabela--estreita {
	width: auto;
	min-width: 16rem;
}

.jv-tabela th,
.jv-tabela td {
	padding: var(--esp-3);
	text-align: left;
	border-bottom: 1px solid var(--cor-linha);
	vertical-align: top;
}

.jv-tabela thead th {
	font-weight: var(--peso-destaque);
	color: var(--cor-tinta);
	border-bottom-width: 2px;
	white-space: nowrap;
}

.jv-tabela tbody th {
	font-weight: var(--peso-destaque);
	color: var(--cor-tinta);
}

.jv-tabela td {
	color: var(--cor-tinta-fraca);
}

.jv-tabela tbody tr:last-child th,
.jv-tabela tbody tr:last-child td {
	border-bottom: 0;
}

/* Número de coluna que se compara de cima para baixo precisa de largura
   de dígito fixa, senão a coluna dança. */
.jv-numero {
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------
 * Botão secundário.
 * ------------------------------------------------------------------ */

.jv-botao--discreto {
	min-height: var(--alvo-minimo);
	background: var(--cor-branco);
	color: var(--cor-serra);
	border: 1px solid var(--cor-serra);
}

.jv-botao--discreto:hover,
.jv-botao--discreto:focus-visible {
	background: var(--cor-sit-regional-fundo);
	color: var(--cor-sit-regional-texto);
}

/* -------------------------------------------------------------------------
 * Grade da etapa.
 *
 * A coluna de horário usa `tabular-nums` para as horas ficarem alinhadas
 * uma embaixo da outra. Sem isso, "8:00" e "11:15" desencontram e a coluna
 * dança linha a linha.
 * ---------------------------------------------------------------------- */

.jv-grade-dia + .jv-grade-dia {
	margin-block-start: 2rem;
}

.jv-grade .jv-hora {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.jv-codigo {
	font-family: var(--fonte-interface);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Caminhos.
 * ---------------------------------------------------------------------- */

.jv-caminhos {
	display: grid;
	gap: 1rem;
	margin: 0;
}

@media (min-width: 40rem) {
	.jv-caminhos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.jv-caminho {
	background: var(--cor-branco);
	border: 1px solid var(--cor-linha);
	border-radius: 2px;
	padding: 1rem;
}

.jv-caminho dt {
	font-weight: 700;
	margin-block-end: 0.25rem;
}

.jv-caminho dd {
	color: var(--cor-tinta-fraca);
	margin: 0;
}

.jv-caminhos-linha a {
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Classificação e chancela.
 *
 * A ausência de chancela é informação, e não falta de informação: ela ganha
 * borda à esquerda para se ler como um aviso, e não como um parágrafo
 * qualquer que se pula.
 * ---------------------------------------------------------------------- */

.jv-chancela,
.jv-classificacao {
	margin-block: 0.5rem;
}

.jv-chancela--ausente {
	border-inline-start: 3px solid var(--cor-msg-aviso-borda);
	background: var(--cor-msg-aviso-fundo);
	color: var(--cor-msg-aviso-texto);
	padding: 0.75rem 1rem;
}

.jv-chancela-escopo {
	color: var(--cor-tinta-fraca);
}

.jv-nota {
	color: var(--cor-tinta-fraca);
	display: block;
	font-size: 0.9375rem;
}

.jv-nota-regional {
	border-block-start: 1px solid var(--cor-linha);
	color: var(--cor-tinta-fraca);
	margin-block-start: 2rem;
	padding-block-start: 1rem;
}

/* -------------------------------------------------------------------------
 * Verificação de certificado.
 *
 * O estado é a primeira coisa que se lê, e a cor sozinha não o diz: o
 * rótulo e a explicação vão em texto, e a borda só reforça.
 * ---------------------------------------------------------------------- */

.jv-certificado {
	border: 1px solid var(--cor-linha);
	border-inline-start-width: 4px;
	border-radius: 2px;
	padding: 1.25rem;
}

.jv-certificado--valido {
	border-inline-start-color: var(--cor-serra);
}

.jv-certificado--invalido {
	border-inline-start-color: var(--cor-msg-erro-borda);
}

.jv-certificado-estado {
	font-size: 1.125rem;
	margin-block-start: 0;
}

.jv-certificado-motivo {
	background: var(--cor-msg-erro-fundo);
	color: var(--cor-msg-erro-texto);
	padding: 0.75rem 1rem;
}

.jv-certificado-atividade {
	border-block-start: 1px solid var(--cor-linha);
	margin-block-start: 1.5rem;
	padding-block-start: 1rem;
}

/* O código é lido em papel e digitado à mão. Espaçamento generoso e
   `tabular-nums` para nenhum caractere se confundir com o vizinho. */
.jv-codigo-longo,
.jv-codigo-entrada {
	font-family: var(--fonte-interface);
	font-size: 1.125rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.jv-codigo-entrada {
	max-width: 22ch;
}

.jv-hash code {
	font-size: 0.8125rem;
	overflow-wrap: anywhere;
}

.jv-lista-simples {
	list-style: none;
	margin: 0;
	padding: 0;
}

.jv-lista-simples > li + li {
	border-block-start: 1px solid var(--cor-linha);
	margin-block-start: 0.5rem;
	padding-block-start: 0.5rem;
}