/**
 * Design system mínimo do IBRAM PESQUISAS.
 *
 * Tokens neutros (ADR-013, decisão nº 3): nenhuma cor institucional no código.
 * Um preset gov.br pode ser aplicado depois trocando apenas as variáveis.
 *
 * Todo seletor é prefixado com .ibrpq- para não vazar para o tema nem sofrer
 * dele (SPEC §4.2.5). Nenhum !important.
 */

:root {
	/* Cor. */
	--ibrpq-cor-fundo: #f6f7f9;
	--ibrpq-cor-superficie: #ffffff;
	--ibrpq-cor-superficie-2: #eef1f5;
	--ibrpq-cor-texto: #1c1f23;
	--ibrpq-cor-texto-suave: #5a626b;
	--ibrpq-cor-borda: #dfe3e8;

	/*
	 * Borda que delimita CONTROLE, separada da que apenas divide.
	 *
	 * A WCAG 1.4.11 exige 3:1 para o limite de um componente interativo, e nada
	 * disso para uma divisória decorativa. Um token só forçaria escolher entre
	 * campo ilegível e tela pesada de linhas escuras.
	 */
	--ibrpq-cor-borda-controle: #767d85;
	--ibrpq-cor-acao: #2b5fa8;
	--ibrpq-cor-acao-forte: #1f4a86;
	--ibrpq-cor-acao-texto: #ffffff;
	--ibrpq-cor-acao-suave: #e8effa;
	--ibrpq-cor-foco: #a0410d;
	--ibrpq-cor-erro: #a3242c;
	--ibrpq-cor-erro-fundo: #fdf2f2;
	--ibrpq-cor-sucesso: #1c6b40;
	--ibrpq-cor-sucesso-fundo: #f0f8f3;
	--ibrpq-cor-aviso: #7a5300;
	--ibrpq-cor-aviso-fundo: #fdf6e3;

	/*
	 * Navegação do portal — clara, desde 09/09/2026.
	 *
	 * Era um trilho escuro de borda a borda, e ele fazia sentido enquanto o
	 * portal tinha casca própria: a faixa escura era o chassi da aplicação.
	 * Dentro do tema do site ela virou um bloco preto atravessado no meio de
	 * uma página institucional — corpo estranho, e a origem da pendência do
	 * "trilho que para na altura do conteúdo": faixa de altura total é a única
	 * coisa que pode parar no meio.
	 *
	 * A navegação passa a ser um cartão como os outros, e a hierarquia vem do
	 * espaço e da superfície, não de uma parede de cor. Nenhum token novo de
	 * cor: reaproveita `superficie`, `borda` e a família de ação, todas já
	 * medidas.
	 */
	--ibrpq-nav-largura-ativa: 3px;

	/*
	 * Tipografia numa escala, não em valores soltos. Passo de 1.2 a partir de
	 * 16px: uma medida nova sai da escala, não da régua de quem está com pressa.
	 */
	--ibrpq-fonte: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--ibrpq-fonte-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
	--ibrpq-texto-xs: 0.75rem;
	--ibrpq-texto-s: 0.875rem;
	--ibrpq-texto-m: 1rem;
	--ibrpq-texto-l: 1.25rem;
	--ibrpq-texto-xl: 1.5rem;
	--ibrpq-texto-xxl: 1.875rem;
	--ibrpq-altura-linha: 1.55;
	--ibrpq-peso-forte: 600;

	/* Espaçamento, também em escala. */
	--ibrpq-espaco-1: 4px;
	--ibrpq-espaco-2: 8px;
	--ibrpq-espaco-3: 12px;
	--ibrpq-espaco: 16px;
	--ibrpq-espaco-5: 24px;
	--ibrpq-espaco-6: 32px;
	--ibrpq-espaco-7: 48px;

	/* Forma e elevação. */
	--ibrpq-raio-s: 4px;
	--ibrpq-raio: 8px;
	--ibrpq-raio-l: 14px;
	--ibrpq-elevacao-1: 0 1px 2px rgba( 16, 20, 26, 0.06 );
	--ibrpq-elevacao-2: 0 4px 12px rgba( 16, 20, 26, 0.1 );
	--ibrpq-elevacao-3: 0 12px 32px rgba( 16, 20, 26, 0.18 );

	/* Foco: espessura e deslocamento num lugar só, para nunca divergir. */
	--ibrpq-foco-espessura: 3px;
	--ibrpq-foco-deslocamento: 2px;

	/* Layout. */
	--ibrpq-lateral: 264px;
	--ibrpq-max: 1320px;
	--ibrpq-transicao: 160ms ease;
}

/*
 * Breakpoints (SPEC §4.2.6). CSS não permite variável em `@media`, então eles
 * vivem aqui como contrato escrito e são repetidos literalmente abaixo:
 *
 *   celular   : até 767px    — painel lateral vira drawer
 *   tablet    : 768–1119px   — painel lateral recolhível
 *   desktop   : 1120px+      — painel lateral persistente
 */

/*
 * O portal é CLARO, e não segue o `prefers-color-scheme` do sistema.
 *
 * Até a v0.14.0 havia um bloco `@media ( prefers-color-scheme: dark )` que
 * repintava tudo. O efeito prático não era "tema escuro opcional": quem tem o
 * sistema em escuro — a maioria das estações — recebia um painel institucional
 * escuro sem nunca ter pedido, e sem nenhum jeito de voltar. Uma ferramenta de
 * trabalho do IBRAM não decide sua aparência pela preferência do sistema
 * operacional de quem abriu.
 *
 * Um tema escuro de verdade volta quando houver **escolha explícita** com
 * persistência (`data-tema` no `html`), e aí o `@media` vira apenas o valor
 * inicial dessa escolha — não a sentença final.
 */

/*
 * As duas aplicações rodam dentro do tema do site desde 09/09/2026, e nenhuma
 * traz mais o próprio `<body>`. `.ibrpq-no-tema` é o contêiner que o Router
 * abre logo depois do `get_header()` do tema: é dele que sai a base tipográfica
 * do que é nosso, sem impor nada ao resto da página desenhada em volta.
 *
 * ⚠️ Havia aqui uma cadeia inteira escorada em `body.ibrpq-body`, a classe da
 * casca própria. No instante em que o portal passou a ser do tema essa classe
 * deixou de existir e as regras **pararam de casar em silêncio** — CSS não
 * reprova seletor que não acha nada. É o motivo de a conversão ter mexido no
 * estilo tanto quanto no PHP.
 */

.ibrpq-no-tema {
	color: var( --ibrpq-cor-texto );
	font-family: var( --ibrpq-fonte );
	font-size: var( --ibrpq-texto-m );
	line-height: var( --ibrpq-altura-linha );
}

.ibrpq-no-tema :focus-visible {
	outline: var( --ibrpq-foco-espessura ) solid var( --ibrpq-cor-foco );
	outline-offset: var( --ibrpq-foco-deslocamento );
}

/*
 * Os links do PORTAL usam a nossa cor de ação; os da página pública, a do tema.
 *
 * Dentro do tema, um `<a>` sem cor declarada herda a paleta do site — e a
 * paleta do site não é medida por ninguém. Medido em 09/09/2026: "abrir a
 * página pública", na aba Prazo, saía a **4,31:1**, abaixo do 4,5:1 da WCAG AA
 * para 14px. Nenhum portão via, porque o valor não está em lugar nenhum do
 * nosso código: está no tema.
 *
 * A separação é deliberada. O portal é ferramenta, e ali a legibilidade é
 * nossa responsabilidade e a nossa paleta é medida. A página pública é a cara
 * do site e continua herdando a identidade dele — se a cor de link do site
 * reprovar, o defeito é do site inteiro e se corrige no tema, não numa página.
 *
 * Cedo no arquivo de propósito: `.ibrpq-menu a` e `.ibrpq-abas a` têm a mesma
 * especificidade e precisam vencer por ordem.
 */
.ibrpq-portal a {
	color: var( --ibrpq-cor-acao );
}

/*
 * O contorno de foco fica a 2px do controle. Sobre uma superfície colorida —
 * o botão primário, a aba ativa, a linha selecionada do menu — essa folga
 * confunde-se com o próprio controle e o anel perde a leitura. A sombra da cor
 * da superfície pinta a folga e devolve o contraste em qualquer fundo.
 */
.ibrpq-botao:focus-visible,
.ibrpq-abas a:focus-visible,
.ibrpq-menu a:focus-visible {
	box-shadow: 0 0 0
		calc( var( --ibrpq-foco-espessura ) + var( --ibrpq-foco-deslocamento ) )
		var( --ibrpq-cor-superficie );
}

/*
 * O contêiner do plugin dentro do tema — alinhado ao contêiner do tema.
 *
 * O Router abre este `<div>` logo depois do `get_header()`, portanto **fora**
 * do contêiner de conteúdo do tema: a largura disponível é a da janela inteira.
 * Quem se limita somos nós.
 *
 * E se limitar por conta própria não basta. Medido em 09/09/2026 numa janela de
 * 1280px: o título do site começava em x=64 e o do portal em x=16, porque o
 * nosso recuo era 16px fixo e o do tema é `90vw` centrado. Quarenta e oito
 * pixels de desalinhamento entre o cabeçalho do site e o conteúdo logo abaixo
 * é exatamente o que faz uma página "parecer coisa de outro sistema" sem que
 * ninguém saiba dizer por quê.
 *
 * Então perguntamos ao tema. O Blocksy publica as duas medidas em `:root`, e
 * usá-las nos alinha sozinhos a qualquer mudança que o site faça no seu
 * contêiner. As quedas cobrem tema que não as declare — o
 * `twentytwentyfive`, por exemplo, com o qual o caminho de tema de blocos é
 * exercitado.
 */
.ibrpq-main {
	width: var(
		--theme-container-width,
		calc( 100% - 2 * var( --ibrpq-espaco ) )
	);
	max-width: var( --theme-normal-container-max-width, var( --ibrpq-max ) );
	margin-inline: auto;
	padding-block: var( --ibrpq-espaco-5 ) var( --ibrpq-espaco-7 );
}

/*
 * A página do respondente é uma coluna de leitura, não um painel.
 *
 * Ela e o portal dividem o mesmo contêiner, e a largura que serve a uma tabela
 * de gestão é larga demais para um formulário: linha longa demais faz o olho
 * perder a volta ao começo da linha seguinte.
 */
.ibrpq-pagina-publica .ibrpq-main {
	max-width: 52rem;
}

.ibrpq-colunas {
	display: grid;
	gap: var( --ibrpq-espaco );
	grid-template-columns: 1fr;
}

/*
 * Duas colunas quando a COLUNA DE CONTEÚDO comporta, não quando a janela
 * comporta. Ver a nota em `.ibrpq-conteudo`.
 */
@container ibrpq-conteudo ( min-width: 60rem ) {
	.ibrpq-colunas {
		grid-template-columns: 1.3fr 1fr;
		align-items: start;
	}
}

/* ---------------------------------------------------------------------------
 * Casca do portal: cabeçalho, painel lateral e conteúdo (SPEC §4.2.7).
 * ------------------------------------------------------------------------- */

