/* Website version of the app: read-only, and it has to work on phones too. */

/* Visitors can't edit, add or remove anything. */
.web #addTracks, .web #addVideos, .web #addPhotos, .web #newGig, .web #editSocial,
.web #newAlbum, .web #newFeature, .web #editBio, .web .icon-btn, .web .photo-remove { display: none !important; }
.web .drag { height: 18px; -webkit-app-region: none; }
.web .m-top { display: none; }
.web .nav-btn.empty-page { display: none; }

.web-toast {
  position: fixed; left: 50%; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 80;
  width: max-content; max-width: min(520px, calc(100vw - 32px));
  background: rgba(16, 18, 28, .96); color: var(--text); border: 1px solid var(--accent); border-radius: 12px;
  padding: 12px 16px; font-size: 14px; line-height: 1.4; box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
}

/* Phones and small tablets: logo on top, page in the middle, player and menu at the bottom. */
@media (max-width: 900px) {
  html, body { height: 100%; overflow: hidden; }
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto auto;
    height: 100%;
  }
  .main { grid-row: 1; padding-top: env(safe-area-inset-top, 0px); }
  .web .drag { display: none; }
  .web .m-top {
    display: flex; justify-content: center; padding: 10px 16px 4px;
    position: sticky; top: 0; z-index: 5; background: rgba(7, 8, 13, .7); backdrop-filter: blur(14px);
  }
  .web .m-top img { height: 46px; width: auto; }
  .view { padding: 0 max(16px, env(safe-area-inset-left, 0px)) 28px max(16px, env(safe-area-inset-right, 0px)); }
  .view-head { margin: 14px 0 18px; flex-wrap: wrap; }
  h1 { font-size: 26px; }

  .player { grid-row: 2; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 8px 12px; height: auto; }
  .player .seek, .player .volume, .player #shuffleBtn, .player #repeatBtn { display: none; }
  .now-art { width: 40px; height: 40px; }
  .controls { align-items: flex-end; }
  .buttons { gap: 8px; }

  .sidebar {
    grid-row: 3; flex-direction: row; padding: 4px 6px calc(4px + env(safe-area-inset-bottom, 0px));
    border-right: 0; border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .sidebar .drag, .brand, .next-gig { display: none; }
  .nav { flex-direction: row; overflow-x: auto; gap: 2px; width: 100%; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav-btn {
    flex-direction: column; gap: 2px; padding: 6px 10px; font-size: 11px; white-space: nowrap; flex: 0 0 auto; text-align: center;
  }
  .nav-btn span { width: auto; font-size: 18px; }

  .grid2 { grid-template-columns: 1fr; }
  .span2 { grid-column: auto; }
  .bio-hero { flex-direction: column; align-items: flex-start; gap: 16px; }
  .bio-name { font-size: 28px; }
  .album-hero { flex-direction: column; align-items: flex-start; }
  .album-cover { width: 150px; height: 150px; }
  .album-title { font-size: 24px; }
  .album-players { grid-template-columns: 1fr; }
  .mix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .social-grid, .book-contact { grid-template-columns: 1fr; }
  .feature-card { grid-template-columns: 1fr; }
  .lb-prev, .lb-next { display: none; }
  .np { padding: 50px 20px; }
  .web-toast { bottom: calc(130px + env(safe-area-inset-bottom, 0px)); }
}