/**
 * Notas de rodapé — balão ao passar o mouse no marcador.
 *
 * O desenho é deliberadamente o MESMO do balão do glossário (o roxo da marca
 * diluído, texto na cor de leitura, canto de 16px, sem borda, duas sombras):
 * são dois recursos diferentes, mas para quem lê é o mesmo gesto — passar o
 * mouse e receber uma explicação. Dois visuais diferentes só criariam a dúvida
 * de que um deles significa outra coisa.
 *
 * Se o balão do glossário mudar de cor, este muda junto. Os valores estão
 * duplicados porque os arquivos são de extensões distintas e instaláveis
 * separadamente — não há um lugar comum sem acoplar as duas.
 * Ver .claude/ui-componentes.md §3.
 */

.arb-nota {
	/* O marcador já é um link; aqui só se avisa que ele agora responde ao
	   passar o mouse. O sublinhado do tema sai: o número não é para ser lido
	   como link de navegação, e sim como chamada da nota. */
	text-decoration: none;
	cursor: help;
}

.arb-nota:hover,
.arb-nota:focus-visible {
	text-decoration: none;
	outline: none;
}

.arb-nota:hover sup,
.arb-nota:focus-visible sup {
	background-color: rgba(78, 0, 255, .12);
	border-radius: 3px;
}

.arb-nota-bloco {
	position: relative;
}

.arb-nota::after {
	content: attr(data-arb-nota);

	position: absolute;

	/* Horizontal do parágrafo (largura da coluna de texto); vertical na posição
	   estática, isto é, na linha do próprio marcador. Igual ao glossário — ver
	   a explicação longa lá. */
	left: 0;
	margin-top: 2em;
	z-index: 1010;

	width: 100%;
	min-width: min(560px, 90vw);
	max-width: 90vw;
	padding: 12px 16px;

	color: #3A3F5C;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: normal;
	text-align: left;
	text-decoration: none;
	text-transform: none;
	white-space: normal;
	vertical-align: baseline;

	/* O MESMO #F4F0FF do glossário (roxo da marca a 7% sobre branco). Já foi o
	   roxo cheio com texto branco: o bloco chapado pesava no meio da leitura,
	   e ainda dava a entender que nota e glossário são coisas de natureza
	   diferente. Ver a explicação longa em media/com_glossario/css/glossario.css.

	   Sem borda de propósito: o bico é um triângulo de bordas CSS e não teria
	   contorno, o que deixaria uma emenda visível na ponta. Quem separa o balão
	   da página é a sombra.

	   Esta é a cor CHEIA, que fica de base: o bloco @supports lá embaixo troca
	   por uma versão translúcida onde o navegador souber desfocar o fundo. */
	background: #F4F0FF !important;
	border-radius: 16px;
	box-shadow:
		0 2px 6px rgba(62, 56, 100, .07),
		0 14px 32px rgba(62, 56, 100, .12);

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .12s ease;
}

/* Bico: sem left nem top, fica exatamente onde o marcador está. */
.arb-nota::before {
	content: "";

	position: absolute;
	margin-top: calc(2em - 11px);
	margin-left: 2px;
	z-index: 1011;

	/* O bico fica na cor CHEIA mesmo quando o balão está translúcido: um
	   triângulo de bordas não tem como desfocar o próprio fundo. Com 6px, a
	   diferença de tom para o balão não se nota. */
	border: 6px solid transparent;
	border-bottom-color: #F4F0FF;

	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .12s ease;
}

/* ------------------------------------------------------- balão translúcido
 *
 * Igual ao glossário: o balão deixa passar um pouco do parágrafo que está
 * sendo lido, mas só acompanhado do desfoque — o que atravessa é a claridade
 * da página, nunca as letras dela. Onde não houver backdrop-filter, fica a cor
 * cheia declarada acima. Nunca translúcido sem desfoque.
 */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
	.arb-nota::after {
		background: rgba(244, 240, 255, .72) !important;

		-webkit-backdrop-filter: blur(14px) saturate(1.5);
		backdrop-filter: blur(14px) saturate(1.5);
	}
}

/*
 * Nota cortada: o balão avisa que há mais, e o clique (que continua levando ao
 * rodapé) é o caminho para o texto inteiro. Sem este aviso, o corte pareceria
 * a nota terminando no meio da frase.
 */
.arb-nota[data-arb-cortada]::after {
	content: attr(data-arb-nota) " ▸ clique para ler a nota completa";
}


/* Hover para mouse, foco para teclado e toque — o marcador já é focável por
   ser um link, então não precisa de tabindex. */
.arb-nota:hover::after,
.arb-nota:focus::after,
.arb-nota:hover::before,
.arb-nota:focus::before {
	opacity: 1;
	visibility: visible;
}

@media print {
	.arb-nota::after,
	.arb-nota::before {
		display: none;
	}
}