/* The stat tile (.stat-card with .stat-value and .stat-label) on the shared tokens (tokens.css). Base sizes are in
   cars-on-site.css; this is the token look, moved here from cars-redesign.css so the calendar and the courtesy cars page
   use the same tile as the Cars on Site stats row (Kris 31/10/2026: one design system). Load after cars-theme.css. */
.stat-card, html.theme-light .stat-card, html.theme-pink .stat-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.stat-gold, html.theme-light .stat-gold, html.theme-pink .stat-gold { border-color: var(--accent); }
.stat-value, html.theme-light .stat-value { color: var(--accent-text); }
.stat-label, html.theme-light .stat-label { color: var(--text-2); }

/* A tile that is a link (the Courtesy cars tile: opens the courtesy cars page in this tab). Same tile, no underline. */
a.stat-card { display: block; text-decoration: none; color: inherit; transition: border-color .15s; }
a.stat-card:hover { border-color: var(--accent); }
.stat-card[hidden] { display: none; }

/* A row of tiles outside the Cars on Site stats bar (calendar, courtesy cars page): the stats bar's own spacing */
.kw-stat-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.kw-stat-row:not(:has(.stat-card:not([hidden]))) { display: none; }
/* A row of tiles inside a page's header row (the calendar: beside the title, Kris 31/10/2026): the header's own gap spaces it */
.kw-stat-row.kw-stat-inline { margin-bottom: 0; align-items: stretch; }
.kw-stat-inline .stat-card { flex: 0 1 auto; min-width: 9rem; padding: var(--space-2) var(--space-3); }
.kw-stat-inline .stat-value { font-size: 1.35rem; font-weight: 700; }
.kw-stat-inline .stat-label { font-size: 0.75rem; margin-top: var(--space-1); }

/* Phones and small tablets (Kris 01/11/2026: "the courtesy car counter has broken" the mobile view): the header courtesy
   counter (partials/_cc_header_stat.html.jinja on Cars on Site, the calendar and the courtesy cars page) is left out at
   768px and below, so the title, name and header buttons fit again. Desktop is unchanged. Home keeps its own tile in the
   stats grid (it opens the Courtesy fleet list there). */
@media (max-width: 48em) {   /* 48em = 768px */
  .kw-stat-row.kw-stat-inline { display: none !important; }
}