/* ==========================================================================
   FNC — CSS adiado (carregado após o primeiro paint)
   Componentes abaixo da dobra: listagens, prose, blog, portfólio, mapa,
   timeline, terminal e easter egg. O crítico vive em critical.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   07b. Componentes (tags, cards, métricas, marginalia, timestamps)
   -------------------------------------------------------------------------- */

/* Tag de stack: mono minúsculo, como digitado num terminal. */
.tag {
	display: inline-block;
	font-family: var(--mono);
	font-size: var(--fs-pp);
	text-transform: lowercase;
	color: var(--tinta-suave);
	border: 1px solid var(--linha);
	border-radius: var(--raio-s);
	padding: 0.2em 0.6em;
	text-decoration: none;
	transition: border-color var(--t-rapida), color var(--t-rapida);
}

a.tag:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* Card base: borda fina, sem sombra decorativa. Hover escurece a borda. */
.card {
	display: block;
	background: var(--bg-elevado);
	border: 1px solid var(--linha);
	border-radius: var(--raio-m);
	padding: var(--sp-5);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--t-media);
}

.card:hover,
.card:focus-within {
	border-color: var(--linha-forte);
}

/* Métrica em destaque tipográfico: número grande serifado + label mono. */
.metrica {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
}

.metrica__valor {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--accent);
	font-variant-numeric: tabular-nums;
}

.metrica__label {
	font-family: var(--mono);
	font-size: var(--fs-pp);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--tinta-suave);
}

/* Marginalia: anotação técnica do autor, em mono, com filete no accent. */
.marginalia {
	font-family: var(--mono);
	font-size: var(--fs-p);
	line-height: 1.6;
	color: var(--tinta-suave);
	border-left: 2px solid var(--accent);
	padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
	margin: var(--sp-5) 0;
}

.marginalia::before {
	content: '// nota de engenharia';
	display: block;
	font-size: var(--fs-pp);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--accent);
	margin-bottom: var(--sp-2);
}

/* Timestamps reais: publicado/atualizado, sempre em mono. */
.timestamp {
	font-family: var(--mono);
	font-size: var(--fs-pp);
	color: var(--tinta-suave);
	letter-spacing: 0.02em;
}

.timestamp time {
	color: var(--tinta);
}

/* --------------------------------------------------------------------------
   09. Listagens
   -------------------------------------------------------------------------- */

.lista-posts {
	display: grid;
	gap: 0;
}

.post-card {
	border-top: 1px solid var(--linha);
	padding-block: var(--sp-5);
}

.post-card:last-child {
	border-bottom: 1px solid var(--linha);
}

/* Na listagem, a data é coadjuvante: uniforme em tinta suave e movida
   para o fim do card — o título abre o bloco de texto. */
.post-card,
.post-card__texto {
	display: flex;
	flex-direction: column;
}

.post-card .timestamp {
	order: 10;
	margin-top: var(--sp-2);
}

.post-card .timestamp time,
.destaque-post .timestamp time {
	color: inherit;
}

.post-card h2,
.post-card h3 {
	margin-top: 0;
}

.post-card h2 {
	font-size: var(--fs-3);
	margin: var(--sp-2) 0;
}

.post-card p {
	color: var(--tinta-suave);
	margin: 0;
	max-width: 60ch;
}

/* --------------------------------------------------------------------------
   10. Prose — conteúdo editorial (refinado na Etapa 3)
   -------------------------------------------------------------------------- */

.prose {
	max-width: var(--w-prose);
}

.prose h2,
.prose h3 {
	margin-top: var(--sp-6);
}

.prose code {
	font-family: var(--mono);
	font-size: 0.875em;
	background: var(--bg-recuo);
	border: 1px solid var(--linha-tenue);
	border-radius: var(--raio-s);
	padding: 0.1em 0.35em;
}

.prose pre {
	background: var(--bg-recuo);
	border: 1px solid var(--linha);
	border-radius: var(--raio-m);
	padding: var(--sp-4);
	overflow-x: auto;
}

.prose pre code {
	background: none;
	border: 0;
	padding: 0;
}

.prose blockquote {
	font-family: var(--serif);
	font-size: var(--fs-lead);
	border-left: 2px solid var(--linha-forte);
	margin: var(--sp-5) 0;
	padding-left: var(--sp-4);
}

.prose img {
	border-radius: var(--raio-m);
}

/* Conteúdo largo rola dentro do próprio bloco — a página nunca estoura. */
.prose table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

