/* EXPERIMENTO "vertical progressivo" do /feed/ (so com `?vertical_progressivo=1`).
   Carregado apenas nesse modo por `core/feed.html`. Prefixo `vp` para nao
   encostar no carrossel (`.fd__alt-*`), que continua sendo o padrao.
   Cores de acerto/erro sao as do carrossel: verde #1a7a4c, vinho #6f3438. */

.vp [hidden],
.vp[hidden],
.vp__abrir[hidden],
.vp__alt-corpo[hidden] { display: none !important; }

/* ---- Embaixo de cada alternativa ---- */

/* "Ver analise": linha inteira de toque (44px+), discreta, colada na
   alternativa a que pertence. So aparece depois de confirmar. */
.vp__abrir {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 8px 4px;
  border: 0;
  background: transparent;
  color: var(--tinta-2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.vp__abrir:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; border-radius: 8px; }
.vp__abrir svg {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .2s ease;
}
.vp__abrir[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Sem altura fixa e sem rolagem propria: o texto cresce e a pagina rola.
   Mesma marca lateral do carrossel (`.fd__alt-porque`), mais legivel. */
.vp__alt-corpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 8px;
  padding: 2px 0 4px 12px;
  border-left: 3px solid var(--linha);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--tinta-2);
  overflow-wrap: anywhere;
}
.vp__alt-corpo--correta { border-left-color: #1a7a4c; }
.vp__alt-corpo--incorreta { border-left-color: #d8b4b4; }
.vp__alt-corpo p { margin: 0; }
.vp__secao { display: flex; flex-direction: column; gap: 4px; }
.vp__titulo {
  margin: 0;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.vp__alt-corpo--correta .vp__secao--porque .vp__titulo { color: #1a7a4c; }
.vp__alt-corpo--incorreta .vp__secao--porque .vp__titulo,
.vp__secao--armadilha .vp__titulo { color: #6f3438; }
.vp__secao--corrigir .vp__titulo { color: var(--azul); }
.vp__trecho { color: var(--tinta-3); }

/* ---- Abaixo da lista: resultado e habilidade da questao ---- */
.vp {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  margin: 12px 0 4px;
}
.vp__resultado {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--tinta);
}
.vp__resultado:empty { display: none; }
.vp__resultado--acerto { background: #eef7f1; border: 1px solid #c9dfd2; }
.vp__resultado--erro { background: #fff7f7; border: 1px solid #ecd0d0; }
.vp__resultado-selo {
  flex: 0 0 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
}
.vp__resultado--acerto .vp__resultado-selo { background: #1a7a4c; }
.vp__resultado--erro .vp__resultado-selo { background: #a12a2a; }
.vp__resultado-selo svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vp__resultado-texto { min-width: 0; }
.vp__resultado-texto b { display: block; font-size: 16px; }
.vp__resultado--acerto .vp__resultado-texto b { color: #1a7a4c; }
.vp__resultado--erro .vp__resultado-texto b { color: #a12a2a; }

.vp__habilidade {
  padding: 12px 14px;
  border-radius: 14px;
  background: #f4f5f8;
}
.vp__habilidade p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--tinta); }

/* O resultado ja aparece logo acima; o rotulo "Voce acertou." do feedback
   repetiria a mesma frase. O resto do feedback continua igual. */
.vp-ativo .fd__feedback-resultado { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vp__abrir svg { transition: none; }
}