/*
 * Cabeçalho do portal — de barra de aplicação a cabeçalho de página.
 *
 * Era uma barra grudada no topo da janela com a marca "IBRAM PESQUISAS", e ela
 * fazia sentido na casca própria, onde nada mais existia acima. Dentro do tema
 * há o cabeçalho do site logo acima: duas barras coladas, duas marcas, e a
 * grudada tampando o menu do site a cada rolagem.
 *
 * Vira o que a página realmente precisa dizer: onde estou e sobre o quê.
 */
.ibrpq-topo {
	display: flex;
	align-items: flex-start;
	gap: var( --ibrpq-espaco-3 );
	flex-wrap: wrap;
	margin-bottom: var( --ibrpq-espaco-5 );
	padding-bottom: var( --ibrpq-espaco-3 );
	border-bottom: 1px solid var( --ibrpq-cor-borda );
}

.ibrpq-topo__texto {
	min-width: 0;
	flex: 1 1 auto;
}

.ibrpq-topo__marca {
	margin: 0;
	font-size: var( --ibrpq-texto-xl );
	font-weight: var( --ibrpq-peso-forte );
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/*
 * O título da pesquisa aberta quebra em vez de ser truncado.
 *
 * Tinha `text-overflow: ellipsis` e `nowrap`, o que numa barra de altura fixa
 * era a única saída. Aqui não é: reticências escondem justamente a metade que
 * distingue "Diagnóstico … nos Museus do IBRAM" de outra pesquisa com o mesmo
 * começo, e a regra de tela nº 5 diz que dado não é reescrito pela tela.
 */
.ibrpq-topo__contexto {
	margin: var( --ibrpq-espaco-1 ) 0 0;
	font-size: var( --ibrpq-texto-s );
	color: var( --ibrpq-cor-texto-suave );
	text-wrap: pretty;
}

/*
 * A casca: navegação e conteúdo lado a lado, dentro da largura da página.
 *
 * Sem fundo, sem gradiente e sem largura de borda a borda — o que separava as
 * duas colunas era uma parede escura, e agora é espaço.
 */
.ibrpq-casca {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --ibrpq-espaco-5 );
	align-items: start;
}

/*
 * A navegação é um cartão, e é `sticky`.
 *
 * `sticky` com `align-self: start` resolve na raiz a pendência do "trilho que
 * para na altura do conteúdo": um cartão que acompanha a rolagem não tem
 * altura a preencher, então não há meio de tela onde ele possa parar. A faixa
 * de altura total era a única forma que **precisava** ser esticada.
 */
.ibrpq-lateral {
	min-width: 0;
	padding: var( --ibrpq-espaco-3 );
	background: var( --ibrpq-cor-superficie );
	border: 1px solid var( --ibrpq-cor-borda );
	border-radius: var( --ibrpq-raio-l );
	box-shadow: var( --ibrpq-elevacao-1 );
}

.ibrpq-lateral__grupo + .ibrpq-lateral__grupo {
	margin-top: var( --ibrpq-espaco-5 );
	padding-top: var( --ibrpq-espaco-3 );
	border-top: 1px solid var( --ibrpq-cor-borda );
}

.ibrpq-lateral__titulo {
	margin: 0 0 var( --ibrpq-espaco-2 );
	padding: 0 var( --ibrpq-espaco-3 );
	font-size: var( --ibrpq-texto-xs );
	font-weight: var( --ibrpq-peso-forte );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --ibrpq-cor-texto-suave );
}

.ibrpq-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ibrpq-menu a {
	display: flex;
	align-items: center;
	gap: var( --ibrpq-espaco-2 );
	padding: var( --ibrpq-espaco-2 ) var( --ibrpq-espaco-3 );
	border-radius: var( --ibrpq-raio );
	color: var( --ibrpq-cor-texto );
	text-decoration: none;
	border-left: var( --ibrpq-nav-largura-ativa ) solid transparent;
	transition: background var( --ibrpq-transicao );
}

.ibrpq-menu a:hover {
	background: var( --ibrpq-cor-superficie-2 );
}

/*
 * O item atual não é dito só pela cor: `aria-current="page"` já o anuncia a
 * leitores de tela, e a barra à esquerda mais o peso da fonte o marcam para
 * quem não distingue as cores (SPEC §22).
 */
.ibrpq-menu a[aria-current="page"] {
	background: var( --ibrpq-cor-acao-suave );
	border-left-color: var( --ibrpq-cor-acao );
	color: var( --ibrpq-cor-acao-forte );
	font-weight: var( --ibrpq-peso-forte );
}

.ibrpq-icone {
	flex: none;
}

/* A pergunta que a área responde, sob o rótulo. */
.ibrpq-menu__texto {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ibrpq-menu__ajuda {
	font-size: var( --ibrpq-texto-xs );
	font-weight: 400;
	color: var( --ibrpq-cor-texto-suave );
}

/*
 * A coluna de conteúdo é um CONTÊINER de consulta, e isso não é refinamento.
 *
 * Dentro do tema o portal perdeu largura para o contêiner do site e para a
 * lateral, que antes ficava fora dele. As grades internas — as duas colunas do
 * construtor, a linha "tipo · seção · obrigatória" — decidiam por `@media`,
 * isto é, pela largura da **janela**. Numa janela de 1280px elas continuavam
 * abrindo em duas e três colunas com 1000px reais para dividir, e o resultado
 * foi fotografado: campo de seção espremido e ajuda quebrando em quatro linhas.
 *
 * `@container` mede o espaço que a grade realmente tem. Também deixa de
 * importar se a lateral está aberta ou recolhida — a mesma pergunta ("cabem
 * duas colunas aqui?") passa a ter uma resposta certa em vez de uma estimativa
 * que era verdadeira só na largura em que foi escrita.
 */
.ibrpq-conteudo {
	min-width: 0;
	container-type: inline-size;
	container-name: ibrpq-conteudo;
}

/* Tablet: lateral recolhível, ainda em coluna própria. */
@media ( min-width: 768px ) {
	.ibrpq-casca {
		grid-template-columns: var( --ibrpq-lateral ) minmax( 0, 1fr );
	}

	.ibrpq-lateral {
		position: sticky;
		top: var( --ibrpq-espaco-5 );
		max-height: calc( 100vh - var( --ibrpq-espaco-6 ) );
		overflow-y: auto;
	}
}

/*
 * Recolher só vale no tablet.
 *
 * Se valesse também no desktop, um `recolhida` herdado de um redimensionamento
 * esconderia a lateral justamente onde o botão de trazê-la de volta já está
 * oculto — a pessoa ficaria sem menu e sem saída. No desktop a lateral é
 * persistente por exigência da SPEC §4.2.
 */
@media ( min-width: 768px ) and ( max-width: 1119px ) {
	.ibrpq-casca--recolhida {
		grid-template-columns: minmax( 0, 1fr );
	}

	.ibrpq-casca--recolhida .ibrpq-lateral {
		display: none;
	}
}

/* Desktop: persistente, e o botão de recolher some. */
@media ( min-width: 1120px ) {
	.ibrpq-alternar {
		display: none;
	}
}

/*
 * Celular: a lateral vira drawer sobre o conteúdo.
 *
 * `position: fixed` e não empurrando o conteúdo: numa tela estreita, empurrar
 * reflui tudo e faz o leitor perder o lugar onde estava.
 */
@media ( max-width: 767px ) {
	.ibrpq-lateral {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 30;
		width: min( 84vw, var( --ibrpq-lateral ) );
		padding: var( --ibrpq-espaco );
		overflow-y: auto;
		background: var( --ibrpq-cor-superficie );
		border: 0;
		border-right: 1px solid var( --ibrpq-cor-borda );
		border-radius: 0;
		box-shadow: var( --ibrpq-elevacao-3 );

		/*
		 * Havia aqui uma troca de tokens, porque a gaveta era clara e o trilho
		 * de mesa era escuro: sem ela o menu do celular ficava a **2,10:1**
		 * sobre branco. Com a navegação clara nas duas larguras a troca deixou
		 * de existir — e com ela o modo inteiro de errar. **Uma cor a menos é
		 * um contraste a menos para manter certo.**
		 */
		transform: translateX( -100% );
		transition: transform var( --ibrpq-transicao );
	}

	.ibrpq-lateral--aberta {
		transform: translateX( 0 );
	}

	/*
	 * Fechado é `hidden`, não só deslocado: a lateral fora da tela continuaria
	 * no caminho do Tab, e quem navega por teclado tabularia para dentro de um
	 * menu invisível.
	 */
	.ibrpq-lateral[hidden] {
		display: none;
	}

	.ibrpq-cortina {
		position: fixed;
		inset: 0;
		z-index: 29;
		background: rgba( 0, 0, 0, 0.45 );
		border: 0;
		padding: 0;
	}
}

@media ( min-width: 768px ) {
	.ibrpq-cortina {
		display: none;
	}

	/* Em telas largas a lateral é sempre visível, mesmo com `hidden` do drawer. */
	.ibrpq-lateral[hidden] {
		display: block;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.ibrpq-lateral {
		transition: none;
	}
}

/* Abas de uma pesquisa aberta, em telas estreitas. */
.ibrpq-abas {
	display: flex;
	flex-wrap: wrap;
	gap: var( --ibrpq-espaco-2 );
	list-style: none;
	margin: 0 0 var( --ibrpq-espaco );
	padding: 0;
}

.ibrpq-abas a {
	display: block;
	padding: var( --ibrpq-espaco-1 ) var( --ibrpq-espaco-3 );
	border: 1px solid var( --ibrpq-cor-borda );
	border-radius: 999px;
	color: var( --ibrpq-cor-texto );
	text-decoration: none;
	font-size: var( --ibrpq-texto-s );
}

.ibrpq-abas a[aria-current="page"] {
	background: var( --ibrpq-cor-acao );
	border-color: var( --ibrpq-cor-acao );
	color: var( --ibrpq-cor-acao-texto );
	font-weight: var( --ibrpq-peso-forte );
}

/*
 * A partir do tablet, a lateral é a navegação — e as abas somem.
 *
 * Esta regra faltava, e era a causa da navegação duplicada: o comentário acima
 * sempre disse "em telas estreitas", mas nada restringia as abas a elas. Acima
 * de 768px a lateral é visível (`.ibrpq-lateral[hidden] { display: block }`) e
 * as duas listas mostravam os mesmos oito destinos, uma embaixo da outra.
 *
 * `display: none` acrescentado aqui, e não envolvendo o bloco todo num
 * `max-width: 767px`: as declarações de reset (`list-style`, `margin`,
 * `padding`) precisam continuar valendo em qualquer largura, senão o `<ul>`
 * volta com marcador e recuo no desktop.
 */
@media ( min-width: 768px ) {
	.ibrpq-abas {
		display: none;
	}
}

/*
 * Título de seção que recebe foco ao navegar (SPEC §4.2.8).
 *
 * `tabindex="-1"` o torna focável por código sem entrar na ordem do Tab. Sem
 * isso, trocar de aba numa SPA deixa o foco no link clicado e o leitor de tela
 * não anuncia que a tela inteira mudou.
 */
.ibrpq-secao__titulo:focus {
	outline: var( --ibrpq-foco-espessura ) solid var( --ibrpq-cor-foco );
	outline-offset: var( --ibrpq-foco-deslocamento );
}

.ibrpq-vazio {
	padding: var( --ibrpq-espaco-6 ) var( --ibrpq-espaco );
	text-align: center;
	color: var( --ibrpq-cor-texto-suave );
	border: 1px dashed var( --ibrpq-cor-borda );
	border-radius: var( --ibrpq-raio );
}

/*
 * Cartão: a superfície onde o trabalho acontece.
 *
 * Respiro maior que a borda: num painel denso, o que separa blocos é o espaço,
 * e uma linha fina em volta de conteúdo apertado só acrescenta ruído. Elevação
 * discreta em vez de borda forte — a hierarquia vem da superfície, não do
 * traço.
 */
.ibrpq-cartao {
	background: var( --ibrpq-cor-superficie );
	border: 1px solid var( --ibrpq-cor-borda );
	border-radius: var( --ibrpq-raio-l );
	padding: var( --ibrpq-espaco-5 );
	margin-bottom: var( --ibrpq-espaco-5 );
	box-shadow: var( --ibrpq-elevacao-1 );
}

.ibrpq-cartao h1,
.ibrpq-cartao h2 {
	margin-top: 0;
	font-size: var( --ibrpq-texto-xl );
	letter-spacing: -0.01em;
}

/*
 * Título de bloco dentro do cartão.
 *
 * Um degrau abaixo do título do cartão e em maiúsculas pequenas: sem isso,
 * "Estrutura" e o nome da pesquisa tinham praticamente o mesmo peso e a tela
 * ficava sem um ponto de entrada óbvio para a leitura.
 */
.ibrpq-cartao h3 {
	margin: var( --ibrpq-espaco-5 ) 0 var( --ibrpq-espaco-2 );
	font-size: var( --ibrpq-texto-s );
	font-weight: var( --ibrpq-peso-forte );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --ibrpq-cor-texto-suave );
}

.ibrpq-cartao h3:first-of-type {
	margin-top: var( --ibrpq-espaco-3 );
}

.ibrpq-campo {
	display: flex;
	flex-direction: column;
	gap: var( --ibrpq-espaco-1 );
	margin: 0 0 var( --ibrpq-espaco-3 );
}

.ibrpq-campo--inline {
	flex-direction: row;
	align-items: center;
	gap: var( --ibrpq-espaco-2 );
}

.ibrpq-campo label {
	font-weight: 600;
	font-size: 0.92rem;
}

.ibrpq-campo input[type="text"],
.ibrpq-campo input[type="number"],
.ibrpq-campo textarea,
.ibrpq-campo select {
	font: inherit;
	color: inherit;
	background: var( --ibrpq-cor-superficie );

	/*
	 * Borda de controle, e não a divisória decorativa: o limite de um campo
	 * precisa de 3:1 (WCAG 1.4.11). Com `--ibrpq-cor-borda` o campo dava 1,4:1
	 * e sumia contra o cartão.
	 */
	border: 1px solid var( --ibrpq-cor-borda-controle );
	border-radius: var( --ibrpq-raio-s );
	padding: var( --ibrpq-espaco-2 ) var( --ibrpq-espaco-3 );
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
}

.ibrpq-campo--inline input[type="checkbox"],
.ibrpq-campo--inline input[type="radio"] {
	width: 20px;
	height: 20px;
	min-height: 0;
	margin: 0;
}

/* Cartão de pergunta: definição única, mais abaixo neste arquivo. */

.ibrpq-pergunta--erro {
	border-color: var( --ibrpq-cor-erro );
	background: var( --ibrpq-cor-erro-fundo );
}

/* Legenda do cartão de pergunta: definição única, mais abaixo neste arquivo. */

.ibrpq-obrigatorio {
	color: var( --ibrpq-cor-texto-suave );
	font-weight: 400;
}

.ibrpq-ajuda,
.ibrpq-metodo,
.ibrpq-descricao {
	color: var( --ibrpq-cor-texto-suave );
	font-size: var( --ibrpq-texto-s );
	margin: 4px 0 8px;
}

.ibrpq-erro-campo {
	color: var( --ibrpq-cor-erro );
	font-size: var( --ibrpq-texto-s );
	margin: 4px 0 0;
	font-weight: 600;
}

/*
 * Quatro pesos de ação, e a diferença entre eles é o que torna a tela legível.
 *
 * Antes havia só `primario` e `discreto`, e quase tudo saía primário: numa
 * barra onde seis botões têm o mesmo azul preenchido, o olho não tem como
 * saber qual é a ação principal, e decidir o que apertar passa a exigir ler
 * todos. Uma tela tem UMA ação primária.
 */
.ibrpq-botao {
	font: inherit;
	font-weight: var( --ibrpq-peso-forte );
	background: var( --ibrpq-cor-acao );
	color: var( --ibrpq-cor-acao-texto );
	border: 1px solid transparent;
	border-radius: var( --ibrpq-raio-s );
	padding: var( --ibrpq-espaco-3 ) var( --ibrpq-espaco-5 );

	/* 44px é o alvo mínimo de toque da SPEC §22 — não é arredondamento. */
	min-height: 44px;
	cursor: pointer;
	transition: background var( --ibrpq-transicao ),
		border-color var( --ibrpq-transicao ), color var( --ibrpq-transicao );
}

.ibrpq-botao[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
}

.ibrpq-botao[aria-busy="true"] {
	cursor: progress;
}

/* Ação legítima e frequente, mas não a principal da tela. */
.ibrpq-botao--secundario {
	background: var( --ibrpq-cor-superficie );
	color: var( --ibrpq-cor-acao );
	border-color: var( --ibrpq-cor-borda-controle );
}

/*
 * Ação de apoio, que acompanha um conteúdo — duplicar um item, remover uma
 * linha. Não pode competir com o texto que ela serve.
 */
.ibrpq-botao--discreto {
	background: transparent;
	color: var( --ibrpq-cor-acao );
	border-color: transparent;
	font-weight: 500;
}

.ibrpq-botao--discreto:hover:not( [disabled] ),
.ibrpq-botao--secundario:hover:not( [disabled] ) {
	background: var( --ibrpq-cor-acao-suave );
	border-color: var( --ibrpq-cor-acao );
}

/*
 * Irreversível. Contorno e não preenchimento: um botão vermelho cheio ao lado
 * de um azul cheio disputa a atenção e acaba clicado por engano. O contorno
 * diz "pare" sem gritar.
 */
.ibrpq-botao--perigo {
	background: transparent;
	color: var( --ibrpq-cor-erro );
	border-color: var( --ibrpq-cor-erro );
}

.ibrpq-botao--perigo:hover:not( [disabled] ) {
	background: var( --ibrpq-cor-erro-fundo );
}

.ibrpq-botao:hover:not( [disabled] ):not( .ibrpq-botao--discreto ):not( .ibrpq-botao--secundario ):not( .ibrpq-botao--perigo ) {
	background: var( --ibrpq-cor-acao-forte );
}

.ibrpq-botao--pequeno {
	padding: var( --ibrpq-espaco-2 ) var( --ibrpq-espaco-3 );
	min-height: 36px;
	font-size: var( --ibrpq-texto-s );
}

.ibrpq-link {
	color: var( --ibrpq-cor-acao );
}

.ibrpq-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var( --ibrpq-espaco-2 );
	align-items: center;
}