/* --------------------------------------------------------------------------
   13. Blog: destaque, chips de categoria e artigo
   -------------------------------------------------------------------------- */

.destaque-post {
	background: var(--bg-elevado);
	border: 1px solid var(--linha);
	border-radius: var(--raio-m);
	padding: var(--sp-5);
	margin: var(--sp-5) 0 var(--sp-6);
}

/* Destaque com imagem destacada: texto + retrato lado a lado. */
.destaque-post--com-imagem {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-5);
	align-items: center;
}

@media (min-width: 700px) {
	.destaque-post--com-imagem {
		grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
	}
}

@media (max-width: 699px) {
	.destaque-post--com-imagem .destaque-post__imagem {
		order: -1;
	}
}

.destaque-post__imagem img {
	width: 100%;
	height: auto;
	aspect-ratio: 8 / 5;
	object-fit: cover;
	border-radius: var(--raio-s);
	border: 1px solid var(--linha);
}

/* Card de listagem com imagem: miniatura à direita. */
.post-card--com-imagem {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 180px;
	gap: var(--sp-5);
	align-items: center;
}

/* No mobile, a imagem assume o topo do card em largura total — padrão
   de app de conteúdo; a miniatura lateral fica para o desktop. */
@media (max-width: 600px) {
	.post-card--com-imagem {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-3);
	}

	.post-card--com-imagem .post-card__imagem {
		order: -1;
	}
}

.post-card__imagem img {
	width: 100%;
	height: auto;
	aspect-ratio: 8 / 5;
	object-fit: cover;
	border-radius: var(--raio-s);
	border: 1px solid var(--linha);
}

.destaque-post h2 {
	font-size: var(--fs-1);
	margin: var(--sp-2) 0;
}

.destaque-post__resumo {
	color: var(--tinta-suave);
	max-width: 65ch;
}

.chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-5);
	padding: 0;
}

/* No mobile, a fileira de chips desliza na horizontal (padrão de app),
   sangrando até as bordas da tela e sem barra de rolagem visível. */
@media (max-width: 600px) {
	.chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
	}

	.chips::-webkit-scrollbar {
		display: none;
	}

	.chip {
		flex: none;
		white-space: nowrap;
	}
}

.chip {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	font-family: var(--mono);
	font-size: var(--fs-pp);
	text-transform: lowercase;
	color: var(--tinta-suave);
	background: transparent;
	border: 1px solid var(--linha);
	border-radius: var(--raio-s);
	padding: 0.2em 0.7em;
	text-decoration: none;
	cursor: pointer;
	transition: border-color var(--t-rapida), color var(--t-rapida);
}

.chip:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.chip[aria-pressed='true'] {
	border-color: var(--accent);
	color: var(--accent);
}

.chips--meta {
	margin-bottom: var(--sp-3);
}

.lista-posts[aria-busy='true'] {
	opacity: 0.5;
}

/* Artigo: rail de compartilhamento à esquerda no desktop largo. */
.post-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.post-conteudo {
	max-width: var(--w-prose);
}

@media (min-width: 1100px) {
	.post-grid {
		grid-template-columns: 48px minmax(0, var(--w-prose));
		justify-content: center;
		column-gap: var(--sp-6);
	}
}

.compartilhar--rail {
	display: none;
}

@media (min-width: 1100px) {
	.compartilhar--rail {
		display: flex;
		flex-direction: column;
		gap: var(--sp-2);
		position: sticky;
		top: var(--sp-6);
	}

	.compartilhar-col {
		align-self: start;
	}

	.compartilhar--fim {
		display: none;
	}
}

.compartilhar--fim {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--linha);
}

@media (min-width: 1100px) {
	.compartilhar--fim {
		display: none;
	}
}

.btn-share {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--sp-2);
	border: 1px solid var(--linha);
	border-radius: var(--raio-s);
	background: transparent;
	color: var(--tinta-suave);
	cursor: pointer;
	text-decoration: none;
	font-family: var(--sans);
	font-size: var(--fs-p);
	font-weight: 600;
	transition: border-color var(--t-rapida), color var(--t-rapida);
}

.btn-share svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.btn-share:hover {
	border-color: var(--accent);
	color: var(--accent);
}

/* WhatsApp primeiro e maior no fim do conteúdo. */
.compartilhar--fim .btn-share--whatsapp {
	background: var(--accent-vivo);
	border-color: transparent;
	color: #0b0e10;
	padding-inline: var(--sp-4);
}

.compartilhar--fim .btn-share--whatsapp:hover {
	filter: brightness(1.07);
	color: #0b0e10;
}

