.board__user_board {
  display: grid;
  grid-template-columns: auto min-content;
}

.user_board__post_its {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.user_board__number,
.user_board__note_average {
  font-size: 1.5rem;
  font-weight: bold;
  background-color: transparent;
  border: none;
  outline: none;
  color: white;
}

.user_board__number {
  font-size: xxx-large !important;
}

.user_board__note_average {
  font-size: 7rem !important;
}


.range-field {
  width: 100%;
  max-width: 320px;
}


.user_board__note_range {
  --track-h: 20px;
  --thumb-w: 2px;
  --thumb-h: 2px;
  --track: rgba(255, 255, 255, 0.1);
  --thumb: #fff;

  width: 100%;
  margin: 0;
  padding: 0 2rem;
  box-sizing: border-box;
  appearance: none;
  background: transparent;
  cursor: pointer;

}


.user_board__note_range::-webkit-slider-runnable-track {
  height: var(--track-h);
  background: var(--track);
  border-radius: 999px;
}

.user_board__note_range::-webkit-slider-thumb {
  appearance: none;
  width: var(--thumb-w);
  height: var(--thumb-h);
  background: var(--thumb);
  border-radius: 1px;
  margin-top: calc((var(--track-h) - var(--thumb-h)) / 2);
}


.user_board__note_range::-moz-range-track {
  height: var(--track-h);
  background: var(--track);
  border-radius: 999px;
}

.user_board__note_range::-moz-range-thumb {
  width: var(--thumb-w);
  height: var(--thumb-h);
  background: var(--thumb);
  border-radius: 1px;
  border: none;
}

.user_board__note {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.user_board__note_range:focus-visible {
  outline: none;
}

.user_board__note_range:focus-visible::-webkit-slider-thumb,
.user_board__note_range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.25);
}


.user_board__note_legend {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 0.4rem;
  font-size: 0.85em;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  user-select: none;
  height: 1.5rem;
}

.user_board__note_legend span {
  font-size: large;
  transition: transform 50ms ease, color 50ms ease, font-size 50ms ease;
}

.user_board__note_legend span.active {
  color: white;
  font-size: xx-large;
  transform: translateY(-0.5rem);
}

.user_board__color_picker {
  display: flex;
  gap: 1ex;
  align-items: center;
  justify-content: center;
  margin-top: 1ex;
}

.user_board__color_swatch {
  width: 1lh;
  height: 1lh;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.1s ease, border-color 0.1s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user_board__color_swatch:hover {
  transform: scale(1.25);
}

.user_board__color_swatch.active {
  border-color: white;
  transform: scale(1.25);
}

.user_board__color_swatch input[type="radio"] {
  display: none;
}