/* avaliacao.css — a revisão por pares (avaliacao-ui.js).
 *
 * Arquivo à parte pelo mesmo motivo do módulo: o style.css é ponto de encontro de
 * várias sessões. Só tokens do tema (DESIGN-SPEC §3): nenhuma cor nova. Texto
 * sobre --accent-soft medido: 14:1 no Fichário, 8,6:1 no Âmbar. Cantos retos
 * (decisão 21), alvos de 44px, leitura em 65ch. */

.av-estudio {
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  display: grid;
  gap: 8px;
}
.av-estudio > h3 { margin: 0; }

.av-confirmacao {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 2px solid var(--line-strong);
  background: var(--surface-2);
}
.av-confirmacao p { margin: 0; }

.av-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.av-status:empty { display: none; }
.av-status { margin: 0; }
.av-status[data-tipo="erro"],
[data-tipo="erro"] { color: var(--ink-strong); font-weight: 600; }
.av-status[data-tipo="erro"]::before { content: '⚠ '; }

.av-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.av-comentario {
  border: 1px solid var(--line-ui);
  background: var(--surface);
  padding: 8px 12px;
  display: grid;
  gap: 4px;
}
.av-comentario p { margin: 0; }
.av-comentario[data-estado="aberto"] { border-left: 4px solid var(--line-strong); }
.av-comentario[data-estado="resolvido"],
.av-comentario[data-estado="descartado"] { border-left: 4px dotted var(--line-ui); }

.av-trecho {
  margin: 0;
  padding: 4px 8px;
  border-left: 3px solid var(--line-strong);
  background: var(--accent-soft);
  color: var(--ink);
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: var(--t-sm);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.av-estado {
  text-transform: lowercase;
  font-weight: 600;
  color: var(--ink-strong);
}

.av-justificativa-bloco { display: grid; gap: 4px; margin-top: 4px; }

.av-comentario textarea,
.av-comentar textarea,
.av-justificativa-bloco textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 88px;
  padding: 8px;
  border: 1px solid var(--line-ui);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink-strong);
  font: inherit;
  font-size: var(--t-base);
}

/* --- página /avaliacao ---------------------------------------------------- */

.av-cartoes { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.av-cartao {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  padding: 12px 16px;
}
.av-cartao a { display: inline-block; min-height: 44px; line-height: 44px; }
.av-cartao p { margin: 0; }

.av-aviso { padding: 16px; display: grid; gap: 8px; }

.av-detalhe {
  display: grid;
  grid-template-columns: minmax(0, 65ch) minmax(280px, 1fr);
  gap: 24px;
  align-items: start;
  margin-top: 16px;
}

.av-texto {
  padding: 24px 32px;
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-size: var(--t-base);
  line-height: 1.7;
  color: var(--ink);
  max-width: 65ch;
  overflow-wrap: anywhere;
}
.av-bloco { margin: 0 0 16px; }
.av-bloco-h2 { font-size: var(--t-xl); line-height: 1.15; margin-top: 24px; }
.av-bloco-h3 { font-size: var(--t-lg); line-height: 1.15; margin-top: 16px; }
.av-bloco-blockquote { margin-left: 32px; padding-left: 12px; border-left: 3px solid var(--line-strong); }

.av-marca {
  background: var(--accent-soft);
  color: var(--ink-strong);
  box-shadow: inset 0 -2px 0 var(--line-strong);
  cursor: pointer;
}
.av-marca-fechada {
  background: transparent;
  color: inherit;
  box-shadow: none;
  text-decoration: underline dotted var(--ink-dim);
  text-underline-offset: 3px;
}
.av-marca-foco,
.av-marca:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.av-lateral {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding-right: 4px;
}
.av-comentar { padding: 12px; display: grid; gap: 8px; }
.av-comentar form { display: grid; gap: 8px; }
.av-comentar p { margin: 0; }

.av-filtros { display: flex; flex-wrap: wrap; gap: 4px; }

.av-comentario-abrir {
  all: unset;
  display: block;
  min-height: 44px;
  cursor: pointer;
  box-sizing: border-box;
}
.av-comentario-abrir:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.av-comentario-abrir .av-trecho { display: block; }

.av-comentario-corpo { display: grid; gap: 8px; margin-top: 4px; }
.av-conversa { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.av-mensagem { border-top: 1px solid var(--line); padding-top: 8px; }
.av-mensagem-texto { font-size: var(--t-sm); line-height: 1.6; overflow-wrap: anywhere; }
.av-mensagem-texto p { margin: 0 0 8px; }
.av-mensagem-texto blockquote {
  margin: 0 0 8px;
  padding: 4px 8px;
  border-left: 3px solid var(--line-strong);
  background: var(--accent-soft);
}
.av-responder { display: grid; gap: 8px; }

.av-resumo { margin-top: 16px; display: grid; gap: 8px; padding: 12px 16px; }
.av-resumo .av-cartoes { margin: 0; }

/* Destaque no editor do Estúdio, sem tocar o texto (CSS Custom Highlight API). */
::highlight(av-trecho) {
  background-color: var(--accent-soft);
  color: var(--ink-strong);
}
::highlight(av-trecho-foco) {
  background-color: var(--line-strong);
  color: var(--surface);
}

@media (max-width: 900px) {
  .av-detalhe { grid-template-columns: minmax(0, 1fr); }
  .av-lateral { position: static; max-height: none; overflow: visible; }
  .av-texto { padding: 16px; }
}