/* Motion (see motion.js): the sheets are moved by script on the iOS curve, so
   the older CSS entrance animations are switched off to never run twice. */
html:not(.x) body :is(#account-dialog, #dialog)[open] { animation: none !important; will-change: auto; }
/* While a sheet or page follows the finger, nothing else may ease it. */
html:not(.x) body :is(#account-dialog, #dialog)[open] { touch-action: pan-y; }
html:not(.x) body main { backface-visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  html:not(.x) body main { transform: none !important; }
}

/* Phones and tablets (ios.js adds .app-locked): the app holds still like a
   native one. Scrolling and swiping work; pinch and double-tap zoom do not,
   the page never bounces or slides sideways as a whole, a long press does
   not select text or open the link menu, and form fields are 16 px so iOS
   does not zoom into them when they are tapped. */
html.app-locked { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.app-locked, html.app-locked body { overscroll-behavior: none; overflow-x: hidden; max-width: 100%; }
html.app-locked body { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
html.app-locked :is(input, textarea, select, [contenteditable="true"]) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
html.app-locked :is(input:not([type="range"]):not([type="checkbox"]), textarea, select) { font-size: max(16px, 1em) !important; }
html.app-locked img { -webkit-user-drag: none; }

/* The big player's Radio switch (stations.js): a small flat capsule centred
   between the two times under the scrubber (where the Music app shows
   "Lossless"), grey when off, the accent red when on. */
#immersive .room-times { display: flex !important; justify-content: space-between !important; align-items: center !important; }
#immersive #room-radio-pill {
  position: static !important; flex: none; transform: none !important;
  display: inline-flex !important; align-items: center; gap: 4px;
  height: 20px; padding: 0 8px !important; margin: 0 6px !important; border: 0 !important; border-radius: 10px !important;
  background: rgba(255, 255, 255, .16) !important; color: rgba(255, 255, 255, .8) !important;
  font: 600 11px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif !important;
  letter-spacing: 0; white-space: nowrap; max-width: 52%; box-shadow: none !important; min-height: 0 !important; width: auto !important;
}
#immersive #room-radio-pill span { overflow: hidden; text-overflow: ellipsis; }
#immersive #room-radio-pill svg { width: 12px; height: 12px; flex: none; }
#immersive #room-radio-pill.on { background: #fa2d48 !important; color: #fff !important; }
#immersive #room-radio-pill[hidden] { display: none !important; }
#immersive #room-radio-pill:active { opacity: .7; }