/*
 * Anexos de um estudo, na página pública do acervo.
 *
 * O bloco é impresso por AssetService::append_public_assets() no fim do
 * conteúdo, e até aqui não tinha folha nenhuma: saía como lista com marcador e
 * link azul do navegador, no meio de uma página inteira desenhada. O members.css
 * não resolve porque só é enfileirado nas rotas da área de membros.
 *
 * O desenho segue o bloco "Quem assina" do tema, que fica logo acima: mesmo
 * cartão claro, mesma borda, mesmo rótulo em caixa alta. As variáveis apontam
 * para os tokens do tema com valor de segurança, como o members.css faz.
 *
 * Do celular para fora: a lista é de uma coluna em qualquer largura. Anexo é
 * item de download, não grade — duas colunas só encurtariam a página e
 * tornariam o alvo de toque menor.
 */

.ml-members-assets {
	margin: 20px 0 0;
	padding: 22px 24px;
	background: var( --mlm-surface, #FFFFFF );
	border: 1px solid var( --mlm-line, #E2E1DA );
	border-radius: var( --mlm-radius, 18px );
}

/* A classe é repetida de propósito: o tema estiliza o h2 do conteúdo em
   Newsreader 36px, com especificidade maior que uma classe simples, e o
   resultado era um "ANEXOS" gigante em caixa alta. Dobrar a classe vence sem
   precisar de !important. */
.ml-members-assets.ml-members-assets h2 {
	margin: 0;
	/* Os mesmos valores do rótulo "Quem assina" logo acima, para os dois blocos
	   do fim da publicação lerem como a mesma família. */
	font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var( --mlm-muted, #8B8F8C );
}

.ml-members-assets ul {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.ml-members-assets li {
	margin: 0;
	padding: 0;
}

.ml-members-assets li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var( --mlm-line, #E2E1DA );
	border-radius: 12px;
	color: inherit;
	text-decoration: none;
	font-size: .95rem;
	line-height: 1.4;
	transition: border-color .2s ease, background .2s ease;
}

/* A seta diz que o link baixa um arquivo, sem depender de ícone externo. */
.ml-members-assets li a::before {
	content: "\2193";
	flex: 0 0 auto;
	font-size: 1rem;
	line-height: 1;
	color: var( --mlm-muted, #5C615F );
}

.ml-members-assets li a:hover,
.ml-members-assets li a:focus-visible {
	border-color: var( --mlm-line-strong, #CFCDC3 );
	background: var( --mlm-surface-soft, #F4F3EE );
}

.ml-members-assets > p {
	margin: 12px 0 0;
	font-size: .85rem;
	line-height: 1.5;
	color: var( --mlm-muted, #5C615F );
}

@media ( prefers-reduced-motion: reduce ) {
	.ml-members-assets li a { transition: none; }
}