/*
 * The Carpool Schedule Generator (KID-1324): the form's day boxes, and the schedule's family colors (the service's,
 * printed as they are) in the legend, the grid and the totals.
 */
@layer pages {
  .kp-carpool__days .kp-checks {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  @media (max-width: 30rem) {
    .kp-carpool__days .kp-checks {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .kp-carpool__swatch {
    display: inline-block;
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 50%;
    background: var(--kp-border-2);
  }

  .kp-carpool__legend,
  .kp-carpool__totals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kp-space-2) var(--kp-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .kp-carpool__legend li,
  .kp-carpool__totals li {
    display: flex;
    align-items: center;
    gap: var(--kp-space-2);
    font-weight: 700;
  }

  .kp-carpool__totals li {
    padding: var(--kp-space-2) var(--kp-space-3);
    border-radius: var(--kp-radius-sm);
    background: var(--kp-alt);
  }

  .kp-carpool__totals strong {
    color: var(--kp-ink-2);
    font-weight: 600;
  }

  .kp-carpool__grid td {
    border-inline-start: 1px solid var(--kp-border);
    background: color-mix(in srgb, var(--kp-family, transparent) 12%, transparent);
  }

  .kp-carpool__driver {
    display: inline-flex;
    align-items: center;
    gap: var(--kp-space-2);
    font-weight: 700;
  }
}