/* Slot picker: a grid of times to choose one from — a lounge's arrival.
   Each slot is a radio drawn as a tile: the time large, the day beneath.
   The picked tile takes the accent's tint and edge.

   <div class="slot-picker">
     <label class="slot-picker__slot">
       <input type="radio" …>
       <span class="slot-picker__time">22:00</span>
       <span class="slot-picker__day">Sa., 4. Okt.</span>
     </label>
   </div> */
.slot-picker {
  display: grid;
  gap: var(--space-2xs);
  grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
}

.slot-picker__slot {
  background: var(--color-surface-2);
  border: var(--border-width) solid var(--color-surface-3);
  border-radius: var(--radius-m);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-xs) var(--space-2xs);
  position: relative;
  text-align: center;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);

  &:hover {
    background: var(--color-surface-3);
  }

  /* The radio covers the tile, invisible, so the whole tile is the target */
  input {
    appearance: none;
    cursor: pointer;
    inset: 0;
    margin: 0;
    position: absolute;
  }

  &:has(input:checked) {
    background: oklch(from var(--color-accent) l c h / 0.12);
    border-color: var(--color-accent);
  }

  &:has(input:focus-visible) {
    box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
  }
}

.slot-picker__time {
  font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-flat);
}

.slot-picker__day {
  color: var(--color-muted);
  font-size: var(--step--2);
}