/*
 * Barra do que não volta, separada por um respiro e uma divisória.
 *
 * Encerrar a coleta e arquivar dividiam a mesma barra com "Editar perguntas".
 * A distância é a parte da proteção que funciona antes de qualquer confirmação:
 * o clique errado precisa exigir mover a mão.
 */
.ibrpq-acoes--sem-volta {
	margin-top: var( --ibrpq-espaco-5 );
	padding-top: var( --ibrpq-espaco-3 );
	border-top: 1px solid var( --ibrpq-cor-borda );
}

.ibrpq-tabela {
	width: 100%;
	border-collapse: collapse;
	margin: 8px 0;
}

.ibrpq-tabela caption {
	text-align: left;
	color: var( --ibrpq-cor-texto-suave );
	font-size: var( --ibrpq-texto-s );
	padding-bottom: 6px;
}

.ibrpq-tabela th,
.ibrpq-tabela td {
	border-bottom: 1px solid var( --ibrpq-cor-borda );
	padding: 9px 8px;
	text-align: left;
	vertical-align: top;
}

.ibrpq-lista {
	margin: 8px 0;
	padding-left: 20px;
}

.ibrpq-numero {
	font-size: 2.4rem;
	font-weight: 700;
	margin: 8px 0;
	line-height: 1.1;
}

.ibrpq-numero span {
	font-size: 1rem;
	font-weight: 400;
	color: var( --ibrpq-cor-texto-suave );
}

.ibrpq-bloco {
	border-top: 1px solid var( --ibrpq-cor-borda );
	padding-top: 12px;
	margin-top: 12px;
}

.ibrpq-aviso {
	border-radius: var( --ibrpq-raio-s );
	padding: 12px 14px;
	margin: 0 0 var( --ibrpq-espaco );
	border: 1px solid var( --ibrpq-cor-borda );
}

.ibrpq-aviso p {
	margin: 0 0 4px;
}

.ibrpq-aviso ul {
	margin: 4px 0 0;
	padding-left: 20px;
}

.ibrpq-aviso--erro {
	border-color: var( --ibrpq-cor-erro );
	background: var( --ibrpq-cor-erro-fundo );
	color: var( --ibrpq-cor-erro );
}

.ibrpq-aviso--sucesso {
	border-color: var( --ibrpq-cor-sucesso );
	background: var( --ibrpq-cor-sucesso-fundo );
	color: var( --ibrpq-cor-sucesso );
}

.ibrpq-carregando {
	color: var( --ibrpq-cor-texto-suave );
}

/*
 * Célula suprimida pelo limiar (achado A4).
 *
 * O travessão sozinho não comunica: para quem usa leitor de tela ele é lido
 * como pontuação ou como nada. O `.ibrpq-fora-da-tela` ao lado carrega a frase
 * inteira, e é por isso que a marca visual e o texto acessível são dois
 * elementos, não um `title`.
 */
.ibrpq-suprimida {
	color: var( --ibrpq-cor-texto-suave );
	font-variant-numeric: tabular-nums;
}

