/* 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: 40px; 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;
}
.fml-btn--primario { background: var(--red); color: var(--on-red); }
.fml-btn--primario:hover { background: var(--red-text); }
.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--secundario:hover { background: var(--hairline); }
.fml-btn--fantasma { background: transparent; color: var(--ink); clip-path: none; border-radius: var(--radius-md); padding: 0 var(--space-3); }
.fml-btn--fantasma:hover { color: var(--red-text); }
.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; }

/* ---------- 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; }

/* ---------- 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 { font: 600 16px/1 var(--font-data); }
.fml-linha:hover { background: var(--surface-raised); }
.fml-linha--voce { background: var(--surface-raised); box-shadow: inset 3px 0 0 var(--red); }
.fml-pos { text-align: center; }
.fml-pos--lider { background: var(--red); color: var(--on-red); border-radius: var(--radius-sm); line-height: 22px; }
.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; }
.fml-num { text-align: right; }
.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; }
.fml-regua { width: 64px; height: 4px; background: var(--red); transform: skewX(var(--slant)); }