/* A local fullscreen action distinguishes the visualizer from the whole player. */
.tablet-visual-actions { position: absolute; top: 0; right: 0; z-index: 2; }
.tablet-visual-actions .icon-btn { width: 44px; height: 44px; color: var(--tablet-muted); }
.tablet-visual-actions .icon-btn svg { width: 21px; height: 21px; }
.tablet-visual-actions { opacity: 1; visibility: visible; transition: opacity .18s ease, visibility 0s; }
.tablet.is-ui-hidden .tablet-visual-actions { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease, visibility 0s .45s; }

.tablet.is-visualizer-focus {
  padding: max(16px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
.tablet.is-visualizer-focus .tablet-header,
.tablet.is-visualizer-focus .tablet-playlist,
.tablet.is-visualizer-focus .tablet-portrait-controls { display: none; }
.tablet.is-visualizer-focus .tablet-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0; }
.tablet.is-visualizer-focus .tablet-listening {
  grid-column: 1; grid-row: 1; display: grid;
  grid-template-rows: minmax(0, 1fr) auto; gap: clamp(8px, 2dvh, 24px);
}
.tablet.is-visualizer-focus .tablet-visual { grid-row: 1; }
.tablet.is-visualizer-focus .tablet-visual-actions { right: 52px; }
.tablet.is-visualizer-focus .tablet-track-info {
  position: static; grid-row: 2; width: min(100%, 1200px); height: auto; margin: 0 auto; padding: 0;
  clip-path: none; overflow: hidden; white-space: normal; text-align: center;
}
.tablet.is-visualizer-focus #tabletStatus { display: none; }
.tablet.is-visualizer-focus #tabletTitle,
.tablet.is-visualizer-focus #tabletArtist {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
}
.tablet.is-visualizer-focus #tabletTitle { margin: 0; font: 700 clamp(24px, 3vw, 52px)/1.08 var(--font); letter-spacing: -.045em; color: var(--tablet-ink); }
.tablet.is-visualizer-focus #tabletArtist { margin: 8px 0 0; font: 300 clamp(15px, 1.6vw, 24px)/1.3 var(--font); color: var(--tablet-artist); }
@media (max-height: 600px) {
  .tablet.is-visualizer-focus { padding-block: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-bottom)); }
  .tablet.is-visualizer-focus #tabletTitle { font-size: clamp(20px, 4dvh, 28px); }
  .tablet.is-visualizer-focus #tabletArtist { margin-top: 4px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .tablet .tablet-visual-actions, .tablet.is-ui-hidden .tablet-visual-actions { transition: none; }
}