.btn-share--copiar.copiado {
	border-color: var(--accent);
	color: var(--accent);
}

.btn-share__feedback {
	font-family: var(--mono);
	font-size: var(--fs-pp);
}

.btn-share__feedback:empty {
	display: none;
}

/* Author box (E-E-A-T) ao fim de cada post. */
.autor-box {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	background: var(--bg-elevado);
	border: 1px solid var(--linha);
	border-radius: var(--raio-m);
	padding: var(--sp-5);
	margin-top: var(--sp-6);
}

.autor-box__foto,
.autor-box__iniciais {
	width: 80px;
	height: 80px;
	border-radius: var(--raio-m);
	flex: none;
	object-fit: cover;
}

/* Placeholder tipográfico: iniciais serifadas sobre grafite, borda no
   accent — identidade fixa nos dois temas (como o terminal). */
.autor-box__iniciais {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--serif);
	font-weight: 600;
	font-size: 1.75rem;
	letter-spacing: 0.02em;
	background: #111417;
	color: #e8e6e1;
	border: 1px solid var(--accent-vivo);
}

.autor-box__nome {
	font-family: var(--serif);
	font-weight: 600;
	font-size: var(--fs-3);
	margin: 0 0 var(--sp-1);
}

.autor-box__bio {
	color: var(--tinta-suave);
	font-size: var(--fs-p);
	margin: 0 0 var(--sp-2);
	max-width: 55ch;
}

.autor-box__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin: 0;
}

/* Estilo de bloco "Nota de engenharia" (citação em marginalia). */
.prose .is-style-marginalia {
	font-family: var(--mono);
	font-size: var(--fs-p);
	font-style: normal;
	line-height: 1.6;
	color: var(--tinta-suave);
	border-left: 2px solid var(--accent);
	padding: var(--sp-2) 0 var(--sp-2) var(--sp-4);
	margin: var(--sp-5) 0;
}

.prose .is-style-marginalia::before {
	content: '// nota de engenharia';
	display: block;
	font-size: var(--fs-pp);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--accent);
	margin-bottom: var(--sp-2);
}

.prose .is-style-marginalia p {
	margin: 0 0 var(--sp-2);
}

.prose .is-style-marginalia p:last-child {
	margin: 0;
}

/* Blocos de detalhes (FAQ) no prose. */
.prose details {
	border: 1px solid var(--linha);
	border-radius: var(--raio-s);
	padding: var(--sp-3) var(--sp-4);
	margin: 0 0 var(--sp-3);
}

.prose summary {
	font-weight: 600;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
   14. Portfólio: cards, ficha do projeto e mapa do Brasil
   -------------------------------------------------------------------------- */

.card-projeto__stacks {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
}

/* Ficha do projeto: métrica grande + ação. */
.ficha-projeto {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	border: 1px solid var(--linha);
	border-radius: var(--raio-m);
	background: var(--bg-elevado);
	padding: var(--sp-5);
	margin-bottom: var(--sp-5);
}

.metrica__valor--grande {
	font-size: clamp(3rem, 2rem + 4vw, 4.5rem);
}

.marginalia--desafio::before {
	content: '// o desafio';
}

.pauta-projeto {
	margin-top: var(--sp-6);
}

/* Card de projeto relacionado no fim do artigo (deitado). */
.projeto-relacionado {
	margin-top: var(--sp-6);
}

.card-projeto--linha {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-5);
}

.card-projeto--linha .card-projeto__resumo {
	flex: 1;
	min-width: 200px;
}

.card-projeto--linha h3 {
	margin: 0 0 var(--sp-1);
}

.card-projeto--linha p {
	margin: 0;
	color: var(--tinta-suave);
}

/* Mapa do Brasil em pontos. */
.mapa-bloco {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-6);
	align-items: center;
	margin-top: var(--sp-7);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--linha);
}

@media (min-width: 820px) {
	.mapa-bloco {
		grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
	}
}

.mapa-bloco__texto p {
	color: var(--tinta-suave);
	max-width: 45ch;
}

.mapa-bloco__lista {
	list-style: none;
	margin: var(--sp-4) 0 0;
	padding: 0;
	display: grid;
	gap: var(--sp-1);
}

.mapa-bloco__lista a {
	color: var(--tinta-suave);
	text-decoration: none;
	transition: color var(--t-rapida);
}

.mapa-bloco__lista a:hover {
	color: var(--accent);
}

