:root {
    --brand-50: #ecfdf5;
    --brand-100: #d1fae5;
    --brand-200: #a7f3d0;
    --brand-300: #6ee7b7;
    --brand-400: #34d399;
    --brand-500: #10b981;
    --brand-600: #059669;
    --brand-700: #047857;
    --brand-800: #065f46;
    --brand-900: #064e3b;
    --brand-950: #022c22;
}

.horse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-4);
    margin-bottom: var(--s-4);
}

.horse-table {
    width: 100%;
    border-collapse: collapse;
}

.horse-table th,
.horse-table td {
    padding: var(--s-2);
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
}

.horse-track-row {
    display: grid;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
}

.horse-track-meta {
    display: flex;
    justify-content: space-between;
    gap: var(--s-2);
}

.horse-track {
    height: 10px;
    background: var(--bg-muted);
    border-radius: var(--r-pill);
    overflow: hidden;
}

.horse-track span {
    display: block;
    height: 100%;
    background: var(--brand-600);
}