/* Formulario de briefing. Paleta e tipografia saem de tokens.css. */

.briefing { padding-block: calc(var(--passo) * 8); }

.briefing__intro,
.briefing__depois { color: var(--corpo); max-width: 62ch; }

.briefing__aviso {
  color: var(--tinta-fraca);
  font-size: 0.75rem;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  margin-block: calc(var(--passo) * 2);
}

.briefing__tipos {
  border: 0; padding: 0; margin-block: calc(var(--passo) * 3);
  display: flex; flex-wrap: wrap; gap: var(--passo);
}

.briefing__legenda {
  color: var(--tinta-fraca); font-size: 0.75rem;
  letter-spacing: var(--tracking-mono); text-transform: uppercase;
  margin-bottom: var(--passo);
}

.briefing__tipo {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: calc(var(--passo) * 2);
  border: 1px solid var(--linha); color: var(--corpo); cursor: pointer;
}

.briefing__tipo:focus-within {
  outline: 2px solid var(--acento-legivel); outline-offset: 2px;
}

.briefing__tipo:has(input:checked) {
  border-color: var(--acento-legivel); color: var(--tinta);
}

.briefing__tipo input {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
}

.briefing__campo { margin-block: calc(var(--passo) * 3); max-width: 62ch; }

.briefing__rotulo {
  display: block; color: var(--tinta); margin-bottom: var(--passo);
}

.briefing__n {
  color: var(--acento-legivel); font-family: var(--fonte-mono);
  letter-spacing: var(--tracking-mono); margin-right: var(--passo);
}

.briefing__texto {
  width: 100%; min-height: 44px; padding: var(--passo);
  background: transparent; color: var(--tinta);
  border: 1px solid var(--linha); border-radius: var(--raio);
  font: inherit; resize: vertical;
}

.briefing__texto:focus {
  outline: 2px solid var(--acento-legivel); outline-offset: 2px;
}

.briefing__acoes { margin-top: calc(var(--passo) * 4); }

/* O convite ao briefing, na secao Conversa. */
.conversa__briefing {
  color: var(--corpo); max-width: 42ch;
  margin-top: calc(var(--passo) * 2);
}