.mapa-bloco__uf {
	display: inline-block;
	min-width: 2.2em;
	color: var(--accent);
}

.mapa-brasil {
	width: 100%;
	height: auto;
	max-width: 420px;
	justify-self: center;
}

.mapa-brasil__ponto {
	fill: var(--linha-forte);
	opacity: 0.35;
}

.mapa-brasil__marcador {
	fill: var(--accent-vivo);
	transition: r var(--t-rapida);
	cursor: pointer;
}

.mapa-brasil a:hover .mapa-brasil__marcador,
.mapa-brasil a:focus .mapa-brasil__marcador {
	r: 11;
}

.mapa-brasil a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   15. Trajetória (timeline), 404 terminal e easter egg
   -------------------------------------------------------------------------- */

/* Competências: certificações em destaque tipográfico. */
.certificacoes {
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--linha);
}

.certificacoes__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--sp-4);
	margin-top: var(--sp-4);
}

.certificacao {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	background: var(--bg-elevado);
	border: 1px solid var(--linha);
	border-left: 3px solid var(--accent-vivo);
	border-radius: var(--raio-m);
	padding: var(--sp-5);
}

.certificacao__nome {
	font-family: var(--serif);
	font-weight: 600;
	font-size: var(--fs-2);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.certificacao__org {
	font-family: var(--mono);
	font-size: var(--fs-pp);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--accent);
}

.ferramentas {
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--linha);
}

.ferramentas__lista {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
}

/* Figuras editoriais: foto da trajetória e imagem destacada do post. */
.foto-trajetoria {
	margin: var(--sp-6) 0 0;
}

.foto-conteudo {
	margin: var(--sp-5) 0;
}

.foto-trajetoria img,
.foto-conteudo img {
	width: 100%;
	height: auto;
	border-radius: var(--raio-m);
	border: 1px solid var(--linha);
}

.foto-trajetoria figcaption,
.foto-conteudo figcaption {
	margin-top: var(--sp-2);
	font-size: var(--fs-pp);
	color: var(--tinta-suave);
}

/* Área da timeline: no desktop largo, coluna do ano gigante à esquerda. */
.trajetoria-area {
	margin-top: var(--sp-6);
}

@media (min-width: 1100px) {
	.trajetoria-area {
		display: grid;
		grid-template-columns: 220px minmax(0, var(--w-prose));
		justify-content: center;
		column-gap: var(--sp-7);
	}
}

/* Ano gigante flutuante: serifado, vazado, acompanha o marco ativo. */
.ano-flutuante {
	display: none;
}

@media (min-width: 1100px) {
	.ano-flutuante {
		display: block;
		position: sticky;
		top: 34vh;
		align-self: start;
		font-family: var(--serif);
		font-weight: 600;
		font-size: 6rem;
		line-height: 1;
		letter-spacing: -0.03em;
		color: transparent;
		-webkit-text-stroke: 1.5px var(--linha-forte);
		user-select: none;
		text-align: right;
	}

	.ano-flutuante--longo {
		font-size: 2.5rem;
		-webkit-text-stroke: 1px var(--linha-forte);
	}

	.ano-flutuante span {
		display: inline-block;
		transition: opacity var(--t-rapida), transform var(--t-rapida);
	}

	.ano-flutuante span.trocando {
		opacity: 0;
		transform: translateY(10px);
	}
}

.timeline {
	position: relative;
	margin-top: 0;
	padding-left: 40px;
}

/* Trilho e preenchimento por scroll (--progresso vem do trajetoria.js). */
.timeline::before,
.timeline::after {
	content: '';
	position: absolute;
	left: 5px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--linha);
}

.timeline::after {
	background: var(--accent-vivo);
	transform: scaleY(var(--progresso, 0));
	transform-origin: top;
}

.timeline__marco {
	position: relative;
	padding: var(--sp-3) 0;
}

.timeline__marco summary {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	cursor: pointer;
	list-style: none;
	min-height: 44px;
}

.timeline__marco summary::-webkit-details-marker {
	display: none;
}

/* Ponto no trilho: ancorado no marco (o summary fica estático), então
   não desce quando o details abre. */
.timeline__marco summary::before {
	content: '';
	position: absolute;
	left: -40px;
	top: calc(var(--sp-3) + 16px);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--bg);
	border: 2px solid var(--linha-forte);
	transition: border-color var(--t-rapida), background-color var(--t-rapida);
	z-index: 1;
}

.timeline__marco summary:hover::before {
	border-color: var(--accent-vivo);
}

