/* -------------------------------------------------------- */
/* 🔹 Discrete Selector                                     */
/* -------------------------------------------------------- */
/* Subtle bordered selector with discrete styling            */
/* Single row on wide screens, 2-column grid on narrow —     */
/* row cells are 44px, grid cells 48px, matching Dart        */
/* Cells may be links. Mirrors discrete_selector.dart        */

.discrete-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xs);
}

.discrete-selector__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 var(--space-xs);
  border: 1px solid var(--color-primary-border);
  border-radius: var(--radius-medium);
  font-size: var(--text-body-medium); /* website: one step larger than Dart's bodySmall */
  color: var(--color-unselected-text);
  text-align: center;
}

@media (max-width: 767px) {
  .discrete-selector {
    grid-template-columns: repeat(2, 1fr);
  }

  .discrete-selector__cell {
    height: 48px;
  }
}

a.discrete-selector__cell:hover {
  background-color: var(--color-press-highlight);
  text-decoration: none;
}

.discrete-selector__cell--selected {
  border-color: var(--color-primary);
  background-color: var(--color-selected-bg);
  color: var(--color-selected-text);
}