/* =========================================================
   LOTE C — atribuição, turmas e convites
   Dono único desta folha (matriz de conflito do PLANO_V2).
   Mobile-first como o resto do app: nada aqui depende de mouse.
   ========================================================= */

/* ---------- resumo da leva ---------- */
.leva-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.leva-stats .stat { padding: 10px 6px; }
.leva-stats .stat__value { font-size: 19px; }
.leva-stats .stat__label { font-size: 9px; letter-spacing: .05em; }

/* ---------- pessoa dentro da leva ---------- */
.pessoa__recado {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}
.pessoa__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
/* `button_to` embrulha cada botão num <form>; sem isto o form vira uma linha
   inteira e as ações da pessoa quebram em quatro andares no celular. */
.pessoa__acoes form { display: contents; }
.pessoa__acoes .btn {
  padding: 7px 11px;
  font-size: 12px;
  border-radius: var(--radius-full);
}
/* Tirar da leva é a ação rara e destrutiva: fica no fim da linha e apagada, longe
   do dedo que estava mirando "Encerrar". */
.pessoa__sair { padding: 7px 10px; opacity: .5; margin-left: auto; }
.pessoa__recado-box { position: relative; }
.pessoa__recado-box > summary {
  list-style: none;
  display: inline-flex;
  cursor: pointer;
}
.pessoa__recado-box > summary::-webkit-details-marker { display: none; }
.pessoa__recado-box[open] { width: 100%; }

/* ---------- seletor de pessoas ---------- */
.picker { padding-bottom: 92px; }
.picker__list { max-height: none; }
.picker__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  transition: border-color var(--t-fast), background var(--t-fast);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* A busca de "quem entra" esconde linha com o atributo `hidden`. Sem esta regra
   o `display: flex` de cima ganha do `[hidden] { display: none }` do navegador e
   filtrar não filtra nada: o professor digita o nome e a lista inteira continua
   na tela — foi assim que uma leva saiu para a pessoa errada. */
.picker__item[hidden] { display: none; }
.picker__item:active { transform: scale(.99); }
.picker__item:has(.picker__check:checked) {
  border-color: var(--fire);
  background: linear-gradient(135deg, rgb(var(--fire-rgb) / .10), transparent), var(--bg-card);
}
.picker__check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  accent-color: var(--fire);
}
/* "já está" só aparece quando o desafio escolhido é o que a pessoa já faz. */
.picker__taken { display: none; }
.picker__item.is-taken { opacity: .45; }
.picker__item.is-taken .picker__taken { display: inline-flex; }

/* Barra fixa: o botão que solta a leva não pode exigir rolar até o fim de uma
   lista de 200 nomes. Fica acima da tabbar, com o safe-area do iPhone somado. */
.picker__bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--tabbar-h) + var(--safe-b));
  z-index: 60;
  display: flex;
  gap: var(--space-sm);
  padding: 10px var(--space-md) 12px;
  background: linear-gradient(180deg, rgb(var(--bg-rgb) / 0), rgb(var(--bg-rgb) / .96) 32%);
  backdrop-filter: blur(12px);
}
.picker__bar .btn { max-width: 620px; margin: 0 auto; width: 100%; }

/* No computador não existe tabbar, então `bottom: tabbar + safe-area` deixava a
   barra boiando 68px acima do rodapé — e como ela é `left: 0; right: 0`, metade
   dela caía em cima da sidebar e a outra tapava a primeira linha da lista de
   gente. A partir de 900px ela deixa de flutuar sobre a tela e vira o rodapé da
   própria coluna de conteúdo. (Mora aqui, e não no desktop.css, porque esta
   folha é carregada depois: lá a regra perdia a disputa por ordem.) */
@media (min-width: 900px) {
  .picker__bar {
    position: sticky;
    left: auto;
    right: auto;
    bottom: 0;
    margin: 0 calc(-1 * var(--space-lg));
    padding: var(--space-sm) var(--space-lg) var(--space-md);
  }
  .picker__bar .btn { max-width: none; }
}

/* Chip que responde a toque (usado nos atalhos de data e no "+ pessoa"). */
.chip--tap {
  cursor: pointer;
  background: var(--bg-elevated);
  transition: transform var(--t-fast), border-color var(--t-fast);
}
.chip--tap:active { transform: scale(.94); border-color: var(--border-strong); }

/* ---------- convites ---------- */
.convite__url {
  margin-top: 10px;
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -.01em;
}
.convite .btn { white-space: nowrap; }

/* ---------- desafios do aluno ---------- */
.desafio--foco {
  border-color: var(--fire);
  background: linear-gradient(135deg, rgb(var(--fire-rgb) / .10), transparent 60%), var(--bg-card);
}