/* F1 Motors League — estilos dos componentes. Cores, espaços e raios vêm de tokens.css. */

.fml {
  font-family: var(--font-body);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- Botão: canto direito cortado na inclinação da marca */
.fml-btn {
  --corte: 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 calc(var(--space-6) + 4px) 0 var(--space-6);
  border: 0; border-radius: var(--radius-md) 0 0 var(--radius-md);
  clip-path: polygon(0 0, 100% 0, calc(100% - var(--corte)) 100%, 0 100%);
  font: 700 15px/1 var(--font-data); letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-hover) ease;
}
.fml-btn:active { transform: scale(0.97); }
.fml-btn--primario { background: var(--red); color: var(--on-red); }
.fml-btn--primario:active { background: var(--red-deep); }
.fml-btn--secundario { background: var(--surface-raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-strong); clip-path: none; border-radius: var(--radius-md); padding: 0 var(--space-6); }
.fml-btn--fantasma { background: transparent; color: var(--ink); clip-path: none; border-radius: var(--radius-md); padding: 0 var(--space-3);
  text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.fml-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); clip-path: none; border-radius: var(--radius-md); }
.fml-btn[disabled] { opacity: .45; cursor: not-allowed; }
.fml-btn[disabled]:active { transform: none; }
/* Hover só em quem tem mouse: no toque ele fica "preso" depois do dedo sair */
@media (hover: hover) and (pointer: fine) {
  .fml-btn--primario:hover { background: var(--red-text); }
  .fml-btn--secundario:hover { background: var(--hairline); }
  .fml-btn--fantasma:hover { text-decoration-color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .fml-btn { transition: background-color var(--dur-hover) ease; }
  .fml-btn:active { transform: none; }
}

/* ---------- Etiqueta de estado */
.fml-tag {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--space-2);
  border-radius: var(--radius-sm); font: 700 12px/1 var(--font-data); letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--surface-raised); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--hairline);
}
.fml-tag--vivo { background: var(--red); color: var(--on-red); box-shadow: none; }
.fml-tag--vivo::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--on-red); }
.fml-tag--pendente { color: var(--flag-yellow); box-shadow: inset 0 0 0 1px var(--flag-yellow); background: transparent; }
.fml-tag--decidida { color: var(--timing-green); box-shadow: inset 0 0 0 1px var(--timing-green); background: transparent; }
.fml-tag--punicao { color: var(--red-text); box-shadow: inset 0 0 0 1px var(--red-text); background: transparent; }
.fml-tag--info { color: var(--flag-blue); box-shadow: inset 0 0 0 1px var(--flag-blue); background: transparent; }
/* Estado "sinal" (ponto verde, como o "Ao vivo" do menu): não gasta o vermelho da tela */
.fml-tag--sinal { color: var(--ink); }
.fml-tag--sinal::before { content: ""; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--timing-green); }

/* ---------- Pneu: círculo com a letra do composto */
.fml-pneu {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none;
  border-radius: var(--radius-full); color: var(--tyre-ink); font: 700 12px/1 var(--font-data);
}
.fml-pneu--S { background: var(--tyre-soft); }
.fml-pneu--M { background: var(--tyre-medium); }
.fml-pneu--H { background: var(--tyre-hard); }
.fml-pneu--I { background: var(--tyre-inter); }
.fml-pneu--W { background: var(--tyre-wet); }
.fml-pneu-idade { font: 600 13px/1 var(--font-data); color: var(--ink-muted); margin-left: var(--space-1); }

/* ---------- Linha da torre de tempos */
.fml-torre { display: grid; gap: 2px; background: var(--surface); border-radius: var(--radius-md); padding: var(--space-2) 0; }
.fml-torre-cab, .fml-linha {
  display: grid; grid-template-columns: 28px 6px minmax(0, 1fr) 76px 76px 84px 56px; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-4); min-height: 36px;
}
.fml-torre-cab { min-height: 28px; font: 600 12px/1 var(--font-data); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.fml-torre-cab span:nth-child(n+4) { text-align: right; }
.fml-linha { position: relative; font: 600 16px/1 var(--font-data); }
@media (hover: hover) and (pointer: fine) { .fml-linha:hover { background: var(--surface-raised); } }
.fml-linha--voce { background: var(--surface-raised); box-shadow: inset 3px 0 0 var(--silver-hi); }
/* Volta mais rápida: a linha acende em roxo e apaga (só opacidade) */
.fml-linha::after { content: ""; position: absolute; inset: 0; background: var(--timing-purple); opacity: 0; pointer-events: none; }
.fml-linha--recorde::after { animation: fml-recorde var(--dur-recorde) var(--ease-out); animation-delay: inherit; }
@keyframes fml-recorde { from { opacity: .22; } to { opacity: 0; } }
.fml-pos { text-align: center; }
/* Líder em bloco prata: o vermelho da tela da torre é a etiqueta AO VIVO */
.fml-pos--lider { background: var(--silver-hi); color: var(--tyre-ink); border-radius: var(--radius-sm); line-height: 22px; }
/* No tema claro o prata alto some no fundo claro: o líder e o "você" ficam em grafite/tinta */
:root[data-tema="claro"] .fml-pos--lider { background: var(--graphite); color: var(--silver-hi); }
:root[data-tema="claro"] .fml-linha--voce { box-shadow: inset 3px 0 0 var(--ink); }
.fml-equipe { width: 4px; height: 20px; border-radius: 1px; background: var(--silver); }
.fml-nome { font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fml-num { text-align: right; white-space: nowrap; }
.fml-num--roxo { color: var(--timing-purple); }
.fml-num--verde { color: var(--timing-green); }
.fml-num--apagado { color: var(--ink-muted); }
.fml-linha .fml-pneu { justify-self: end; }

/* ---------- Campo de formulário */
.fml-campo { display: grid; gap: var(--space-1); max-width: 520px; }
.fml-rotulo { font: 600 12px/16px var(--font-data); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.fml-entrada, .fml-select, .fml-texto {
  width: 100%; box-sizing: border-box; min-height: 42px; padding: 10px var(--space-3);
  background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  font: 400 16px/22px var(--font-body);
}
.fml-texto { min-height: 104px; resize: vertical; }
.fml-entrada:focus, .fml-select:focus, .fml-texto:focus { outline: none; border-color: var(--red-text); box-shadow: var(--focus-ring); }
.fml-entrada[readonly] { background: transparent; border-style: dashed; color: var(--ink-muted); }
.fml-ajuda { font: 400 14px/20px var(--font-body); color: var(--ink-muted); }
.fml-campo--erro .fml-entrada, .fml-campo--erro .fml-select, .fml-campo--erro .fml-texto { border-color: var(--red-text); }
.fml-campo--erro .fml-ajuda { color: var(--red-text); }
.fml-arquivo {
  display: grid; place-items: center; gap: var(--space-1); padding: var(--space-6) var(--space-4); text-align: center;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-md); color: var(--ink-muted); font: 400 14px/20px var(--font-body);
}
.fml-arquivo strong { color: var(--ink); font-weight: 600; }

/* ---------- Títulos de marca */
.fml-titulo { font: italic 800 36px/40px var(--font-display); text-transform: uppercase; margin: 0; text-wrap: balance; }
.fml-regua { width: 64px; height: 4px; background: var(--red); transform: skewX(var(--slant)); }
/* Régua prata: telas em que o único vermelho já está noutro lugar (botão principal, punição, AO VIVO) */
.fml-regua--prata { background: var(--silver); }