/* Phones and tablets (website). Loaded after mobile.css. The page switches by itself from the screen size and touch:
   tablets and narrow windows get the one-line header with the ☰ menu; phones (portrait, or landscape with a touch
   screen) also get the bottom bar, compact track cards, full-screen windows and a bottom sheet for line settings. */
#menu,.phone-tabs{display:none}

@media (max-width:1100px),(max-height:500px) and (pointer:coarse){
 header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:none;height:56px;min-height:0;padding:0 10px;gap:8px;align-items:center}
 .brand{width:62px}.logo{width:62px;height:28px}.logo img{width:74px;left:-6px;top:-23px}.brand-caption{display:none}
 .heading{grid-column:2;grid-row:1;position:static;left:auto;right:auto;text-align:center;min-width:0}
 .heading h1{font-size:17px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .heading>div{font-size:9px;letter-spacing:.5px;margin-top:2px;max-height:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .header-actions{grid-column:3;grid-row:1;display:flex;width:auto;gap:6px;justify-content:flex-end;min-width:0}
 .header-actions>*:not(#menu):not(#notifications){display:none!important}
 #menu,#notifications{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;height:44px;padding:4px 10px;font-size:19px;line-height:1}
 #home,#editor{height:calc(100dvh - 57px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}
 .phone-menu button{display:flex;align-items:center;gap:10px;text-align:left;font-size:16px;min-height:52px}
}

@media (max-width:760px),(max-height:500px) and (pointer:coarse){
 /* The track list */
 #home{padding:14px 12px 24px}
 body.home-screen #home{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
 .home-intro{gap:10px}.home-intro .eyebrow,.home-intro p{display:none}
 .home-intro h2{font-size:20px;line-height:1.2;margin:0}
 .home-intro .actions{display:flex;width:100%;gap:8px;flex-wrap:nowrap}.home-intro .actions button{flex:1;min-height:46px;font-size:14px;padding:8px}
 .library-heading{display:grid;grid-template-columns:1fr;gap:8px;margin:18px 0 12px}
 .library-heading h3{font-size:17px;margin:0}
 #search{width:100%;box-sizing:border-box;font-size:16px}
 .library-heading #cloud-sync,.library-heading #community,.library-heading #groups,.library-heading #friends{display:none}
 #track-list{grid-template-columns:1fr;gap:10px}
 .track-card{display:grid;grid-template-columns:92px minmax(0,1fr) 48px;align-items:center;border-radius:14px}
 .track-card .preview{grid-column:1;grid-row:1;height:70px;padding:6px}
 .track-card .preview img{max-height:100%}
 .track-card .info{grid-column:2;grid-row:1;padding:10px 4px 10px 12px;min-width:0}
 .track-card .card-tag{font-size:9px;letter-spacing:.8px}
 .track-card .info h3{font-size:16px;margin:3px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .track-card .info p{font-size:11px;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .track-card .pin{position:static;grid-column:3;grid-row:1;justify-self:center;min-width:44px;min-height:44px;padding:4px}
 .library-footer{font-size:11px}
 /* The bar at the bottom of the track list */
 body.home-screen .phone-tabs{display:flex}
 body.access-locked .phone-tabs{display:none}
 .phone-tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;justify-content:space-around;gap:2px;background:var(--panel);border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom));box-shadow:0 -6px 24px #0006}
 .phone-tabs .phone-tab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:54px;padding:4px 2px;border:0;border-radius:10px;background:transparent;color:var(--muted);font-size:11px}
 .phone-tabs .phone-tab:active{background:var(--raised,var(--line))}
 .phone-tabs .tab-icon{font-size:20px;line-height:1}
 .phone-tabs .tab-label{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .phone-tabs .group-badge{position:absolute;top:3px;left:calc(50% + 6px);font-size:10px;min-width:16px;padding:0 5px}
 /* Windows fill the screen */
 dialog,dialog.wide{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border:0;border-radius:0;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);box-sizing:border-box}
 .modal-head{padding:10px 12px;gap:8px}.modal-head h2{font-size:18px}
 #modal-close{min-width:44px;min-height:44px}
 #modal-body{padding:14px 12px 28px}
 /* The track screen: one scrolling row of options above the map, line settings as a sheet from the bottom */
 .mobile-nav{min-height:48px;padding:4px 10px}
 .workspace-bar{flex-direction:row;flex-wrap:nowrap;align-items:center;overflow-x:auto;gap:6px;padding:5px 8px;scrollbar-width:none}
 .workspace-bar>.actions{flex-wrap:nowrap;flex-shrink:0;overflow:visible}
 .workspace-bar>.actions:last-child{justify-content:flex-start}
 .workspace-bar button{min-height:38px}
 #settings-panel{top:auto;left:0;right:0;bottom:0;width:auto;max-height:72dvh;border-radius:18px 18px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom))}
 .settings-open #settings-panel{top:auto}
 .editor-footer{padding:5px 10px}
}