/* Texto só para leitor de tela — visível a quem não vê a marca visual. */
.ibrpq-fora-da-tela {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Honeypot: fora da tela, mas alcançável por leitor de tela com rótulo claro. */
.ibrpq-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media ( prefers-reduced-motion: reduce ) {
	.ibrpq-no-tema * {
		animation-duration: 0.01ms;
		transition-duration: 0.01ms;
	}
}

/*
 * Mudança que impede somar respostas antigas às novas.
 *
 * Cor sozinha não comunica (SPEC §22): o texto ao lado já diz "não somável à
 * versão anterior", e o peso da fonte reforça sem depender de enxergar cor.
 */
.ibrpq-incompativel {
	color: var( --ibrpq-cor-erro );
	font-weight: var( --ibrpq-peso-forte );
}

@media (prefers-contrast: more) {
	.ibrpq-incompativel {
		color: var( --ibrpq-cor-erro );
		text-decoration: underline;
	}
}

/*
 * Árvore estrutural (SPEC §7.2).
 *
 * Listas ordenadas aninhadas, não `div`s: a estrutura da pesquisa É uma
 * hierarquia ordenada, e um leitor de tela anuncia "lista de 2 itens, item 1"
 * de graça. Recriar isso com `role` em `div` seria trabalho a mais para chegar
 * a um resultado pior.
 */
.ibrpq-arvore,
.ibrpq-arvore ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ibrpq-arvore > li {
	margin-bottom: var( --ibrpq-espaco );
	border-left: 3px solid var( --ibrpq-cor-acao );
	padding-left: var( --ibrpq-espaco );
}

.ibrpq-arvore ol {
	margin-top: 6px;
	padding-left: var( --ibrpq-espaco );
}

.ibrpq-arvore__pagina {
	margin-bottom: 8px;
	border-left: 2px solid var( --ibrpq-cor-borda );
	padding-left: var( --ibrpq-espaco );
}

.ibrpq-arvore__pergunta {
	padding: 4px 0 4px var( --ibrpq-espaco );
	border-left: 1px dotted var( --ibrpq-cor-borda );
}

/*
 * O nível também é dito por texto e recuo, nunca só pela cor da barra: quem não
 * distingue as cores continua lendo "Seção", "Página sem título" e o tipo de
 * cada pergunta (SPEC §22).
 */
.ibrpq-arvore .ibrpq-metodo {
	display: block;
	font-size: var( --ibrpq-texto-s );
	color: var( --ibrpq-cor-texto-suave );
}

/*
 * Linha de cabeçalho de cada nó: título à esquerda, ação à direita.
 *
 * Sem isto, o botão de duplicar entrava no mesmo fluxo do texto — colado ao
 * título quando não havia descrição, e jogado para uma terceira linha quando
 * havia, porque `.ibrpq-metodo` é `display: block` e quebra o fluxo entre os
 * dois. Mesmo markup, dois leiautes, dependendo do conteúdo.
 *
 * Só título e ação entram aqui. A linha de metadados fica FORA, como irmã
 * abaixo: dentro do flex ela viraria uma terceira coluna espremida.
 */
.ibrpq-arvore__linha {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --ibrpq-espaco-3 );
	min-height: 36px;
}

/* O título cede espaço e quebra; a ação nunca se parte em duas linhas. */
.ibrpq-arvore__linha > :first-child {
	min-width: 0;
}

.ibrpq-arvore__linha > .ibrpq-botao {
	flex: none;
}

/*
 * A escala do nível vai no título, não na linha: `.ibrpq-botao` herda a fonte
 * (`font: inherit`), e aumentar a linha inteira aumentaria o botão junto.
 */
.ibrpq-arvore__secao > .ibrpq-arvore__linha > strong {
	font-size: var( --ibrpq-texto-l );
}

/*
 * Ausência de título não pode ter a mesma pele de um título preenchido. Hoje
 * "Seção sem título" era lida como se fosse o nome da seção.
 */
.ibrpq-arvore__sem-titulo {
	color: var( --ibrpq-cor-texto-suave );
	font-style: italic;
	font-weight: 400;
}

/*
 * A ação de apoio fica quieta até ser procurada — mas NUNCA escondida até o
 * ponteiro passar por cima: `:hover` como única revelação some para quem usa
 * teclado e para quem usa toque. Aqui ela só perde saturação, e volta ao peso
 * cheio no foco e no hover da própria linha.
 */
.ibrpq-arvore__linha .ibrpq-botao--discreto {
	opacity: 0.75;
}

.ibrpq-arvore__linha:hover .ibrpq-botao--discreto,
.ibrpq-arvore__linha .ibrpq-botao--discreto:focus-visible {
	opacity: 1;
}

/* Checklist de revisão (SPEC §6.9). */
.ibrpq-checklist {
	list-style: none;
	margin: 0 0 var( --ibrpq-espaco );
	padding: 0;
}

.ibrpq-checklist li {
	margin-bottom: 10px;
}

.ibrpq-checklist .ibrpq-metodo {
	display: block;
	margin-left: 24px;
	font-size: var( --ibrpq-texto-s );
	color: var( --ibrpq-cor-texto-suave );
}

/* Comentários internos. */
.ibrpq-comentarios {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ibrpq-comentarios li {
	margin-bottom: var( --ibrpq-espaco );
	padding: 10px var( --ibrpq-espaco );
	border: 1px solid var( --ibrpq-cor-borda );
	border-radius: var( --ibrpq-raio );
	background: var( --ibrpq-cor-superficie );
}

/*
 * Comentário resolvido é atenuado, mas a palavra "resolvido" já está no texto:
 * a opacidade acompanha a informação, não a carrega.
 */
.ibrpq-comentarios .ibrpq-resolvido {
	opacity: 0.72;
}

@media (prefers-contrast: more) {
	.ibrpq-comentarios .ibrpq-resolvido {
		opacity: 1;
	}
}

/* Achados do verificador (SPEC §7.8 e §7.12). */
.ibrpq-achados {
	list-style: none;
	margin: 0 0 var( --ibrpq-espaco );
	padding: 0;
}

.ibrpq-achados li {
	padding: var( --ibrpq-espaco-2 ) var( --ibrpq-espaco-3 );
	margin-bottom: var( --ibrpq-espaco-2 );
	border-left: 3px solid var( --ibrpq-cor-borda );
	background: var( --ibrpq-cor-superficie-2 );
	border-radius: 0 var( --ibrpq-raio-s ) var( --ibrpq-raio-s ) 0;
}

/*
 * A gravidade é dita pelo TÍTULO da lista — "Impede publicar" contra "Vale rever
 * antes de publicar" — e não por esta barra. A cor acompanha, não informa: quem
 * não a distingue lê a mesma coisa (SPEC §22).
 */
.ibrpq-achados--erro li {
	border-left-color: var( --ibrpq-cor-erro );
}

.ibrpq-achados--aviso li {
	border-left-color: var( --ibrpq-cor-aviso );
}

/*
 * Importação de esquema (SPEC §6.12).
 *
 * A lista de achados usa fonte monoespaçada só no caminho — `secoes[0].
 * paginas[1].perguntas[2].codigo` é endereço, não frase, e alinhado ele se lê
 * de relance quando há trinta deles.
 */

.ibrpq-importar {
	background: var( --ibrpq-cor-superficie );
	border: 1px solid var( --ibrpq-cor-borda );
	border-radius: var( --ibrpq-raio );
	padding: var( --ibrpq-espaco-3 );
	margin-bottom: var( --ibrpq-espaco-3 );
}

.ibrpq-importar__rotulo {
	display: block;
	font-weight: 600;
	margin-bottom: var( --ibrpq-espaco-1 );
}

.ibrpq-achados {
	margin: var( --ibrpq-espaco-2 ) 0 0;
	padding-left: var( --ibrpq-espaco-3 );
	max-height: 16rem;
	overflow-y: auto;
}

.ibrpq-achados li {
	margin-bottom: var( --ibrpq-espaco-1 );
}

.ibrpq-achados code {
	font-family: var( --ibrpq-fonte-mono );
	font-size: var( --ibrpq-texto-s );
}

/* Acervo de reúso: modelos e biblioteca de perguntas (REQ-6.19). */

.ibrpq-acervo {
	margin-bottom: var( --ibrpq-espaco-3 );
}

.ibrpq-acervo__painel {
	background: var( --ibrpq-cor-superficie );
	border: 1px solid var( --ibrpq-cor-borda );
	border-radius: var( --ibrpq-raio );
	padding: var( --ibrpq-espaco-3 );
	margin-top: var( --ibrpq-espaco-2 );
}

.ibrpq-acervo__titulo {
	font-size: var( --ibrpq-texto-m );
	margin: var( --ibrpq-espaco-3 ) 0 var( --ibrpq-espaco-2 );
}

.ibrpq-acervo__titulo:first-of-type {
	margin-top: 0;
}

.ibrpq-acervo__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 20rem;
	overflow-y: auto;
}

/*
 * Escala: os pontos em linha, e não empilhados.
 *
 * Empilhada, a escala perde a única coisa que a distingue de escolha única —
 * a ordem visível entre os pontos. Em tela estreita ela volta a empilhar,
 * porque sete rótulos lado a lado no celular não se leem.
 */

@media ( min-width: 40rem ) {
	.ibrpq-escala {
		display: flex;
		flex-wrap: wrap;
		gap: var( --ibrpq-espaco-3 );
		align-items: flex-start;
	}

	.ibrpq-escala .ibrpq-campo--inline {
		margin: 0;
	}
}

/*
 * Faixa de pré-visualização.
 *
 * Precisa ser inconfundível: quem está pré-visualizando não pode confundir a
 * tela com a pesquisa no ar e concluir que já publicou.
 */

.ibrpq-aviso--previa {
	background: var( --ibrpq-cor-aviso-fundo );
	border-left: 4px solid var( --ibrpq-cor-aviso );
	margin-bottom: var( --ibrpq-espaco-3 );
}

/*
 * Paginação da pesquisa.
 *
 * "Voltar" à esquerda e "Continuar" à direita: a ordem espacial acompanha a
 * ordem temporal, e inverter isso faz a pessoa clicar no errado sem perceber.
 */

.ibrpq-paginacao {
	display: flex;
	gap: var( --ibrpq-espaco-2 );
	justify-content: space-between;
	align-items: center;
	margin-top: var( --ibrpq-espaco-3 );
}

.ibrpq-paginacao__estado {
	color: var( --ibrpq-cor-texto-suave );
	font-size: var( --ibrpq-texto-s );
	margin-bottom: var( --ibrpq-espaco-2 );
}

/*
 * Construtor: o editor de pergunta redesenhado (20/08).
 *
 * Diagnóstico da primeira tela real: cada pergunta ocupava uma tela inteira,
 * tudo empilhado em largura total. Tipo, seção e obrigatoriedade dividem uma
 * linha; o cartão ganha borda e respiro para as perguntas se distinguirem.
 */

/*
 * Cartão de pergunta — a ÚNICA definição. Havia três, em 659, 1252 e 1498, e a
 * do fim vencia por ordem: quem lesse a primeira concluía que o cartão era
 * branco, e ele era `superficie-2`.
 *
 * É também um contêiner de consulta, e precisa ser: a grade "tipo · seção ·
 * obrigatória" mora aqui dentro e o cartão pode estar numa coluna de 400px ou
 * ocupando os 860px da tela. Nenhuma consulta de janela distingue os dois
 * casos, e era esse o defeito que a fotografia de 09/09/2026 mostrou.
 */
.ibrpq-pergunta {
	background: var( --ibrpq-cor-superficie-2 );
	border: 1px solid var( --ibrpq-cor-borda );
	border-radius: var( --ibrpq-raio );
	padding: var( --ibrpq-espaco-3 );
	margin: 0 0 var( --ibrpq-espaco-3 );
	container-type: inline-size;
	container-name: ibrpq-pergunta;
}

/*
 * A legenda é o título do cartão, não uma etiqueta pendurada na borda.
 *
 * `legend` por padrão se encaixa **sobre** a linha do `fieldset`, e com o
 * cartão preenchido isso a fazia parecer uma aba solta e quebrada. `float` com
 * largura cheia é o modo de tirá-la desse encaixe sem trocar o elemento — e
 * trocar seria perder o rótulo que o leitor de tela anuncia ao entrar no grupo.
 */
.ibrpq-pergunta > legend {
	float: left;
	width: 100%;

	/* Recuo à esquerda pedido pelo responsável em 21/08/2026. */
	padding: 0 0 0 10px;
	margin-bottom: var( --ibrpq-espaco-2 );
	font-weight: var( --ibrpq-peso-forte );
	font-size: var( --ibrpq-texto-s );
	color: var( --ibrpq-cor-texto-suave );
	text-transform: uppercase;
	letter-spacing: 0.04em;

	/*
	 * Zerado explicitamente: com largura cheia, qualquer fundo ou borda herdada
	 * transforma a legenda num retângulo do tamanho do cartão — e ela passa a
	 * ser lida como campo de texto vazio, não como título do grupo.
	 */
	background: none;
	border: 0;
}

