/* ==========================================================================
   A8 · Mensagem
   Hierarquia obrigatória: o que aconteceu → por quê → o que fazer.
   Só depois vêm autenticação, trajeto e o conteúdo, fechado atrás do motivo.
   ========================================================================== */

.a8__cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 32rem; margin-bottom: 22rem; }
.mobile .a8__cabeca { flex-direction: column; gap: 18rem; }
.a8__titulo { font-weight: 800; font-size: 24rem; letter-spacing: -.025em; line-height: 1.2; margin-bottom: 8rem; text-wrap: pretty; }
.a8__sub { font-size: 14rem; color: var(--ink-2); max-width: 720rem; line-height: 1.6; }

.a8__campos { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 22rem; }
.tablet .a8__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mobile:not(.tablet) .a8__campos { grid-template-columns: minmax(0, 1fr); }
.a8__campo { padding: 12rem 16rem; }
.a8__campo .rotulo { font-size: 9rem; letter-spacing: .12em; }
.a8__campo > div:last-child { margin-top: 6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.a8__codigo {
  display: flex;
  align-items: flex-start;
  gap: 10rem;
  padding: 12rem 14rem;
  background: var(--bg);
  border: 1rem solid var(--line);
}
.a8__codigo pre {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11rem;
  line-height: 1.6;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
}

.a8__lado { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16rem; align-items: start; margin-bottom: 22rem; display: grid; }
.mobile .a8__lado { grid-template-columns: minmax(0, 1fr); }

.a8__trajeto-linha { display: grid; grid-template-columns: 88rem 12rem minmax(0, 1fr); gap: 14rem; padding: 14rem 20rem; align-items: start; border-bottom: 1rem solid var(--line-3); }
.a8__trajeto-linha:last-child { border-bottom: 0; }
.a8__trajeto-ponto { width: 9rem; height: 9rem; margin-top: 4rem; }

.a8__conteudo-texto {
  background: var(--bg);
  border: 1rem solid var(--line);
  padding: 20rem 22rem;
  max-width: 760rem;
  display: flex;
  flex-direction: column;
  gap: 14rem;
}
.a8__conteudo-texto p { font-size: 14rem; color: var(--ink-2); line-height: 1.7; }
.a8__anexo {
  display: flex;
  align-items: center;
  gap: 12rem;
  flex-wrap: wrap;
  margin-top: 12rem;
  padding: 10rem 14rem;
  border: 1rem solid var(--line);
  background: var(--bg);
}