/* Pull handles remain reachable while the mobile bars slide beyond the viewport. */
.private-mobile-topbar,.private-bars-handle{display:none}
@media(max-width:700px), (max-width:900px) and (max-height:500px){
  body.private-bars-mobile{--private-topbar-height:calc(64px + env(safe-area-inset-top,0px));--private-bars-speed:300ms}
  body[data-private-bars-mode=quick]{--private-bars-speed:160ms}
  body.private-bars-mobile main{padding-top:calc(var(--private-topbar-height) + 22px)!important}
  .private-mobile-topbar{display:flex;align-items:center;gap:10px;position:fixed;z-index:27;inset:0 0 auto;height:var(--private-topbar-height);padding:env(safe-area-inset-top,0px) max(12px,env(safe-area-inset-right,0px)) 0 max(12px,env(safe-area-inset-left,0px));background:#07080cf2;box-shadow:0 8px 24px #0003;transition:transform var(--private-bars-speed) ease;isolation:isolate}
  .private-mobile-topbar-title{flex:1;font-weight:650;font-size:15px;color:#f4eefb;min-width:0}
  .private-bars-button{display:grid;place-items:center;flex:none;width:44px;height:44px;min-width:44px;padding:10px;border:0;background:transparent;border-radius:50%;color:#f2edf8}
  .private-bars-button svg{width:24px;height:24px}
  #private-mobile-navigation .brand-bars{width:26px;height:30px;gap:3px}
  #private-mobile-navigation .brand-bars i{width:3px;background:#f2edf8}
  .private-mobile-topbar .private-account{position:static;margin:0}
  .private-mobile-topbar .private-account-button{width:48px;height:48px}
  /* A transformed ancestor would incorrectly anchor the fixed account menu. */
  .private-mobile-topbar:not([inert]){transform:none}
  #private-player.player{z-index:27;transition:transform var(--private-bars-speed) ease}
  body.private-bars-collapsed .private-mobile-topbar{transform:translateY(-110%);pointer-events:none}
  body.private-bars-collapsed #private-player{transform:translateY(110%);pointer-events:none}
  .private-bars-handle{display:grid;place-items:center;position:fixed;z-index:28;left:50%;transform:translateX(-50%);width:80px;min-width:80px;height:44px;padding:0;border:0;border-radius:22px;background:transparent;touch-action:manipulation;transition:top var(--private-bars-speed) ease,bottom var(--private-bars-speed) ease}
  .private-bars-handle>span{display:block;width:68px;height:22px;border:1px solid #ffffff17;border-radius:20px;background:#090c12df;box-shadow:0 3px 14px #0005;position:relative}
  .private-bars-handle>span:after{content:'';position:absolute;inset:7px 17px;border-radius:8px;background:#e9eaf0}
  .private-bars-handle:hover{background:transparent}
  .private-bars-handle:focus-visible{outline:2px solid #ccb0ff;outline-offset:-3px}
  .private-bars-handle.is-top{top:calc(var(--private-topbar-height) - 10px)}
  .private-bars-handle.is-bottom{bottom:calc(var(--private-mobile-player-height,82px) + env(safe-area-inset-bottom,0px) - 10px)}
  body.private-bars-collapsed .private-bars-handle.is-top{top:env(safe-area-inset-top,0px)}
  body.private-bars-collapsed .private-bars-handle.is-bottom{bottom:env(safe-area-inset-bottom,0px)}
  body.private-nav-slim .private-sidebar{top:var(--private-topbar-height);transition:transform var(--private-bars-speed) ease,visibility var(--private-bars-speed) ease}
  body.private-slim-auto-hidden .private-sidebar{transform:translateX(-110%);visibility:hidden;pointer-events:none}
  .private-bars-handle.is-rail{left:0;top:50%;transform:translateY(-50%);width:44px;min-width:44px;height:76px}
  .private-bars-handle.is-rail>span{width:22px;height:60px;border-radius:0 14px 14px 0;margin-right:22px}
  .private-bars-handle.is-rail>span:after{inset:17px 8px 17px 6px}
  body:is(.private-nav-open,.private-preview-open) :is(.private-mobile-topbar,.private-bars-handle),body.private-theater-active :is(.private-mobile-topbar,.private-bars-handle){visibility:hidden;pointer-events:none}
  body:has(dialog[open]) .private-bars-handle{visibility:hidden;pointer-events:none}
  @media(prefers-reduced-motion:reduce){.private-mobile-topbar,#private-player.player,.private-bars-handle,body.private-nav-slim .private-sidebar{transition:none!important}}
}

/* Browser-history controls are distinct from the collection's page controls. */
.browse-history,#browse-forward{display:none!important}
@media(max-width:700px), (max-width:900px) and (max-height:500px){
  #private-mobile-topbar #browse-back{display:grid;width:44px;height:44px;min-width:44px;flex:0 0 44px;padding:10px;margin:0;background:transparent;border:0;border-radius:50%}
  #private-mobile-topbar #browse-back:disabled{opacity:.3}
  .private-mobile-topbar{gap:6px}
  .private-mobile-topbar-title{line-height:1.15;font-size:14px}
  .private-tools-disclosure{display:block!important;width:100%;margin:8px 0 16px;padding:0;border:1px solid #ffffff14;border-radius:18px;background:#131219}
  .private-tools-disclosure>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px 14px;list-style:none;cursor:pointer;color:#e6dff1;font-size:13px;font-weight:600}
  .private-tools-disclosure>summary::-webkit-details-marker{display:none}
  .private-tools-disclosure>summary::marker{content:''}
  .private-tools-disclosure>summary>svg{width:24px;height:24px}
  .private-tools-disclosure>summary:focus-visible{outline:2px solid #cdb3ff;outline-offset:2px;border-radius:16px}
  .private-tools-disclosure[open]>summary{border-bottom:1px solid #ffffff0f}
  .private-tools-disclosure .private-mobile-tools{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:'import add' 'genre manage' 'view view';gap:8px;padding:12px}
  .private-tools-disclosure .private-mobile-tools>button{width:100%;min-width:0;height:48px;padding:10px;gap:8px;justify-content:flex-start;font-size:12px}
  .private-tools-disclosure .private-control-label{display:inline;white-space:normal}
  .private-tools-disclosure #itunes{grid-area:import}.private-tools-disclosure #upload{grid-area:add}
  .private-tools-disclosure #private-mobile-genres{grid-area:genre}.private-tools-disclosure #manage-items{grid-area:manage}
  .private-tools-disclosure #private-mobile-view{grid-area:view;width:100%;justify-content:stretch}
  .private-tools-disclosure #private-mobile-view>button{flex:1;min-height:44px}
  .browse-tools{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:8px;align-items:center}
  .browse-tools>#collection-play{grid-column:3;grid-row:1;display:grid;place-items:center;width:48px;height:48px;min-width:48px;min-height:48px;margin:0;padding:0;border-radius:50%!important;font-size:0;color:#fff!important}
  .browse-tools>#collection-play::before{content:'';display:block;width:22px;height:22px;background:currentColor;clip-path:polygon(24% 8%,92% 50%,24% 92%)}
  .browse-tools>.collection-actions{grid-column:2;grid-row:1;width:auto;min-width:0;justify-content:center;margin:0}
  .private-panel-edge,#private-rail-handle{transition:opacity .18s ease,visibility .18s ease}
  body.private-edges-moving :is(.private-panel-edge,#private-rail-handle){opacity:0;visibility:hidden;pointer-events:none;transition:none}
  @media(prefers-reduced-motion:reduce){.private-panel-edge,#private-rail-handle{transition:none!important}}
}
