/**
 * Meu Now — estilos públicos.
 * Variáveis compartilhadas da suíte (ver design-system.md) + variáveis
 * próprias (--mnw-*) sobrescritas pela tela de configurações via wp_head.
 *
 * Layout: feed agrupado em caixas por seção (estilo "now page" — uma caixa
 * por categoria, tipo "Lendo"/"Assistindo"/"Quero jogar"), organizadas em
 * colunas via CSS multi-column (mais parecido com o efeito "masonry" das
 * referências do que um grid de altura fixa, já que cada caixa tem um
 * número diferente de itens).
 */
:root {
	--mp-color-primary: #2563eb;
	--mp-color-primary-dark: #1d4ed8;
	--mp-color-accent: #f59e0b;
	--mp-color-success: #16a34a;
	--mp-color-danger: #dc2626;
	--mp-color-text: #1f2933;
	--mp-color-text-muted: #6b7280;
	--mp-color-bg: #ffffff;
	--mp-color-bg-subtle: #f5f7fa;
	--mp-color-border: #e2e8f0;

	--mp-radius-sm: 4px;
	--mp-radius-md: 8px;
	--mp-radius-lg: 14px;

	--mp-space-1: 4px;
	--mp-space-2: 8px;
	--mp-space-3: 16px;
	--mp-space-4: 24px;
	--mp-space-5: 32px;

	--mp-font-size-sm: 0.875rem;
	--mp-font-size-base: 1rem;
	--mp-font-size-lg: 1.25rem;

	--mnw-color-primary: var(--mp-color-primary);
	--mnw-radius: var(--mp-radius-md);
}

/* Fonte herdada do tema (não um stack próprio) — o feed deve se parecer
 * com o resto do site em que está inserido, não com um componente à parte. */
.mnw-feed {
	font-family: inherit;
	font-size: 1rem;
	color: var(--mp-color-text);
}

/* Bloco "Agora" (apresentação) — largura total, fora da grade de seções. */
.mnw-perfil {
	background: var(--mp-color-bg);
	border: 1px solid var(--mp-color-border);
	border-radius: var(--mnw-radius);
	padding: var(--mp-space-4);
	margin-bottom: var(--mp-space-4);
}

.mnw-perfil__nome {
	margin: 0 0 var(--mp-space-1);
	font-size: 1.5rem;
	color: var(--mnw-color-primary);
}

.mnw-perfil__subtitulo {
	margin: 0 0 var(--mp-space-2);
	font-size: var(--mp-font-size-base);
	color: var(--mp-color-text-muted);
}

/* Emoji de apoio (📍 onde mora, 🎯 hobbies, 💭 foco atual) — inline-flex
 * evita o desalinhamento vertical comum de emoji ao lado de texto. */
.mnw-perfil__icone {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

/* Hobbies do momento: texto simples (sem cards/pills), só o nome do hobby
 * em destaque (com um emoji de apoio por hobby), separado por um "·" gerado
 * em CSS. */
.mnw-perfil__hobbies {
	margin: 0 0 var(--mp-space-2);
	font-size: var(--mp-font-size-base);
	color: var(--mp-color-text-muted);
}

.mnw-perfil__hobby {
	color: var(--mnw-color-primary);
	font-weight: 600;
}

.mnw-perfil__hobby:not(:last-child)::after {
	content: " · ";
	color: var(--mp-color-text-muted);
	font-weight: 400;
}

.mnw-perfil__frase {
	margin: 0 0 var(--mp-space-2);
	font-size: var(--mp-font-size-lg);
}

.mnw-perfil__links {
	margin: var(--mp-space-2) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mp-space-3);
}

.mnw-perfil__links a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 0 var(--mp-space-3);
	border: 1px solid var(--mnw-color-primary);
	border-radius: var(--mnw-radius);
	color: var(--mnw-color-primary);
	text-decoration: none;
	font-size: var(--mp-font-size-sm);
}

.mnw-perfil__links a:hover,
.mnw-perfil__links a:focus {
	background: var(--mnw-color-primary);
	color: #fff;
}

/* Grade de caixas — mobile-first: uma coluna; colunas extras só a partir do tablet. */
.mnw-grade {
	column-count: 1;
	column-gap: var(--mp-space-4);
}

@media (min-width: 600px) {
	.mnw-grade {
		column-count: 2;
	}
}

@media (min-width: 960px) {
	.mnw-grade {
		column-count: 3;
	}
}

/* Caixa/seção — estilo "cartão de janela", uma por categoria. */
.mnw-caixa {
	background: var(--mp-color-bg);
	border: 1px solid var(--mp-color-border);
	border-radius: var(--mnw-radius);
	margin-bottom: var(--mp-space-4);
	break-inside: avoid;
	overflow: hidden;
}

.mnw-caixa__cabecalho {
	display: flex;
	align-items: center;
	gap: var(--mp-space-2);
	padding: var(--mp-space-2) var(--mp-space-3);
	border-bottom: 2px solid var(--mnw-color-primary);
}

/* inline-flex + line-height:1 evita o desalinhamento vertical clássico de
 * emoji em fontes de emoji coloridas (a caixa do glifo tem metrics próprias
 * que `align-items: center` sozinho no container flex pai não corrige). */
.mnw-caixa__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.125rem;
	line-height: 1;
}

.mnw-caixa__titulo {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--mp-color-text);
	line-height: 1.3;
}