.timeline__marco[open] summary::before {
	border-color: var(--accent-vivo);
	background: var(--accent-vivo);
}

/* Leitura guiada (só com JS): marco ativo acende, os demais esmaecem de
   leve — o holofote puxa o olho marco a marco. */
.timeline--js .timeline__marco {
	transition: opacity var(--t-media);
}

.timeline--js .timeline__marco.revelado:not(.timeline__marco--ativo) {
	opacity: 0.62;
}

.timeline__marco--ativo summary::before {
	border-color: var(--accent-vivo);
	background: var(--accent-vivo);
	box-shadow: 0 0 0 6px rgba(0, 196, 106, 0.16);
}

.timeline__marco--ativo .timeline__ano {
	color: var(--accent-vivo);
}

/* Revelação progressiva na entrada — só quando movimento é bem-vindo. */
@media (prefers-reduced-motion: no-preference) {
	.timeline--js .timeline__marco {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 420ms ease, transform 420ms ease;
	}

	.timeline--js .timeline__marco.revelado {
		opacity: 1;
		transform: none;
	}

	.timeline--js .timeline__marco.revelado:not(.timeline__marco--ativo) {
		opacity: 0.62;
	}
}

.timeline__ano {
	font-family: var(--mono);
	font-size: var(--fs-p);
	color: var(--accent);
	min-width: 5.5em; /* comporta períodos como "2014–2017" mantendo o alinhamento */
	flex: none;
}

.timeline__titulo {
	font-family: var(--serif);
	font-weight: 600;
	font-size: var(--fs-3);
	transition: color var(--t-rapida);
}

.timeline__marco summary:hover .timeline__titulo {
	color: var(--accent);
}

.timeline__detalhe {
	padding: var(--sp-2) 0 var(--sp-2) calc(5.5em + var(--sp-4));
	color: var(--tinta-suave);
	max-width: 55ch;
}

.timeline__detalhe p {
	margin: 0;
}

@media (max-width: 600px) {
	.timeline__marco summary {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--sp-1);
	}

	.timeline__detalhe {
		padding-left: 0;
	}
}

/* 404 e easter egg: janela de terminal (sempre escura, nos dois temas). */
.terminal {
	background: #0c0f11;
	color: #d6d3cd;
	border: 1px solid #262d34;
	border-radius: var(--raio-m);
	font-family: var(--mono);
	font-size: var(--fs-p);
	line-height: 1.9;
	padding: var(--sp-5);
}

.terminal p {
	margin: 0;
}

.terminal__luzes {
	display: flex;
	gap: 6px;
	margin-bottom: var(--sp-4);
}

.terminal__luzes span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #3a424a;
}

.terminal__prompt {
	color: var(--accent-vivo);
}

.terminal__erro {
	color: #ff6b6b;
}

.terminal__comentario {
	color: #7b838b;
	margin-top: var(--sp-3);
}

.terminal a {
	color: var(--accent-vivo);
	text-decoration-color: rgba(0, 196, 106, 0.4);
}

.terminal__form {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-4);
	border-top: 1px solid #262d34;
	padding-top: var(--sp-3);
}

.terminal__form input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	color: inherit;
	font: inherit;
	caret-color: var(--accent-vivo);
}

.terminal__form input:focus {
	outline: none;
}

.terminal__form:focus-within {
	border-top-color: var(--accent-vivo);
}

/* Painel do easter egg. */
.egg {
	position: fixed;
	right: var(--sp-4);
	bottom: calc(60px + env(safe-area-inset-bottom) + 88px);
	z-index: 80;
	width: min(360px, calc(100vw - 2rem));
	background: #0c0f11;
	color: #d6d3cd;
	border: 1px solid #262d34;
	border-radius: var(--raio-m);
	font-family: var(--mono);
	font-size: var(--fs-pp);
	line-height: 1.9;
	padding: var(--sp-4);
	box-shadow: 0 16px 40px rgba(8, 10, 12, 0.4);
}

@media (min-width: 769px) {
	.egg {
		bottom: calc(var(--sp-5) + 72px);
	}
}

.egg p {
	margin: 0;
}

.egg__topo {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #7b838b;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.6875rem;
	margin-bottom: var(--sp-2);
}

.egg__fechar {
	background: none;
	border: 0;
	color: inherit;
	font-size: 1.1rem;
	cursor: pointer;
	padding: 4px 8px;
}

.egg__fechar:hover {
	color: #d6d3cd;
}

.egg__pessoal {
	color: var(--accent-vivo);
}

.egg__dica {
	color: #7b838b;
}