/* A BANCADA DE CORREÇÃO — folha da linha do tempo, dos marcadores e do react.
 *
 * Nasce quase vazia de propósito: o Propshaft levanta `MissingAssetError` (e
 * derruba TODAS as páginas) num `stylesheet_link_tag` de arquivo que não
 * existe. Então o arquivo e o link nascem juntos, na Fatia 0, e quem desenha a
 * linha do tempo preenche daqui pra baixo sem reabrir o layout.
 *
 * A única regra que já vem: o checkbox do consentimento da leitura automática,
 * na tela de gravar. Ele é um input NATIVO — sem JS, sem `aria-checked`
 * mentiroso: o navegador desenha o estado real, que é o mínimo que se exige de
 * uma caixa de permissão. Se esta folha for reescrita, ele continua
 * funcionando: perde a cor, não perde a verdade. */

.check-consent {
  flex: none;
  width: 22px;
  height: 22px;
  accent-color: var(--volt);
  cursor: pointer;
}

/* =========================================================
   A LINHA DO TEMPO (§5) — a bancada de correção na web.

   Regra que governa a folha inteira: FONTE tem cor, ESTADO tem forma.
   A máquina é fria (azul, `--info`), o professor é volt, o aluno é âmbar —
   e "descartado" não some, ele fica riscado e apagado. Se descartar
   apagasse o marcador da tela, a tela estaria mentindo sobre o que o banco
   guarda: o palpite errado da máquina é o dado que prova se a leitura vale
   os R$ 0,24 por vídeo.
   ========================================================= */

.lt {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
}

.lt__head { display: flex; align-items: center; gap: 8px; }
.lt__title { font-size: 14px; font-weight: 800; letter-spacing: -.01em; flex: 1; }

/* ---- a régua ---- */

/* 26px de altura porque os alfinetes têm 20px e precisam caber inteiros: com a
   barra mais fina eles vazavam por cima do texto de baixo em 390px. */
.lt__bar {
  position: relative;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--bg-input);
  border: 1px solid var(--border);
}

.lt__span {
  position: absolute;
  top: 5px;
  height: 14px;
  min-width: 6px;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--info);
  opacity: .75;
  cursor: pointer;
}
.lt__span--coach { background: var(--volt); }
/* O corte-morto é a AUSÊNCIA de treino: listrado e apagado, pra ele nunca ser
   confundido com um trecho de exercício num relance de meio segundo — que é o
   tempo que o professor dá pra régua antes de tocar. */
.lt__span--out-of-frame { background: var(--warning); height: 8px; top: 8px; }
.lt__span--no-training {
  background: repeating-linear-gradient(
    45deg, var(--text-faded), var(--text-faded) 3px, transparent 3px, transparent 6px);
  opacity: .5;
  height: 8px;
  top: 8px;
}
.lt__span[data-state="confirmado"] { opacity: 1; }
.lt__span[data-state="descartado"] { opacity: .25; background: var(--text-faded); }

/* O alfinete é alvo de toque: 20px de caixa visível, mas a área clicável cresce
   com o padding invisível — no celular do professor um ponto de 8px é um alvo
   que erra. */
.lt__pin {
  position: absolute;
  top: 3px;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
}
.lt__pin--ia      { color: var(--info); }
.lt__pin--coach   { color: var(--volt); }
.lt__pin--athlete { color: var(--warning); }
.lt__pin--form-break { color: var(--warning); }
.lt__pin[data-state="descartado"] { opacity: .3; }

.lt__ruler {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-faded);
  font-variant-numeric: tabular-nums;
}

/* ---- as ferramentas do professor ---- */

.lt__tools { display: flex; gap: 6px; flex-wrap: wrap; }
.lt__tool {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-muted);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}
.lt__tool:active { transform: scale(.94); }
.lt__tool--warn:hover { border-color: var(--warning); color: var(--warning); }
.lt__tool--read:hover { border-color: var(--info); color: var(--info); }
.lt__tool[disabled] { opacity: .5; cursor: progress; }

.lt__recado:empty { display: none; }
.lt__all { align-self: stretch; }

/* ---- as linhas (um trecho por linha) ---- */

.lt__rows:empty { display: none; }

.lt__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--info);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}
.lt__row[data-state="confirmado"] { border-left-color: var(--success); }
.lt__row[data-state="corrigido"]  { border-left-color: var(--volt); }
/* Descartado continua na tela, apagado e riscado. Ele é a medição. */
.lt__row[data-state="descartado"] { border-left-color: var(--text-faded); opacity: .55; }
.lt__row[data-state="descartado"] .lt__name { text-decoration: line-through; }
/* Os botões CONTINUAM ali no descartado, de propósito: descartar por engano
   acontece, e desfazer tem que ser o mesmo toque. Esconder a saída faria o
   professor apagar o post pra "limpar" a linha — e aí some a medição junto. */

.lt__rowhead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.lt__name { font-size: 13px; font-weight: 800; letter-spacing: -.01em; }

.lt__seek {
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-muted);
  border-radius: var(--radius-full);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
}

.lt__src {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--radius-full);
}
.lt__src--ia    { color: var(--info);  background: rgb(var(--info-rgb) / .14); }
.lt__src--coach { color: var(--volt);  background: var(--volt-soft); }
.lt__src--athlete { color: var(--warning); background: rgb(var(--warning-rgb) / .14); }

.lt__acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lt__act {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}
.lt__act--ok:hover { border-color: var(--success); color: var(--success); }
.lt__act--no:hover { border-color: var(--danger); color: var(--danger); }
.lt__act[disabled] { opacity: .5; cursor: progress; }

.lt__swap {
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-muted);
  border-radius: var(--radius-full);
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 750;
  max-width: 100%;
}

.lt__estado:empty { display: none; }
.lt__placar { font-variant-numeric: tabular-nums; }

@media (hover: hover) {
  .lt__tool:hover { border-color: var(--border-strong); color: var(--text); }
  .lt__seek:hover { border-color: var(--border-strong); color: var(--text); }
}