/*
 * Stat tile — a label, a big value, an optional delta. Lives in a
 * .stat-grid (auto-fit, 140px floor) or as a card body.
 *
 *   <div class="stat-grid">
 *     <div class="stat">
 *       <span class="stat__label">Training data</span>
 *       <span class="stat__value">139,657</span>
 *       <span class="stat__delta stat__delta--up">+165 today</span>
 *     </div>
 *   </div>
 */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
    gap: var(--sp-3);
}
.stat {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    min-width: 0;
    padding: var(--sp-3) var(--sp-4);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.stat--plain { padding: 0; background: none; border: 0; border-radius: 0; }
.stat__label {
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat__value {
    font-size: var(--fs-2xl);
    font-weight: 600;
    line-height: var(--lh-tight);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    overflow-wrap: anywhere;
}
.stat__value--sm { font-size: var(--fs-xl); }
.stat__delta { font-size: var(--fs-xs); color: var(--color-text-dim); }
.stat__delta--up   { color: var(--color-success); }
.stat__delta--down { color: var(--color-danger); }
.stat--success .stat__value { color: var(--color-success); }
.stat--warning .stat__value { color: var(--color-warning); }
.stat--danger  .stat__value { color: var(--color-danger); }
.stat--primary .stat__value { color: var(--color-primary-hi); }