/* O `float` tira a legenda do fluxo: sem isto o conteúdo sobe por baixo dela. */
.ibrpq-pergunta > legend + * {
	clear: both;
}

.ibrpq-pergunta__topo {
	display: flex;
	gap: var( --ibrpq-espaco-2 );
	align-items: flex-start;
}

.ibrpq-pergunta__enunciado {
	flex: 1;
}

.ibrpq-pergunta__topo > .ibrpq-botao {
	margin-top: var( --ibrpq-espaco-3 );
}

/*
 * Tipo e Seção crescem; "Obrigatória" pede só o que precisa.
 *
 * Com três colunas iguais a caixa de marcação ficava sozinha num terço da
 * largura, longe dos campos a que se refere. E o `align-items: start` a alinhava
 * pelo topo, na altura do **rótulo** dos vizinhos em vez da altura do campo —
 * que é onde o olho a procura.
 */
/*
 * Uma coluna por padrão; as três só quando cabem de verdade.
 *
 * Era o inverso — três colunas por padrão, caindo para uma abaixo de 782px de
 * **janela**. Dentro do tema a janela deixou de dizer quanto espaço a grade
 * tem: a 1280px ela abria em três com menos de 400px por coluna, e a
 * fotografia de 09/09/2026 mostrou o campo de seção espremido ao lado de uma
 * ajuda quebrada em quatro linhas.
 *
 * Começar por uma coluna também é a ordem segura: quando a consulta de
 * contêiner não é suportada, o que sobra é a versão estreita, que funciona em
 * qualquer largura — e não a larga, que não funciona em nenhuma estreita.
 */
.ibrpq-pergunta__grade {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --ibrpq-espaco-2 ) var( --ibrpq-espaco-3 );
	align-items: start;
}

.ibrpq-pergunta__obrigatoria {
	white-space: nowrap;
}

@container ibrpq-pergunta ( min-width: 34rem ) {
	.ibrpq-pergunta__grade {
		grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr ) auto;
	}

	.ibrpq-pergunta__obrigatoria {
		/* Desce até a linha do campo, não a do rótulo acima dele. */
		padding-top: 1.9rem;
	}
}

.ibrpq-condicao {
	display: flex;
	flex-wrap: wrap;
	gap: var( --ibrpq-espaco-1 ) var( --ibrpq-espaco-2 );
	align-items: center;
}

.ibrpq-condicao select {
	max-width: 100%;
}

.ibrpq-aviso-inline {
	color: var( --ibrpq-cor-aviso );
	font-size: var( --ibrpq-texto-s );
	margin: calc( -1 * var( --ibrpq-espaco-1 ) ) 0 var( --ibrpq-espaco-2 );
}

.ibrpq-paginas-previstas {
	color: var( --ibrpq-cor-texto-suave );
	font-size: var( --ibrpq-texto-s );
	border-left: 3px solid var( --ibrpq-cor-borda );
	padding-left: var( --ibrpq-espaco-2 );
	margin: 0 0 var( --ibrpq-espaco-3 );
}

/*
 * Passe visual de 20/08, guiado pelas telas reais do portal.
 *
 * O que as telas mostraram: anel de foco laranja emoldurando títulos (parecia
 * defeito, e era — foco programático de leitor de tela pintado como se fosse
 * controle), "Importar esquema" sozinho num cartão gigante, tabela sem
 * hierarquia entre ações, e a fila de botões da pesquisa misturando ferramenta
 * com transição de estado.
 */

/*
 * Títulos de seção recebem foco programático para o leitor de tela anunciar a
 * navegação — mas título não é controle, e o anel de foco neles lia-se como
 * uma caixa quebrada. O foco continua indo para lá; só o anel sai.
 */
.ibrpq-secao__titulo:focus,
.ibrpq-secao__titulo:focus-visible {
	outline: none;
}

.ibrpq-secao__titulo {
	border-bottom: 1px solid var( --ibrpq-cor-borda );
	padding-bottom: var( --ibrpq-espaco-2 );
	margin-bottom: var( --ibrpq-espaco-2 );
}

/*
 * Cabeçalho de tabela discreto — **só o de coluna**.
 *
 * Escrita para o `thead`, esta regra alcançava `th[scope="row"]` junto, e ali
 * mora o título da pesquisa. O dado mais importante da linha saía em caixa
 * alta, cinza e menor que o corpo: vestido de rótulo de coluna. Caixa alta
 * ainda destrói a grafia que a pessoa digitou — "teste1" virava "TESTE1" — e
 * uma tela não pode reescrever o dado para caber num estilo.
 */
.ibrpq-tabela thead th {
	color: var( --ibrpq-cor-texto-suave );
	font-size: var( --ibrpq-texto-s );
	font-weight: var( --ibrpq-peso-forte );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom-width: 2px;
}

/* Cabeçalho de linha é conteúdo: peso para hierarquia, nunca caixa alta. */
.ibrpq-tabela tbody th {
	color: var( --ibrpq-cor-texto );
	font-weight: var( --ibrpq-peso-forte );
	text-transform: none;
	letter-spacing: normal;
}

.ibrpq-tabela td {
	padding: 12px 8px;
	vertical-align: middle;
}

.ibrpq-tabela tbody tr:hover {
	background: var( --ibrpq-cor-superficie-2 );
}

.ibrpq-tabela td:last-child {
	text-align: right;
	white-space: nowrap;
}

.ibrpq-tabela td:last-child .ibrpq-botao {
	margin-left: var( --ibrpq-espaco-1 );
}

/*
 * Ferramentas da lista numa fila só: importar e acervo são utilitários, não
 * merecem um cartão inteiro cada. Os painéis que eles abrem ocupam a largura
 * toda da fila.
 */
.ibrpq-ferramentas {
	display: flex;
	flex-wrap: wrap;
	gap: var( --ibrpq-espaco-2 );
	align-items: center;
	margin-bottom: var( --ibrpq-espaco-3 );
}

.ibrpq-ferramentas > .ibrpq-importar,
.ibrpq-ferramentas > .ibrpq-acervo {
	display: contents;
}

.ibrpq-ferramentas .ibrpq-acervo__painel,
.ibrpq-ferramentas .ibrpq-aviso {
	flex-basis: 100%;
}

.ibrpq-importar {
	border: 0;
	padding: 0;
	margin: 0;
}

.ibrpq-acervo {
	margin: 0;
}

/* Fila de ações com rótulo pequeno: "Andamento" antes das transições. */
.ibrpq-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var( --ibrpq-espaco-1 ) var( --ibrpq-espaco-2 );
	align-items: center;
}

.ibrpq-acoes__rotulo {
	color: var( --ibrpq-cor-texto-suave );
	font-size: var( --ibrpq-texto-xs );
	font-weight: var( --ibrpq-peso-forte );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-right: var( --ibrpq-espaco-1 );
}

/* O cartão de pergunta se destaca do fundo do formulário. */
/*
 * A "legenda em pílula" da 0.24.0 foi removida daqui.
 *
 * Ela desenhava a legenda encaixada na borda do `fieldset`, o que fazia sentido
 * enquanto era assim que a legenda se posicionava. Com a legenda em largura
 * cheia (regra única, acima), a pílula virava um retângulo vazio do tamanho do
 * cartão — lido como campo de texto. Havia **três** definições do mesmo
 * elemento no arquivo; sobrou uma.
 */

/*
 * Aqui havia uma terceira definição de `.ibrpq-pergunta__grade`, a mil linhas
 * da primeira. Removida em 09/09/2026 junto com a conversão para consulta de
 * contêiner: a grade é definida num lugar só. Quinta ocorrência do mesmo
 * padrão neste arquivo.
 */

/*
 * Estrutura e navegação — segunda rodada visual de 20/08.
 *
 * A árvore dizia a hierarquia só por barras coloridas de 1 a 3 pixels e recuo.
 * Semanticamente correta, visualmente rasa: "Seção sem título / Página sem
 * título" em itálico cinza pareciam erro de carregamento, não estado.
 */

.ibrpq-arvore__secao {
	background: var( --ibrpq-cor-superficie );
	border: 1px solid var( --ibrpq-cor-borda );
	border-left-width: 4px;
	border-radius: var( --ibrpq-raio );
	padding: var( --ibrpq-espaco-2 ) var( --ibrpq-espaco-3 );
	margin-bottom: var( --ibrpq-espaco-3 );
}

.ibrpq-arvore__pagina {
	background: var( --ibrpq-cor-superficie-2 );
	border-left-width: 3px;
	border-radius: var( --ibrpq-raio-s );
	padding: var( --ibrpq-espaco-2 );
	margin-bottom: var( --ibrpq-espaco-2 );
}

.ibrpq-arvore__pergunta {
	background: var( --ibrpq-cor-superficie );
	border: 1px solid var( --ibrpq-cor-borda );
	border-radius: var( --ibrpq-raio-s );
	padding: var( --ibrpq-espaco-2 );
	margin-bottom: var( --ibrpq-espaco-1 );
}

/*
 * Ausência de título vira etiqueta, não frase em itálico: "sem título" é um
 * estado da seção, e ler como se fosse o nome dela foi o que a tela mostrou.
 */