.mnw-caixa__contador {
	margin-left: auto;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--mnw-color-primary);
	background: color-mix(in srgb, var(--mnw-color-primary) 12%, white);
	border-radius: var(--mp-radius-lg);
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mnw-caixa__lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Scroll interno quando a caixa tem muitos itens, para a caixa não esticar
 * a página inteira — só no feed agrupado; a lista "solta" do drill-down
 * (--solta) já pagina, então não precisa de scroll próprio. */
.mnw-caixa__lista:not(.mnw-caixa__lista--solta) {
	max-height: 420px;
	overflow-y: auto;
}

.mnw-caixa__lista--solta {
	background: var(--mp-color-bg);
	border: 1px solid var(--mp-color-border);
	border-radius: var(--mnw-radius);
	overflow: hidden;
}

.mnw-caixa__mais {
	display: block;
	padding: var(--mp-space-2) var(--mp-space-3);
	text-align: right;
	font-size: var(--mp-font-size-sm);
	color: var(--mnw-color-primary);
	text-decoration: none;
	border-top: 1px solid var(--mp-color-border);
}

.mnw-caixa__mais:hover,
.mnw-caixa__mais:focus {
	text-decoration: underline;
}

/* Item individual dentro de uma caixa/lista. */
.mnw-item {
	padding: var(--mp-space-2) var(--mp-space-3);
	border-bottom: 1px solid var(--mp-color-border);
}

.mnw-item:last-child {
	border-bottom: none;
}

/* Item concluído (ex.: livro já lido dentro da caixa "Lendo") — riscado e
 * discreto, mas continua na mesma lista dos "em andamento". */
.mnw-item--concluido {
	opacity: 0.65;
}

.mnw-item--concluido .mnw-item__titulo {
	text-decoration: line-through;
	text-decoration-color: var(--mp-color-text-muted);
}

.mnw-item__linha {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--mp-space-2);
}

.mnw-item__titulo {
	font-weight: 600;
	font-size: var(--mp-font-size-base);
}

.mnw-item__data {
	font-size: var(--mp-font-size-sm);
	color: var(--mp-color-text-muted);
	white-space: nowrap;
}

/* Selo de estado inline (ex.: "Já joguei" em Jogos) — usado por seções com
 * mostrar_estado_inline em vez de riscar/caixas separadas: é só um rótulo
 * discreto, não uma etiqueta de categoria (cor fixa, não hash por nome). */
.mnw-item__estado {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--mnw-color-primary);
	background: color-mix(in srgb, var(--mnw-color-primary) 10%, white);
	border-radius: var(--mp-radius-sm);
	padding: 1px 6px;
	white-space: nowrap;
}

.mnw-item__meta {
	margin: 2px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mp-space-2);
	font-size: var(--mp-font-size-sm);
	color: var(--mp-color-text-muted);
}

.mnw-item__nota {
	font-weight: 600;
	color: var(--mp-color-accent);
}

.mnw-item__texto {
	margin: var(--mp-space-1) 0 0;
	font-size: var(--mp-font-size-sm);
	color: var(--mp-color-text);
}

.mnw-item__texto p {
	margin: 0 0 var(--mp-space-1);
}

/* Categorias livres (mnw_categoria) exibidas como etiquetas pequenas. */
.mnw-item__categorias {
	margin: var(--mp-space-1) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mp-space-1);
}

/* Cor própria por categoria: --mnw-pill-color é definido inline por item
 * (ver Meu_Now_CPT::cor_categoria_valor()) — a cor escolhida manualmente em
 * Meu Now → Categorias, ou um fallback determinístico a partir do nome
 * quando o usuário não escolheu nenhuma. O `#6b7280` aqui é só uma segunda
 * rede de segurança caso a variável não chegue a ser impressa. */
.mnw-pill {
	display: inline-block;
	padding: 1px 8px;
	border-radius: var(--mp-radius-lg);
	background: color-mix(in srgb, var(--mnw-pill-color, #6b7280) 15%, white);
	border: 1px solid color-mix(in srgb, var(--mnw-pill-color, #6b7280) 40%, white);
	font-size: 0.8125rem;
	color: color-mix(in srgb, var(--mnw-pill-color, #6b7280) 70%, black);
}

.mnw-item__links {
	margin: var(--mp-space-1) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--mp-space-3);
}

.mnw-item__links a {
	min-height: 32px;
	display: inline-flex;
	align-items: center;
	color: var(--mnw-color-primary);
	text-decoration: none;
	font-size: var(--mp-font-size-sm);
}

.mnw-item__links a:hover,
.mnw-item__links a:focus {
	text-decoration: underline;
}

/* Modo drill-down (lista única de uma seção expandida via "+ ver mais"). */
.mnw-voltar {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-bottom: var(--mp-space-2);
	color: var(--mnw-color-primary);
	text-decoration: none;
	font-size: var(--mp-font-size-sm);
}

.mnw-voltar:hover,
.mnw-voltar:focus {
	text-decoration: underline;
}

.mnw-lista-unica__titulo {
	margin: 0 0 var(--mp-space-3);
	font-size: var(--mp-font-size-lg);
}

.mnw-vazio {
	color: var(--mp-color-text-muted);
	text-align: center;
	padding: var(--mp-space-5) 0;
}

/* Paginação (drill-down). */
.mnw-paginacao {
	display: flex;
	flex-wrap: wrap;
	gap: var(--mp-space-2);
	margin-top: var(--mp-space-4);
}

.mnw-paginacao a,
.mnw-paginacao span {
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--mp-color-border);
	border-radius: var(--mnw-radius);
	padding: 0 var(--mp-space-2);
	text-decoration: none;
	color: var(--mp-color-text);
}

.mnw-paginacao .current {
	background: var(--mnw-color-primary);
	border-color: var(--mnw-color-primary);
	color: #fff;
}