/* ============================================================
   Your driving (/driving): one block per day. The day bar reads like a
   timing screen's session header (the date big, then the day's numbers in
   labelled cells), and the day's sessions sit under it in the usual timing
   table. Square, flat, no gradients. Cells wrap on phones.
   ============================================================ */
.driving-days { display: grid; gap: 14px; }
.driving-day { scroll-margin-top: 80px; }
.driving-day-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding: 12px 16px;
  background: #101216;
  box-shadow: inset 3px 0 0 var(--accent-deep);
}
.driving-day:target .driving-day-head { box-shadow: inset 3px 0 0 var(--accent); }
.driving-day-date {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.1;
  color: #fff;
  white-space: nowrap;
}
.driving-day-stats { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.driving-day-stats > div { min-width: 0; }
.driving-day-stats dt { font-size: 0.75rem; font-weight: 500; color: var(--ink-faint); }
.driving-day-stats dd { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.driving-day-stats dd .chip { margin-left: 4px; vertical-align: 1px; }
.driving-sessions { margin-top: 2px; border: 0; border-radius: 0; box-shadow: none; background: #0c0e11; }
.driving-sessions thead th { padding: 6px 16px; background: transparent; font-family: var(--font-text); font-weight: 500; font-size: 0.75rem; }
.driving-sessions tbody td { padding: 8px 16px; }
.driving-empty { padding: 16px; background: #101216; font-size: 0.9rem; color: var(--ink-muted); }
@media (max-width: 640px) {
  .driving-day-head { padding: 10px 12px; gap: 6px 16px; }
  .driving-day-date { font-size: 1.15rem; }
  .driving-day-stats { gap: 4px 16px; }
  .driving-sessions tbody tr { padding: 10px 12px; }
  .driving-sessions tbody td { padding: 1px 0; }
}