.ibrpq-arvore__sem-titulo {
	font-style: normal;
	font-size: var( --ibrpq-texto-s );
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Selos de metadado da pergunta. */
.ibrpq-selos {
	display: flex;
	flex-wrap: wrap;
	gap: var( --ibrpq-espaco-1 );
	margin-top: var( --ibrpq-espaco-1 );
}

.ibrpq-selo {
	display: inline-block;
	background: var( --ibrpq-cor-superficie-2 );
	border: 1px solid var( --ibrpq-cor-borda );
	border-radius: 999px;
	padding: 1px 10px;
	font-size: var( --ibrpq-texto-xs );
	color: var( --ibrpq-cor-texto-suave );
	line-height: 1.7;
}

/*
 * "Obrigatória" ganha peso, e não só cor: é a única informação da linha que
 * muda o que acontece com quem responde.
 */
.ibrpq-selo--exige {
	background: var( --ibrpq-cor-aviso-fundo );
	border-color: var( --ibrpq-cor-aviso );
	color: var( --ibrpq-cor-texto );
	font-weight: var( --ibrpq-peso-forte );
}

.ibrpq-selo--codigo {
	font-family: var( --ibrpq-fonte-mono );
}

/*
 * Lista de pesquisas: título, situação e ações.
 *
 * A célula de título carrega o nome **e** o endereço público, porque o endereço
 * é propriedade da pesquisa, não ação sobre ela. Enquanto "Abrir link público"
 * dividia a fila com "Gerir" e "Clonar", ela empurrava os dois para a direita e
 * só nas linhas ativas — as colunas de botão saíam desalinhadas entre linhas, e
 * a leitura vertical, que é a única razão de existir uma tabela, se perdia.
 */
.ibrpq-pesquisa__titulo {
	display: block;
}

.ibrpq-pesquisa__link {
	display: inline-block;
	margin-top: 2px;
	font-family: var( --ibrpq-fonte-mono );
	font-size: var( --ibrpq-texto-xs );
	font-weight: normal;
}

/*
 * O título cresce; situação e ações encolhem até o conteúdo.
 *
 * `width: 1%` com `white-space: nowrap` é o modo de dizer "ocupe só o que
 * precisa" numa tabela. Sem isso, as três colunas repartiam a largura em
 * partes fixas e sobrava um vão morto entre o selo e os botões — vão que
 * separa visualmente a linha do que se pode fazer com ela.
 */
.ibrpq-tabela--pesquisas td:not( :first-child ),
.ibrpq-tabela--pesquisas th[scope="col"]:not( :first-child ) {
	width: 1%;
	white-space: nowrap;
}

/*
 * O `td` continua sendo `table-cell`; quem vira flex é o `div` de dentro.
 * Flexar a própria célula a tira do algoritmo de tabela, e as colunas passam a
 * se sobrepor em vez de negociar largura.
 */
.ibrpq-tabela--pesquisas .ibrpq-celula-acoes .ibrpq-acoes {
	justify-content: flex-end;
	flex-wrap: nowrap;
	margin: 0;
}

/*
 * Ações à direita para que "Gerir" e "Clonar" — presentes em toda linha —
 * alinhem em coluna. O que varia ("Publicar", ou nada) varia à esquerda delas,
 * onde a irregularidade não atrapalha a varredura vertical.
 *
 * O cabeçalho acompanha: rótulo à esquerda com conteúdo à direita é rótulo
 * apontando para a coluna errada.
 */
.ibrpq-tabela--pesquisas td:last-child,
.ibrpq-tabela--pesquisas th[scope="col"]:last-child {
	text-align: right;
}

/* Situação como selo: a coluna vira varredura, não leitura palavra a palavra. */
.ibrpq-estado {
	display: inline-block;
	border: 1px solid var( --ibrpq-cor-borda );
	border-radius: 999px;
	padding: 1px 10px;
	font-size: var( --ibrpq-texto-xs );
	font-weight: var( --ibrpq-peso-forte );
	line-height: 1.7;
	white-space: nowrap;
	background: var( --ibrpq-cor-superficie-2 );
	color: var( --ibrpq-cor-texto-suave );
}

/*
 * Cor reforça, nunca comunica sozinha (SPEC §22): o nome do estado está escrito
 * dentro do selo, e é ele que informa. A cor só encurta a varredura de quem vê.
 */
.ibrpq-estado--ativa {
	background: var( --ibrpq-cor-sucesso-fundo );
	border-color: var( --ibrpq-cor-sucesso );
	color: var( --ibrpq-cor-sucesso );
}

.ibrpq-estado--rascunho,
.ibrpq-estado--em_revisao {
	background: var( --ibrpq-cor-aviso-fundo );
	border-color: var( --ibrpq-cor-aviso );
	color: var( --ibrpq-cor-aviso );
}

.ibrpq-estado--encerrada,
.ibrpq-estado--arquivada {
	background: var( --ibrpq-cor-erro-fundo );
	border-color: var( --ibrpq-cor-erro );
	color: var( --ibrpq-cor-erro );
}

/* No celular a tabela não cabe: cada linha vira bloco, e a coluna some. */
@media ( max-width: 600px ) {
	.ibrpq-tabela--pesquisas thead {
		display: none;
	}

	.ibrpq-tabela--pesquisas tr {
		display: block;
		border-bottom: 2px solid var( --ibrpq-cor-borda );
		padding: var( --ibrpq-espaco-2 ) 0;
	}

	.ibrpq-tabela--pesquisas th,
	.ibrpq-tabela--pesquisas td,
	.ibrpq-tabela--pesquisas td:not( :first-child ),
	.ibrpq-tabela--pesquisas td:last-child {
		display: block;
		width: auto;
		border-bottom: 0;
		padding: 2px 0;
		text-align: left;
		white-space: normal;
	}

	/*
	 * O cabeçalho sumiu, então o rótulo volta antes do valor.
	 *
	 * Sem isto a linha empilhada era "Ativa / 4 / —": três valores sem dizer de
	 * quê, e o travessão do prazo indistinguível do travessão de "nunca
	 * coletou". Fotografado a 480px em 09/09/2026.
	 *
	 * `aria-hidden` não é preciso: `::before` é conteúdo gerado por CSS, que
	 * leitores de tela modernos anunciam — e aqui isso é desejável, porque na
	 * versão empilhada a associação visual com a coluna não existe mais.
	 */
	.ibrpq-tabela--pesquisas td[data-rotulo]::before {
		content: attr( data-rotulo ) ": ";
		font-size: var( --ibrpq-texto-xs );
		font-weight: var( --ibrpq-peso-forte );
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var( --ibrpq-cor-texto-suave );
	}

	/* Alinhar número à direita só faz sentido em coluna; empilhado, não há. */
	.ibrpq-tabela--pesquisas .ibrpq-celula-numero {
		text-align: left;
	}

	/* Empilhado, o alinhamento à direita separaria os botões do próprio item. */
	.ibrpq-tabela--pesquisas .ibrpq-celula-acoes .ibrpq-acoes {
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-top: var( --ibrpq-espaco-2 );
	}
}

/*
 * Aqui viviam duas regras órfãs da 0.25.0 que redefiniam o item ativo do menu
 * e a divisória do título da lateral, longe do resto da navegação. Já tinham
 * sido a causa de um item ativo ilegível uma vez. Apagadas em 09/09/2026: a
 * definição da lateral é única, e fica no bloco da casca.
 *
 * A lição, pela quarta vez neste arquivo: **ao mudar um componente, procurar
 * todas as regras que o alcançam** — inclusive as que estão a mil linhas de
 * distância e não parecem ser sobre ele.
 */

/*
 * Barra de ações em grupos rotulados (20/08, terceira leva de telas).
 *
 * Quatro botões numa fila só não diziam que "Editar perguntas" e "Exportar"
 * pertencem a mundos diferentes, e "Pausar a coleta" aparecia solta abaixo
 * como se fosse um botão esquecido. Cada grupo agora tem rótulo e a barra
 * inteira tem moldura.
 */

.ibrpq-barra {
	background: var( --ibrpq-cor-superficie-2 );
	border: 1px solid var( --ibrpq-cor-borda );
	border-radius: var( --ibrpq-raio );
	padding: var( --ibrpq-espaco-2 ) var( --ibrpq-espaco-3 );
	margin-bottom: var( --ibrpq-espaco-3 );
}

.ibrpq-barra > .ibrpq-acoes {
	margin: 0;
	padding: var( --ibrpq-espaco-2 ) 0;
}

.ibrpq-barra > .ibrpq-acoes + .ibrpq-acoes {
	border-top: 1px solid var( --ibrpq-cor-borda );
}

/* O rótulo tem largura fixa: os grupos alinham em coluna, não em zigue-zague. */
.ibrpq-acoes__rotulo {
	flex: none;
	min-width: 7rem;
}

/*
 * Zona de risco: separada por moldura própria, não só por espaço. "Encerrar a
 * coleta" e "Excluir" não podem parecer o próximo passo natural de quem estava
 * exportando.
 */
.ibrpq-acoes--sem-volta,
.ibrpq-zona-risco {
	border: 1px solid var( --ibrpq-cor-erro );
	border-radius: var( --ibrpq-raio );
	background: var( --ibrpq-cor-erro-fundo );
	padding: var( --ibrpq-espaco-2 ) var( --ibrpq-espaco-3 );
	margin-bottom: var( --ibrpq-espaco-3 );
}

.ibrpq-zona-risco h3 {
	margin-top: 0;
	font-size: var( --ibrpq-texto-m );
}

.ibrpq-zona-risco .ibrpq-acoes {
	margin-bottom: 0;
}

/*
 * Indicadores da lista — proposta visual aprovada em 21/08/2026.
 *
 * Número grande primeiro, rótulo explicando depois. Invertido, a fila vira
 * texto corrido e deixa de ser varredura, que é a única razão de um indicador
 * existir.
 */
.ibrpq-indicadores {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
	gap: var( --ibrpq-espaco );
	margin-bottom: var( --ibrpq-espaco-5 );
}

.ibrpq-indicador {
	display: flex;
	flex-direction: column;
	gap: var( --ibrpq-espaco-2 );
	padding: var( --ibrpq-espaco );
	background: var( --ibrpq-cor-superficie );
	border: 1px solid var( --ibrpq-cor-borda );
	border-radius: var( --ibrpq-raio-l );
	box-shadow: var( --ibrpq-elevacao-1 );
}

.ibrpq-indicador__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --ibrpq-espaco-2 );
}

.ibrpq-indicador__tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var( --ibrpq-raio );
	background: var( --ibrpq-cor-superficie-2 );
	color: var( --ibrpq-cor-texto );
}

.ibrpq-indicador--acervo .ibrpq-indicador__tile {
	background: var( --ibrpq-cor-acao-suave );
	color: var( --ibrpq-cor-acao );
}

.ibrpq-indicador--noar .ibrpq-indicador__tile {
	background: var( --ibrpq-cor-sucesso-fundo );
	color: var( --ibrpq-cor-sucesso );
}

.ibrpq-indicador--rascunho .ibrpq-indicador__tile {
	background: var( --ibrpq-cor-aviso-fundo );
	color: var( --ibrpq-cor-aviso );
}

/* O selo repete em texto o que a cor do tile sugere (SPEC §22). */
.ibrpq-indicador__selo {
	padding: 1px 9px;
	border-radius: 999px;
	border: 1px solid var( --ibrpq-cor-sucesso );
	background: var( --ibrpq-cor-sucesso-fundo );
	color: var( --ibrpq-cor-sucesso );
	font-size: var( --ibrpq-texto-xs );
	font-weight: var( --ibrpq-peso-forte );
}

.ibrpq-indicador__valor {
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.1;
}

.ibrpq-indicador__sufixo {
	font-size: var( --ibrpq-texto-l );
	font-weight: var( --ibrpq-peso-forte );
}

.ibrpq-indicador__rotulo {
	font-size: var( --ibrpq-texto-s );
	color: var( --ibrpq-cor-texto-suave );
}

/*
 * Área e sub-aba: dois níveis, e precisam parecer dois.
 *
 * A área é onde se está; a sub-aba é qual painel daquela área. Desenhá-las
 * iguais faria a segunda fila parecer uma continuação da primeira, e a pessoa
 * leria sete itens de mesmo peso em vez de três mais um recorte.
 */
.ibrpq-abas--areas {
	gap: var( --ibrpq-espaco-1 );
	padding: var( --ibrpq-espaco-1 );
	background: var( --ibrpq-cor-superficie-2 );
	border-radius: var( --ibrpq-raio );
	width: fit-content;
	border-bottom: 0;
}

.ibrpq-abas--areas a {
	border: 0;
	border-radius: var( --ibrpq-raio-s );
	padding: var( --ibrpq-espaco-2 ) var( --ibrpq-espaco-5 );
}

.ibrpq-abas--areas a[aria-current="page"] {
	background: var( --ibrpq-cor-superficie );
	box-shadow: var( --ibrpq-elevacao-1 );
	font-weight: var( --ibrpq-peso-forte );
}

.ibrpq-subabas {
	display: flex;
	flex-wrap: wrap;
	gap: var( --ibrpq-espaco-3 );
	list-style: none;
	margin: var( --ibrpq-espaco-3 ) 0 var( --ibrpq-espaco-5 );
	padding: 0 0 var( --ibrpq-espaco-2 );
	border-bottom: 1px solid var( --ibrpq-cor-borda );
}

