/* Uma entrada da fila de estudo. Fase 8B, decisão 12.4.
 *
 * Os valores são os da classe `.entrada` do mock de 12/09, em píxel. A
 * etiqueta da revisão vencida usa o vermelho fraco, `--warn-soft`, e a do
 * item novo o azul fraco da marca, como no mock. Tokens de `tokens.css`.
 */

.pv-entrada {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.pv-entrada:first-child, .pv-entrada-form:first-child .pv-entrada { border-top: 0; }

.pv-entrada-tag {
  flex: none;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
  white-space: nowrap;
  margin-top: 2px;
}
.pv-entrada-tag--rev { background: var(--warn-soft); color: var(--warn); }
.pv-entrada-tag--novo { background: var(--brand-soft); color: var(--brand); }

.pv-entrada-txt { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pv-entrada-t { font-size: 14.5px; line-height: 1.35; }
.pv-entrada-sub { font-size: 12px; color: var(--text-2); }
.pv-entrada-min {
  flex: none;
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* A entrada tocável, decisão 37, fase 8T: a mesma linha, agora botão ou link,
 * com o piso de toque e a seta de ação. Herda a cor do cartão, que no Painel
 * é o azul da marca. */
.pv-entrada-form { margin: 0; }
.pv-entrada--tocavel {
  width: 100%;
  min-height: var(--toque);
  margin: 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
}
.pv-entrada--tocavel:hover .pv-entrada-t { text-decoration: underline; }
/* Correção de 30/09/2026, vista pelo autor no celular: a regra geral
 * `button:hover` do `concha.css`, feita para o botão azul, pinta o texto de
 * branco, e a entrada é um botão de fundo claro. No toque o celular aplica o
 * hover, e o texto sumia no fundo. A entrada mantém a cor do texto e ganha um
 * fundo levemente mais escuro no toque, que é o sinal de que pegou. */
button.pv-entrada--tocavel:hover, button.pv-entrada--tocavel:active {
  color: var(--text);
  filter: none;
}
button.pv-entrada--tocavel:active { background: var(--surface-2); }
.pv-entrada--tocavel:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.pv-entrada-seta { flex: none; align-self: center; font-size: 20px; line-height: 1; color: var(--text-3); }


/* A fila dentro do cartão Estude hoje do Painel, decisão 37, fase 8T. Sobre o
 * azul da marca a etiqueta e a linha de apoio sumiam; a lista ganha o fundo
 * da superfície, com a cor do texto de sempre. No celular a etiqueta e os
 * minutos sobem para uma linha própria, e o texto do item fica com a largura
 * inteira em vez de uma coluna estreita. */
.pv-fila-painel {
  margin: 12px 0;
  padding: 0 12px;
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
}
/* Correção de 30/09/2026, vista no Chrome a 390 px: em /revisoes/ o título
 * ficava numa coluna de 100 px, com uma palavra por linha, porque a arrumação
 * em duas linhas valia só para o Painel. Vale para toda entrada: a etiqueta,
 * os minutos e a seta na primeira linha, e o título com a largura inteira
 * embaixo. As listas moram em colunas estreitas também no computador. */
.pv-entrada { flex-wrap: wrap; gap: 4px 10px; }
.pv-entrada-min { order: 1; margin-left: auto; }
.pv-entrada-seta { order: 2; }
.pv-entrada-txt { order: 3; flex-basis: 100%; }