/*
 * A página de avaliar.
 *
 * Quase tudo aqui já existe: a folha `reivindicar.css` carrega junto e traz a
 * mobília de formulário (`.fld`, `.hp`, `.notice`, `.card`). Este arquivo tem
 * só o que é desta tela - as estrelas clicáveis e a citação da confirmação.
 *
 * AS ESTRELAS SÃO RÁDIOS, e o truque inteiro está em duas linhas: a ordem no
 * HTML é 5 → 1, porque `:checked ~ label` só alcança os irmãos SEGUINTES, e o
 * `row-reverse` devolve a ordem visual. Sem JavaScript nenhum.
 */

/*
 * A raiz do formulário de avaliação.
 *
 * A mobília - `.fld`, `.cl-hp`, os botões - vem do `reivindicar.css`, que esta
 * página carrega junto. Esta classe existe para o que é só daqui: as estrelas
 * abaixo se apoiam nela, e um seletor precisa de uma raiz que o CSS conheça.
 */
.av-form{margin:0}

.av-stars-set{border:0;margin:0 0 20px;padding:0}

.av-stars-set legend{padding:0;margin:0 0 8px;font-weight:600}

/* row-reverse: ver o comentário do topo. A ordem do HTML é 5 -> 1. */
.av-stars{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:4px}

/*
 * O rádio some da vista, NUNCA do teclado.
 *
 * `display:none` o tiraria da ordem de tabulação e da árvore de acessibilidade,
 * e aí a nota vira um campo que só existe para quem usa mouse. Ele fica de
 * tamanho zero, e quem desenha o estado é o rótulo ao lado.
 */
.av-stars input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.av-stars label{cursor:pointer;line-height:0;padding:2px;border-radius:var(--r-xs);
  color:var(--line-2);transition:color .12s ease,transform .12s ease}
.av-stars label svg{width:34px;height:34px;fill:currentColor;stroke:none}

/* A marcada e todas à esquerda dela, que no HTML são as seguintes. */
.av-stars input:checked ~ label,
.av-stars label:hover,
.av-stars label:hover ~ label{color:var(--coral)}

.av-stars label:hover{transform:scale(1.06)}

/*
 * O foco do teclado tem que aparecer no RÓTULO, porque o rádio é invisível.
 *
 * Sem isto, quem navega por tabulação atravessa cinco estrelas sem nenhum sinal
 * de onde está - o campo obrigatório mais importante do formulário fica
 * invisível para o teclado.
 */
.av-stars input:focus-visible + label{outline:3px solid var(--azul);outline-offset:2px}

/*
 * The quick tags (2026-10-01). Checkboxes styled as the shared `.chip`; the
 * box stays focusable (same trick as the stars) and the label draws the state.
 * Designed at 390 px: chips wrap, each one at least 44 px tall for the thumb.
 */
.av-tags{border:0;margin:0 0 20px;padding:0}
.av-tags legend{padding:0;margin:0 0 10px;font-weight:600}
.av-tags legend small{display:block;margin-top:2px;font-weight:400;font-size:13px;color:var(--muted)}
.av-tag-list{display:flex;flex-wrap:wrap;gap:8px}
.av-tag-list input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.av-tag-list .chip{min-height:44px;padding:9px 15px;font-size:14.5px;cursor:pointer;user-select:none}
.av-tag-list .chip svg{display:none}
.av-tag-list .chip:hover{border-color:var(--petrol);background:var(--petrol-wash)}
.av-tag-list input:checked + .chip{background:var(--petrol);border-color:var(--petrol);color:#fff}
.av-tag-list input:checked + .chip svg{display:block;color:#fff}
.av-tag-list input:focus-visible + .chip{outline:3px solid var(--azul);outline-offset:2px}
.av-tag-list input:disabled + .chip{opacity:.45;cursor:not-allowed}
.av-tag-list input:disabled + .chip:hover{border-color:var(--line);background:var(--card)}

/* A citação do que foi escrito, na tela de confirmar. */
.av-preview{margin:14px 0 18px;padding:14px 16px;border-left:3px solid var(--petrol);
  background:var(--bg-2);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:15px;line-height:1.65;color:var(--ink)}

.av-consent{margin:18px 0 16px;font-size:13px;line-height:1.6;color:var(--muted)}

@media (max-width:560px){
  /* Alvo de toque: 34px de ícone mais o padding não chega aos 44px do dedo. */
  .av-stars label{padding:6px}
  .av-stars label svg{width:32px;height:32px}
}

/*
 * A nota de letra miúda das telas de confirmar e de pronto.
 *
 * Ela existia como `.pn-note`, que mora em painel.css - folha que esta página
 * NÃO carrega, porque o painel é área de membro e esta página é pública. As
 * duas frases saíam no tamanho do corpo e sem o cinza, competindo com o texto
 * que importa. Carregar painel.css inteiro aqui resolveria a cor e traria
 * junto o resto do painel; uma linha resolve só o que é preciso.
 */
.rv-note{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}