.ibrpq-subabas a {
	display: block;
	padding: var( --ibrpq-espaco-1 ) 0;
	color: var( --ibrpq-cor-texto-suave );
	text-decoration: none;
	font-size: var( --ibrpq-texto-s );
	border-bottom: 2px solid transparent;
}

.ibrpq-subabas a:hover {
	color: var( --ibrpq-cor-texto );
}

.ibrpq-subabas a[aria-current="page"] {
	color: var( --ibrpq-cor-acao-forte );
	border-bottom-color: var( --ibrpq-cor-acao );
	font-weight: var( --ibrpq-peso-forte );
}

.ibrpq-subabas a:focus-visible {
	outline: var( --ibrpq-foco-espessura ) solid var( --ibrpq-cor-foco );
	outline-offset: var( --ibrpq-foco-deslocamento );
}

/*
 * Barra do cartão de pergunta — entrega B, 21/08/2026.
 *
 * Identidade à esquerda, ações à direita. Antes "Remover" ficava ao lado do
 * campo de enunciado, na altura dele: lia como ação sobre o texto que se estava
 * digitando, não sobre a pergunta inteira.
 */
.ibrpq-pergunta__barra {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --ibrpq-espaco-3 );
	flex-wrap: wrap;
	margin: calc( -1 * var( --ibrpq-espaco-2 ) ) 0 var( --ibrpq-espaco-3 );
	padding-bottom: var( --ibrpq-espaco-2 );
	border-bottom: 1px solid var( --ibrpq-cor-borda );
}

.ibrpq-pergunta__id {
	display: flex;
	align-items: center;
	gap: var( --ibrpq-espaco-2 );
	min-width: 0;
}

.ibrpq-pergunta__ordem {
	font-size: var( --ibrpq-texto-s );
	font-weight: var( --ibrpq-peso-forte );
	color: var( --ibrpq-cor-texto-suave );
}

.ibrpq-pergunta__acoes {
	display: flex;
	align-items: center;
	gap: var( --ibrpq-espaco-1 );
	flex-wrap: wrap;
}

/*
 * As setas ficam quadradas para não parecerem botões de texto de uma letra.
 * Elas carregam rótulo acessível dizendo para onde a pergunta vai — a seta
 * sozinha não diz "mover a pergunta 3 para cima" a quem não a vê.
 */
.ibrpq-pergunta__acoes .ibrpq-botao:not( :last-child ) {
	min-width: 2rem;
	justify-content: center;
	font-size: var( --ibrpq-texto-m );
	line-height: 1;
}

/* Bloco de limites da resposta, dentro do cartão de pergunta. */
.ibrpq-limites {
	display: flex;
	flex-direction: column;
	gap: var( --ibrpq-espaco-2 );
	margin-top: var( --ibrpq-espaco-3 );
	padding: var( --ibrpq-espaco-3 );
	background: var( --ibrpq-cor-superficie );
	border: 1px solid var( --ibrpq-cor-borda );
	border-radius: var( --ibrpq-raio );
}

.ibrpq-limites__titulo {
	font-size: var( --ibrpq-texto-xs );
	font-weight: var( --ibrpq-peso-forte );
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --ibrpq-cor-texto-suave );
}

.ibrpq-limites__grade {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 12rem, 1fr ) );
	gap: var( --ibrpq-espaco-3 );
}

.ibrpq-limites__ajuda {
	font-size: var( --ibrpq-texto-xs );
	color: var( --ibrpq-cor-texto-suave );
}

/*
 * Gráfico e tabela lado a lado — entrega C.
 *
 * Lado a lado, e não um sob o outro: a tabela é a alternativa acessível do
 * gráfico, e alternativa que exige rolar a página deixa de ser equivalente.
 * Abaixo de 60rem eles empilham, porque lado a lado num celular espremeria os
 * dois até nenhum servir.
 */
.ibrpq-grafico-e-tabela {
	display: grid;
	grid-template-columns: minmax( 0, 1.9fr ) minmax( 0, 1fr );
	gap: var( --ibrpq-espaco-5 );
	align-items: start;
	margin-top: var( --ibrpq-espaco-3 );
}

@media ( max-width: 60rem ) {
	.ibrpq-grafico-e-tabela {
		grid-template-columns: 1fr;
	}
}

.ibrpq-grafico {
	display: block;
	max-width: 100%;
	overflow: visible;
}

/* Cabeçalho que situa a leitura: quantas, quando, em que estado. */
.ibrpq-consolidado {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 12rem, 1fr ) );
	gap: var( --ibrpq-espaco );
	padding: var( --ibrpq-espaco ) 0 var( --ibrpq-espaco-5 );
	border-bottom: 1px solid var( --ibrpq-cor-borda );
	margin-bottom: var( --ibrpq-espaco-3 );
}

.ibrpq-consolidado__item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ibrpq-consolidado__valor {
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.1;
}

/* Data e situação são texto: no corpo de número grande, quebram a linha. */
.ibrpq-consolidado__valor--texto {
	font-size: var( --ibrpq-texto-l );
	font-weight: var( --ibrpq-peso-forte );
	line-height: 1.4;
}

.ibrpq-consolidado__rotulo {
	font-size: var( --ibrpq-texto-s );
	color: var( --ibrpq-cor-texto-suave );
}

/* Fila de exportação, no topo dos resultados. */
.ibrpq-acoes--exportar {
	margin: var( --ibrpq-espaco-3 ) 0 0;
	padding: var( --ibrpq-espaco-2 ) 0;
	border-bottom: 1px solid var( --ibrpq-cor-borda );
}

/* ---------------------------------------------------------------------------
 * Leiaute da maquete de 27/08/2026 — barra de progresso e cartões de formato.
 *
 * Tudo aqui é moldura sobre marcação que já existia. Nenhuma regra nova
 * introduz comportamento: a barra repete o que a linha de estado já diz, e os
 * cartões envolvem os mesmos três botões de exportação de antes.
 * ------------------------------------------------------------------------- */

/*
 * Progresso da aplicação de resposta.
 *
 * Fica acima das perguntas, junto da linha "Página X de Y". A linha é quem
 * informa; a barra é a mesma informação em forma visual, e por isso está
 * `aria-hidden` na marcação.
 */
.ibrpq-progresso {
	display: flex;
	flex-direction: column;
	gap: var( --ibrpq-espaco-2 );
	margin-bottom: var( --ibrpq-espaco-5 );
}

.ibrpq-progresso .ibrpq-paginacao__estado {
	margin: 0;
}

.ibrpq-progresso__trilho {
	height: 6px;
	border-radius: 999px;
	background: var( --ibrpq-cor-superficie-2 );

	/*
	 * Borda de 1px e não fundo sozinho: sobre o branco do tema o cinza do
	 * trilho vazio quase some, e a barra passa a parecer flutuar sem começo
	 * nem fim. A borda dá a ela um contorno que sobrevive a qualquer tema que
	 * o site venha a usar.
	 */
	border: 1px solid var( --ibrpq-cor-borda );
	overflow: hidden;
}

.ibrpq-progresso__preenchimento {
	height: 100%;
	background: var( --ibrpq-cor-acao );
	border-radius: 999px;
	transition: width var( --ibrpq-transicao );
}

/*
 * Quem pediu menos movimento não recebe a transição da largura: numa pesquisa
 * longa ela dispara a cada página.
 */
@media ( prefers-reduced-motion: reduce ) {
	.ibrpq-progresso__preenchimento {
		transition: none;
	}
}

/* Formatos de exportação, em cartão. */
.ibrpq-formatos {
	margin: var( --ibrpq-espaco-3 ) 0 var( --ibrpq-espaco-5 );
}

.ibrpq-formatos__titulo {
	margin: 0 0 var( --ibrpq-espaco-1 );
	font-size: var( --ibrpq-texto-s );
	font-weight: var( --ibrpq-peso-forte );
}

.ibrpq-formatos__ajuda {
	margin: 0 0 var( --ibrpq-espaco-3 );
	font-size: var( --ibrpq-texto-s );
	color: var( --ibrpq-cor-texto-suave );
}

.ibrpq-formatos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) );
	gap: var( --ibrpq-espaco );
}

.ibrpq-formato {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --ibrpq-espaco-2 );
	background: var( --ibrpq-cor-superficie );
	border: 1px solid var( --ibrpq-cor-borda );
	border-radius: var( --ibrpq-raio-l );
	padding: var( --ibrpq-espaco );
	box-shadow: var( --ibrpq-elevacao-1 );
}

.ibrpq-formato__tile {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var( --ibrpq-raio );
	background: var( --ibrpq-cor-acao-suave );
	color: var( --ibrpq-cor-acao );
}

/*
 * Cada formato tem a sua cor, e ela é a mesma dos indicadores da lista — não
 * uma paleta nova. Verde para a planilha e âmbar para o relatório repetem o
 * que o painel já usa para "no ar" e "rascunho", então quem circula pelas duas
 * telas não aprende dois vocabulários de cor.
 */
.ibrpq-formato--xlsx .ibrpq-formato__tile {
	background: var( --ibrpq-cor-sucesso-fundo );
	color: var( --ibrpq-cor-sucesso );
}

.ibrpq-formato--pdf .ibrpq-formato__tile {
	background: var( --ibrpq-cor-aviso-fundo );
	color: var( --ibrpq-cor-aviso );
}

.ibrpq-formato__nome {
	font-weight: var( --ibrpq-peso-forte );
}

.ibrpq-formato__desc {
	font-size: var( --ibrpq-texto-s );
	color: var( --ibrpq-cor-texto-suave );

	/*
	 * O botão precisa ficar rente à base em todos os três cartões, senão eles
	 * desalinham quando uma descrição ocupa duas linhas e outra ocupa três.
	 */
	flex-grow: 1;
}

/*
 * Marca de conteúdo ilustrativo.
 *
 * Onde a maquete mostra algo que o plugin ainda não faz, a tela traz um exemplo
 * no lugar certo — e ele precisa se anunciar como exemplo. Painel institucional
 * que exibe número inventado sem aviso é pior do que painel que não exibe nada:
 * alguém decide com base nele.
 */
.ibrpq-exemplo {
	position: relative;
	border: 1px dashed var( --ibrpq-cor-aviso );
	border-radius: var( --ibrpq-raio );
	background: var( --ibrpq-cor-aviso-fundo );
	padding: var( --ibrpq-espaco );
}

