/* Assetto Corsa visuals: the car table, track grid, mark pictures and tree slider. Colours come from theme.css. */
.ac-table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.ac-table th, .ac-table td { padding: 11px 14px 11px 0; border-bottom: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.ac-table thead th { font-weight: 400; color: var(--color-muted); }
.ac-table tbody th { font-weight: 500; }
.ac-table td { color: var(--color-muted); }
.ac-table td:last-child, .ac-table thead th:last-child { padding-right: 0; text-align: right; font-variant-numeric: tabular-nums; }
.ac-table td:last-child { color: var(--color-text); font-weight: 500; }

.ac-tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ac-tracks img { aspect-ratio: auto; }
.ac-tracks h3 { margin-top: 12px; font-size: 16px; }
.ac-more { grid-column: 1 / -1; margin-top: 16px; }
.ac-subhead { font-size: 19px; font-weight: 500; letter-spacing: -.02em; }
.ac-more .feature-grid { margin-top: 20px; }
.ac-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.ac-compare { display: grid; gap: 12px; margin: 0; }
.ac-compare img { display: block; width: 100%; height: auto; background: var(--color-surface); border-radius: var(--media-radius); }
.ac-compare-frame { display: grid; gap: 12px; }
.ac-compare.is-live .ac-compare-frame { position: relative; display: block; overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--media-radius); cursor: ew-resize; touch-action: pan-y; user-select: none; }
.ac-compare.is-live img { border-radius: 0; -webkit-user-drag: none; }
.ac-compare.is-live .ac-compare-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--split, 50%)) 0 0); }
.ac-compare.is-live .ac-compare-frame::after { content: ''; position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 2px; margin-left: -1px; background: var(--color-accent); pointer-events: none; }
.ac-compare-control { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 13px; color: var(--color-muted); }
.ac-compare-control[hidden] { display: none; }
.ac-compare-control input { width: 100%; accent-color: var(--color-accent); }
.ac-compare .visual-note { margin-top: 4px; }

@media (max-width: 1000px) {
  .ac-tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .ac-table { font-size: 13px; }
  .ac-tracks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}