/* Equal-choice borders: each Boardroom tile echoes its own approved swatch. */
.board-card:nth-child(1) {
  border-color: rgba(184, 190, 194, .58);
}

.board-card:nth-child(2) {
  border-color: rgba(239, 228, 204, .68);
}

.board-card:nth-child(3) {
  border-color: rgba(198, 172, 151, .66);
}

.board-card:nth-child(4) {
  border-color: rgba(146, 190, 185, .68);
}

.board-card:nth-child(1):is(:hover, :focus-visible) {
  border-color: rgba(205, 211, 214, .78);
}

.board-card:nth-child(2):is(:hover, :focus-visible) {
  border-color: rgba(250, 241, 220, .86);
}

.board-card:nth-child(3):is(:hover, :focus-visible) {
  border-color: rgba(218, 193, 171, .84);
}

.board-card:nth-child(4):is(:hover, :focus-visible) {
  border-color: rgba(174, 216, 211, .84);
}

/* Remove the old orange Springboard emphasis on phone layouts. */
@media (max-width: 900px) {
  .board-card:nth-child(4) {
    background:
      linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012) 30%, rgba(0,0,0,.07)),
      repeating-linear-gradient(0deg, rgba(255,255,255,.009) 0 1px, transparent 1px 4px),
      rgba(16,16,15,.72);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.055),
      inset 0 -1px 0 rgba(0,0,0,.42),
      0 10px 24px rgba(0,0,0,.24);
  }

  .board-card:nth-child(4) .board-label {
    color: rgba(240,235,228,.88);
  }

  .board-card:nth-child(4)::after {
    display: none !important;
  }
}