/*
 * Casca das páginas de mapa: o hub da raiz e o mapa de cada protótipo.
 *
 * Saiu do <style> inline de file-builder/mapa.html quando o segundo protótipo
 * apareceu — as duas páginas usam as mesmas peças, e um mapa novo não deveria
 * começar copiando CSS de outro.
 *
 * Não é a casca do produto: telas de protótipo usam shell.css. Aqui é só a
 * página que lista as telas.
 */

.map {
	max-width: 1100px;
	margin: 0 auto;
	padding: var(--benup-semantic-spacing-general-8xl) var(--benup-semantic-spacing-general-4xl);
	display: flex;
	flex-direction: column;
	gap: var(--benup-semantic-spacing-general-6xl);
}

.map-title {
	font-family: var(--benup-primitive-type-family-serif);
	font-size: var(--benup-styles-fontsize-9);
	font-weight: 700;
	line-height: 1.1;
	color: var(--benup-semantic-color-text-neutral-primary);
}

.block {
	display: flex;
	gap: var(--benup-semantic-spacing-general-xl);
	padding: var(--benup-semantic-spacing-general-xl);
	border: 1px solid var(--benup-semantic-color-border-neutral-primary);
	border-radius: var(--benup-semantic-spacing-radius-2xl);
	background: var(--benup-semantic-color-background-neutral-primary);
}

.block--todo {
	background: var(--benup-semantic-color-background-neutral-secondary);
	border-style: dashed;
}

.block-index {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: var(--benup-semantic-spacing-radius-full);
	background: var(--benup-semantic-color-background-brand-tertiary);
	color: var(--benup-semantic-color-text-brand-inverse);
	font-size: var(--benup-styles-fontsize-2);
	font-weight: 700;
}

.block--todo .block-index {
	background: var(--benup-semantic-color-background-neutral-tertiary);
	color: var(--benup-semantic-color-text-neutral-tertiary);
}

.block-body {
	display: flex;
	flex-direction: column;
	gap: var(--benup-semantic-spacing-general-md);
	flex: 1;
}

.block-title {
	color: var(--benup-semantic-color-text-neutral-primary);
}

/* O badge de estado na ponta do bloco é uma pílula: sem isso ele esticava na
   altura do bloco inteiro, porque .block é flex e o padrão é stretch. */
.block > .badge {
	align-self: flex-start;
}

.screens {
	display: flex;
	flex-wrap: wrap;
	gap: var(--benup-semantic-spacing-general-md);
}

.screen-link {
	display: inline-flex;
	align-items: center;
	gap: var(--benup-semantic-spacing-general-sm);
	padding: var(--benup-semantic-spacing-general-sm) var(--benup-semantic-spacing-general-lg);
	border: 1px solid var(--benup-semantic-color-border-neutral-secondary);
	border-radius: var(--benup-semantic-spacing-radius-full);
	text-decoration: none;
	color: var(--benup-semantic-color-text-neutral-primary);
	font-size: var(--benup-styles-fontsize-2);
}

.screen-link:hover {
	background: var(--benup-semantic-color-background-neutral-secondary);
}

.arrow {
	display: flex;
	justify-content: center;
	color: var(--benup-semantic-color-icon-neutral-tertiary);
}

/* ------------------------------------------------------------------- o hub */
/* Cada protótipo do repo é um cartão grande na raiz. */

.proto-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: var(--benup-semantic-spacing-general-2xl);
}

.proto-card {
	display: flex;
	flex-direction: column;
	gap: var(--benup-semantic-spacing-general-md);
	padding: var(--benup-semantic-spacing-general-3xl);
	border: 1px solid var(--benup-semantic-color-border-neutral-primary);
	border-radius: var(--benup-semantic-spacing-radius-3xl);
	background: var(--benup-semantic-color-background-neutral-primary);
	text-decoration: none;
	color: inherit;
}

.proto-card:hover {
	border-color: var(--benup-semantic-color-border-neutral-secondary);
	background: var(--benup-semantic-color-background-neutral-secondary);
}

.proto-card-head {
	display: flex;
	align-items: center;
	gap: var(--benup-semantic-spacing-general-md);
}

.proto-card-title {
	color: var(--benup-semantic-color-text-neutral-primary);
}

.proto-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--benup-semantic-spacing-general-sm);
	margin-top: auto;
	padding-top: var(--benup-semantic-spacing-general-md);
}

/* ---------------------------------------------- diagrama macro (fluxo feliz) */
/*
 * O fluxograma que vai no topo de um mapa, antes da lista de blocos. A lista
 * garante completude (todas as telas, com estado e premissas); o fluxo dá a
 * leitura em ordem — o caminho feliz, uma tela levando à próxima, cada nó um
 * link navegável.
 *
 * É HTML/CSS no idioma do repo, não imagem: sem build, sem script novo, e cada
 * nó abre a tela de verdade. Ramificação sai da linha principal com .flow-fork.
 */

.flow {
	display: flex;
	flex-direction: column;
	gap: var(--benup-semantic-spacing-general-lg);
	padding: var(--benup-semantic-spacing-general-3xl);
	border: 1px solid var(--benup-semantic-color-border-neutral-primary);
	border-radius: var(--benup-semantic-spacing-radius-3xl);
	background: var(--benup-semantic-color-background-neutral-secondary);
	overflow-x: auto;
}

.flow-title {
	display: flex;
	align-items: center;
	gap: var(--benup-semantic-spacing-general-sm);
	color: var(--benup-semantic-color-text-neutral-secondary);
}

/* A fileira de nós. Quebra em telas estreitas; a seta some na quebra e vira o
   respiro vertical do wrap. */
.flow-row {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: var(--benup-semantic-spacing-general-sm);
}

.flow-node {
	display: flex;
	flex-direction: column;
	gap: var(--benup-semantic-spacing-general-xxs);
	min-width: 148px;
	max-width: 200px;
	padding: var(--benup-semantic-spacing-general-md) var(--benup-semantic-spacing-general-lg);
	border: 1px solid var(--benup-semantic-color-border-neutral-secondary);
	border-radius: var(--benup-semantic-spacing-radius-xl);
	background: var(--benup-semantic-color-background-neutral-primary);
	text-decoration: none;
	color: inherit;
}

.flow-node:hover {
	border-color: var(--benup-semantic-color-border-brand-primary);
	background: var(--benup-semantic-color-background-neutral-secondary);
}

.flow-node-step {
	color: var(--benup-semantic-color-text-neutral-tertiary);
}

.flow-node-label {
	color: var(--benup-semantic-color-text-neutral-primary);
}

/* Conector entre nós. Centralizado na altura dos cards. */
.flow-arrow {
	display: flex;
	align-items: center;
	color: var(--benup-semantic-color-icon-neutral-tertiary);
	flex: none;
}

/* Ramificação: uma segunda fileira, recuada, com rótulo do que a abre. */
.flow-fork {
	display: flex;
	flex-direction: column;
	gap: var(--benup-semantic-spacing-general-sm);
	padding-left: var(--benup-semantic-spacing-general-3xl);
	border-left: 2px dashed var(--benup-semantic-color-border-neutral-secondary);
	margin-left: var(--benup-semantic-spacing-general-lg);
}

.flow-fork-label {
	color: var(--benup-semantic-color-text-neutral-secondary);
}

/* Nó terminal/pendente: tracejado, sem link. */
.flow-node--todo {
	border-style: dashed;
	background: transparent;
	color: var(--benup-semantic-color-text-neutral-tertiary);
}