/* The Title Fight — one table, not a table plus a grid of gauges. */

.tf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.tf-table caption {
  text-align: left;
  font-size: var(--text-lg);
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
  color: var(--ink-1);
  padding-block: var(--space-6) var(--space-3);
}

.tf-table th {
  text-align: left;
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--ink-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border) solid var(--surface-3);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: var(--tracking-ui);
  color: var(--ink-3);
}

.tf-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--surface-1);
  vertical-align: middle;
}

.tf-table tbody tr {
  transition: background var(--dur-fast) var(--ease-out);
}
/* The row lights up rather than greys up. Cyan at 7% is enough to read as a
   hover on this base without competing with the livery mark in the row. */
.tf-table tbody tr:hover { background: color-mix(in srgb, var(--neon-cyan) 7%, transparent); }

.tf-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tf-table th.num, .tf-table td.num { text-align: right; }

.tf-pos { width: var(--space-8); color: var(--ink-2); }

.tf-driver { min-width: 14rem; }

.tf-mark {
  display: inline-block;
  width: var(--space-1);
  height: var(--space-5);
  border-radius: var(--radius-sm);
  vertical-align: middle;
  margin-inline-end: var(--space-3);
}

.tf-name { font-weight: 600; }

.tf-team {
  display: block;
  margin-inline-start: var(--space-5);
  font-size: var(--text-xs);
  color: var(--ink-2);
}

.tf-real { color: var(--neon-cyan); font-weight: 400; text-shadow: var(--text-glow-cyan); }
.tf-proj { color: var(--ink-1); }

/* Direction is the glyph plus lightness. Never hue — the liveries own it. */
.tf-move { white-space: nowrap; }
.tf-move[data-dir="up"] { color: var(--ink-0); }
.tf-move[data-dir="down"] { color: var(--ink-2); }
.tf-move[data-dir="level"] { color: var(--ink-2); }

.tf-prob { min-width: 12rem; }

.tf-bar {
  display: block;
  height: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--c, var(--ink-2));
  width: var(--w, 0%);
  min-width: var(--hairline);
  box-shadow: 0 0 var(--glow-spread) var(--c, transparent);
  transform-origin: 0 50%;
}

@media (prefers-reduced-motion: no-preference) {
  .tf-bar {
    animation: tf-grow var(--dur-slow) var(--ease-out-expo) both;
    animation-timeline: view();
    animation-range: entry 0% cover 20%;
  }
  @keyframes tf-grow { from { transform: scaleX(0); } }
}

.tf-prob-val {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--ink-2);
}

/* Mathematically out — stated in words, no bar. Distinct from a long shot,
   which still gets a number because the points are still reachable. */
.tf-prob[data-state="out"] .tf-prob-val {
  font-family: var(--font-body);
  font-style: italic;
  margin-top: 0;
  color: var(--ink-2);
}

.tf-prob[data-state="longshot"] .tf-prob-val { margin-top: 0; }

.tf-ctor-wrap { margin-top: var(--space-6); }
.tf-table--ctor .tf-driver { min-width: 10rem; }

@media (max-width: 48rem) {
  .tf-table { font-size: var(--text-xs); }
  .tf-table th, .tf-table td { padding: var(--space-2) var(--space-3); }
  .tf-driver { min-width: 10rem; }
  .tf-prob { min-width: 7rem; }
}