/* Mobile layout safeguards layered over the deployed radio frontend. */

/*
 * Android can composite a canvas at stale coordinates when it is nested in a
 * preserve-3d card, especially after reduced motion is enabled. Reduced-motion
 * users do not need the animated flip, so switch faces without a 3D transform.
 */
.reduce-motion .radio-card {
  transform: none;
  transform-style: flat;
  transition: none;
  will-change: auto;
}

.reduce-motion .radio-card-face {
  transform: none;
  transform-style: flat;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

.reduce-motion .radio-card-back,
.reduce-motion .radio-card.is-chat-open .radio-card-front {
  display: none;
}

.reduce-motion .radio-card.is-chat-open .radio-card-back {
  display: flex;
}

/* Keep the chat control clear of the centred station title on wider phones. */
@media (max-width: 520px) {
  .card-switch-chat {
    top: 18px;
    right: 18px;
    padding: 9px;
  }

  .card-switch-chat span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
}