/*
 * Restaurant R6 — car service and the drive-thru (sale-car.js, cars-html.js, views-cars.js): the car panel above the
 * cart, the list of the cars waiting outside, the car board. Every colour is a token (tokens.css: a car's paint is
 * --car-*, the same in both themes, always beside its name); spacing is logical; every control is at least 44 px.
 */

.car {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin-block-end: var(--s-2);
}

/* the rows of buttons take the whole width; the fields go two by two, so the cart keeps its lines in view */
.car__types,
.car__colours,
.car__lanes {
  grid-column: 1 / -1;
}

.car__types,
.car__colours,
.car__lanes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.car__type,
.car__list,
.car__colour,
.car__lane {
  min-block-size: 44px;
  min-inline-size: 44px;
  padding-inline: var(--s-3);
  border: 1px solid var(--line-control);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}

.car__type--on,
.car__colour--on,
.car__lane--on {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

.car__list {
  margin-inline-start: auto;
}

/* the eleven colours scroll sideways in one row rather than push the cart's lines down */
.car .car__colours {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-block-end: var(--s-1);
}

.car__colour {
  flex: none;
}

.car__field {
  display: grid;
  gap: var(--s-1);
  min-inline-size: 0;
}

/* a field never widens its column past the cart (the panel never scrolls sideways) */
.car__field .input {
  inline-size: 100%;
  min-inline-size: 0;
  box-sizing: border-box;
}

.car-colour {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
}

.car-swatch {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: 50%;
  border: 1px solid var(--line-control);
  flex: none;
}

.car-swatch--white {
  background: var(--car-white);
}
.car-swatch--black {
  background: var(--car-black);
}
.car-swatch--silver {
  background: var(--car-silver);
}
.car-swatch--grey {
  background: var(--car-grey);
}
.car-swatch--red {
  background: var(--car-red);
}
.car-swatch--blue {
  background: var(--car-blue);
}
.car-swatch--green {
  background: var(--car-green);
}
.car-swatch--beige {
  background: var(--car-beige);
}
.car-swatch--brown {
  background: var(--car-brown);
}
.car-swatch--gold {
  background: var(--car-gold);
}
.car-swatch--yellow {
  background: var(--car-yellow);
}

.cargrid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--s-3);
}

.carcard {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-inline-start-width: 6px;
  border-radius: var(--r-card);
  background: var(--surface);
}

.carcard p {
  margin: 0;
}

.carcard--ready {
  border-inline-start-color: var(--good);
}

.carcard__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-2);
}

.carcard__plate {
  font-size: var(--t-total);
}

.cargrid--board .carcard__plate {
  font-size: var(--t-k-call);
}

.carcard__deliver {
  min-block-size: 44px;
}

.ktag--car {
  font-weight: 600;
}