.ibrpq-exemplo__selo {
	display: inline-block;
	margin-bottom: var( --ibrpq-espaco-2 );
	padding: 2px 8px;
	border-radius: var( --ibrpq-raio-s );
	background: var( --ibrpq-cor-aviso );
	color: #ffffff;
	font-size: var( --ibrpq-texto-xs );
	font-weight: var( --ibrpq-peso-forte );
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/*
 * Painel de tipos do construtor.
 *
 * Cada tipo é um botão inteiro, não um item de lista com um botão dentro: o
 * alvo é o cartão todo, e num toque de celular a diferença entre acertar o
 * rótulo e acertar o cartão é a diferença entre funcionar e não funcionar.
 */
.ibrpq-tipos {
	margin: var( --ibrpq-espaco-5 ) 0;
	padding: var( --ibrpq-espaco );
	background: var( --ibrpq-cor-superficie-2 );
	border: 1px solid var( --ibrpq-cor-borda );
	border-radius: var( --ibrpq-raio-l );
}

.ibrpq-tipos__titulo {
	margin: 0 0 var( --ibrpq-espaco-1 );
	font-size: var( --ibrpq-texto-s );
	font-weight: var( --ibrpq-peso-forte );
}

/*
 * Duas colunas fixas, e não `auto-fit`.
 *
 * O painel mora numa coluna de largura conhecida — a de apoio do construtor —,
 * então `auto-fit` só produziria uma contagem imprevisível conforme a janela. A
 * grade de 2 é a da maquete e é a que mantém os oito tipos visíveis de uma vez,
 * sem rolagem, ao lado das perguntas.
 */
.ibrpq-tipos__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --ibrpq-espaco-2 );
}

.ibrpq-tipo {
	display: flex;
	align-items: center;
	gap: var( --ibrpq-espaco-2 );
	width: 100%;
	min-height: 44px;
	padding: var( --ibrpq-espaco-2 ) var( --ibrpq-espaco-3 );
	text-align: left;
	background: var( --ibrpq-cor-superficie );
	border: 1px solid var( --ibrpq-cor-borda-controle );
	border-radius: var( --ibrpq-raio );
	color: var( --ibrpq-cor-texto );
	font: inherit;
	cursor: pointer;
	transition: border-color var( --ibrpq-transicao ),
		background var( --ibrpq-transicao );
}

.ibrpq-tipo:hover {
	background: var( --ibrpq-cor-acao-suave );
	border-color: var( --ibrpq-cor-acao );
}

.ibrpq-tipo__tile {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: var( --ibrpq-raio-s );
	background: var( --ibrpq-cor-acao-suave );
	color: var( --ibrpq-cor-acao );
}

.ibrpq-tipo__nome {
	font-weight: var( --ibrpq-peso-forte );
	font-size: var( --ibrpq-texto-s );
	min-width: 0;

	/*
	 * "Múltipla escolha" é o rótulo mais longo e cabe numa coluna de 2 até
	 * ~180px. Abaixo disso ele quebra em duas linhas, e o botão cresce — o que
	 * é preferível a cortar o nome do tipo com reticências.
	 */
	text-wrap: balance;
}

@media ( prefers-reduced-motion: reduce ) {
	.ibrpq-tipo {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Construtor em duas colunas (leiaute da maquete de 27/08/2026).
 * ------------------------------------------------------------------------- */

/*
 * Uma coluna por padrão; duas quando a COLUNA DE CONTEÚDO comporta.
 *
 * Era `@media ( min-width: 1120px )`, e o corte estava certo enquanto o portal
 * ocupava a janela inteira. Dentro do tema, numa janela de 1280px, a coluna de
 * conteúdo mede **864px** — a consulta de janela dizia "cabem duas colunas" e
 * o construtor abria com 400px por coluna. Medido em 09/09/2026, e visível na
 * fotografia: campo de seção espremido e ajuda quebrada em quatro linhas.
 *
 * Lado a lado numa coluna estreita, a coluna das perguntas perde justamente os
 * campos que mais precisam de largura — enunciado e texto de apoio.
 */
.ibrpq-construtor {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --ibrpq-espaco-5 );
	align-items: start;
}

.ibrpq-construtor__perguntas {
	min-width: 0;
}

.ibrpq-construtor__apoio {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var( --ibrpq-espaco );
}

/*
 * 61rem = 976px, e o número tem uma razão medida.
 *
 * O tema limita o conteúdo em 1290px, então a coluna do portal chega no máximo
 * a ~1002px por mais larga que seja a janela. Um corte em 64rem (1024px) nunca
 * mais seria alcançado: o construtor em duas colunas da 0.38.0 morreria em
 * silêncio, e o painel de tipos cairia para o fim de um questionário de 92
 * perguntas — a rolagem que a coluna de apoio existe para evitar.
 *
 * 61rem abre as duas colunas a partir de ~1400px de janela, com 1002px para
 * dividir — praticamente os 1056px para os quais o leiaute foi desenhado — e
 * as mantém fechadas a 1280px, onde a fotografia mostrou 400px por coluna.
 */
@container ibrpq-conteudo ( min-width: 61rem ) {
	.ibrpq-construtor {
		grid-template-columns: 1.3fr 1fr;
	}

	/*
	 * O apoio acompanha a rolagem: num questionário longo, acrescentar a nona
	 * pergunta não deve exigir voltar ao fim da lista. `align-items: start` na
	 * grade é o que permite o `sticky` funcionar aqui.
	 */
	.ibrpq-construtor__apoio {
		position: sticky;
		top: var( --ibrpq-espaco );
	}
}

/* Resumo da estrutura, ao lado do construtor. */
.ibrpq-estrutura-resumo {
	padding: var( --ibrpq-espaco );
	background: var( --ibrpq-cor-superficie );
	border: 1px solid var( --ibrpq-cor-borda );
	border-radius: var( --ibrpq-raio-l );
}

.ibrpq-estrutura-resumo__titulo {
	margin: 0 0 var( --ibrpq-espaco-2 );
	font-size: var( --ibrpq-texto-s );
	font-weight: var( --ibrpq-peso-forte );
}

.ibrpq-estrutura-resumo__vazio {
	margin: 0;
	font-size: var( --ibrpq-texto-s );
}

.ibrpq-estrutura-resumo__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --ibrpq-espaco-2 );
}

.ibrpq-estrutura-resumo__lista li {
	display: flex;
	flex-direction: column;
	padding-left: var( --ibrpq-espaco-3 );
	border-left: 3px solid var( --ibrpq-cor-acao );
}

.ibrpq-estrutura-resumo__pagina {
	font-size: var( --ibrpq-texto-s );
	font-weight: var( --ibrpq-peso-forte );
}

.ibrpq-estrutura-resumo__conta {
	font-size: var( --ibrpq-texto-xs );
	color: var( --ibrpq-cor-texto-suave );
}

.ibrpq-estrutura-resumo__ajuda {
	margin: var( --ibrpq-espaco-3 ) 0 0;
	font-size: var( --ibrpq-texto-xs );
	color: var( --ibrpq-cor-texto-suave );
	text-wrap: pretty;
}

/*
 * Texto de ajuda do `wp-components`, sobre o fundo do bloco de pergunta.
 *
 * O WordPress pinta `.components-base-control__help` de `#757575`, que dá
 * 4,6:1 sobre branco e passa — mas o bloco de pergunta tem fundo `#eef1f5`, e
 * ali a razão cai para **4,07:1**, abaixo do mínimo de 4,5:1 da WCAG AA para
 * texto de 12px. Medido em 27/08/2026 por `tools/contraste.js`, na tela do
 * construtor; nenhum portão tinha visto, porque nenhum portão olha cor.
 *
 * É o texto que explica o que cada tipo de pergunta faz e o que a seção
 * significa — conteúdo, não decoração. `--ibrpq-cor-texto-suave` dá 5,5:1 no
 * mesmo fundo.
 *
 * Escopado em `.ibrpq-no-tema` de propósito: é o contêiner que o Router abre,
 * então não mexemos no `wp-components` fora do que é nosso.
 *
 * ---------------------------------------------------------------------------
 *
 * O acento do `wp-components` passa a ser a NOSSA cor de ação, e por medição.
 *
 * O padrão é `--wp-admin-theme-color: #007cba`, e ele dá **4,04:1** sobre o
 * fundo `#eef1f5` do cartão de pergunta, num texto de 13px — abaixo do 4,5:1
 * da WCAG AA. Reprovava "Remover", "↑", "↓", "Copiar endereço", "Exportar",
 * "Pausar a coleta" e mais uma dúzia de botões terciários, medidos em
 * 09/09/2026 por `tools/contraste.js`.
 *
 * `--ibrpq-cor-acao` (#2b5fa8) dá **5,48:1** sobre `#eef1f5` e **6,21:1** sobre
 * branco — passa nos dois fundos em que os botões aparecem, que é o critério
 * que a família do trilho já ensinou a usar: valor que só atende um fundo
 * volta a falhar assim que o elemento se move.
 *
 * Redefinir o **token**, e não cada regra, alcança todo componente do
 * WordPress que derive do acento — inclusive os que este portal ainda não usa.
 */
.ibrpq-no-tema {
	--wp-admin-theme-color: var( --ibrpq-cor-acao );
	--wp-admin-theme-color-darker-10: var( --ibrpq-cor-acao-forte );
	--wp-admin-theme-color-darker-20: var( --ibrpq-cor-acao-forte );
	--wp-components-color-accent: var( --ibrpq-cor-acao );
	--wp-components-color-accent-darker-10: var( --ibrpq-cor-acao-forte );
	--wp-components-color-accent-darker-20: var( --ibrpq-cor-acao-forte );
}

/*
 *
 * ⚠️ Era `.ibrpq-body`, a classe da casca própria. Ao mover o portal para
 * dentro do tema, este seletor teria parado de casar **em silêncio** e o
 * defeito de 4,07:1 voltaria sem ninguém notar — nenhum portão olha cor, e foi
 * uma fotografia de tela que o achou da primeira vez.
 */
.ibrpq-no-tema .components-base-control__help {
	color: var( --ibrpq-cor-texto-suave );
}

/* Endereço público, na área Publicar. */
.ibrpq-endereco {
	margin: var( --ibrpq-espaco ) 0;
	padding: var( --ibrpq-espaco );
	background: var( --ibrpq-cor-superficie-2 );
	border: 1px solid var( --ibrpq-cor-borda );
	border-radius: var( --ibrpq-raio-l );
}

.ibrpq-endereco__titulo {
	margin: 0 0 var( --ibrpq-espaco-2 );
	font-size: var( --ibrpq-texto-s );
	font-weight: var( --ibrpq-peso-forte );
}

.ibrpq-endereco__valor {
	margin: 0 0 var( --ibrpq-espaco-3 );
	padding: var( --ibrpq-espaco-2 ) var( --ibrpq-espaco-3 );
	background: var( --ibrpq-cor-superficie );
	border: 1px solid var( --ibrpq-cor-borda );
	border-radius: var( --ibrpq-raio );
	font-family: var( --ibrpq-fonte-mono );
	font-size: var( --ibrpq-texto-s );

	/*
	 * Quebra em qualquer ponto: endereço longo não tem espaço onde quebrar, e
	 * sem isto ele estoura a caixa em vez de passar para a linha de baixo.
	 */
	overflow-wrap: anywhere;
}

.ibrpq-endereco__copiado {
	font-size: var( --ibrpq-texto-s );
	font-weight: var( --ibrpq-peso-forte );
	color: var( --ibrpq-cor-sucesso );
}

.ibrpq-endereco__ajuda {
	margin: var( --ibrpq-espaco-2 ) 0 0;
	font-size: var( --ibrpq-texto-xs );
	color: var( --ibrpq-cor-texto-suave );
	text-wrap: pretty;
}

/* Topo da lista: título e a ação principal na mesma linha (maquete de 27/08). */
.ibrpq-lista-topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --ibrpq-espaco );
	flex-wrap: wrap;
}

/* Números alinham à direita: é o que permite comparar grandezas numa coluna. */
.ibrpq-celula-numero {
	text-align: right;
	font-variant-numeric: tabular-nums;
}