/* PHONE LAYOUT V2 — screenshot-driven, 2026-09-29
   Public MUSIC LAB only. Desktop/tablet source is untouched. */
@media (max-width:600px){
  html,body{width:100%;height:auto;min-height:100%;overflow-x:hidden!important;overflow-y:auto!important;-webkit-text-size-adjust:100%}
  body{min-height:100dvh}
  .app-shell{height:auto!important;min-height:100dvh!important;display:block!important;padding-bottom:76px!important}

  .topbar{
    position:sticky!important;top:0!important;z-index:40!important;
    height:auto!important;min-height:0!important;
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
    grid-template-areas:"brand actions" "artists artists"!important;
    gap:11px 10px!important;padding:11px 12px 9px!important;
    background:rgba(5,6,8,.94)!important
  }
  .brand{grid-area:brand!important;min-width:0!important;gap:10px!important}
  .brand-mark{width:32px!important;height:32px!important;flex:0 0 32px!important}
  .brand b{font-size:12px!important;white-space:nowrap!important}
  .brand small{font-size:6.5px!important;letter-spacing:.16em!important;white-space:nowrap!important}
  .top-actions{grid-area:actions!important;align-self:center!important}
  .scene-button,.icon-button{display:none!important}
  .sound-toggle{height:34px!important;border-radius:9px!important;padding:0 10px!important;font-size:7px!important}
  .artist-switch{
    grid-area:artists!important;width:100%!important;justify-content:flex-start!important;
    gap:6px!important;overflow-x:auto!important;overflow-y:hidden!important;
    padding:0!important;scrollbar-width:none!important;-webkit-overflow-scrolling:touch!important
  }
  .artist-switch::-webkit-scrollbar{display:none!important}
  .artist-pill{flex:0 0 auto!important;padding:8px 13px!important;font-size:9px!important}

  .workspace{display:block!important;grid-template-columns:1fr!important;min-height:0!important}
  .rail{display:none!important}
  .stage{overflow:visible!important;min-height:0!important}
  .panel{position:relative!important;inset:auto!important;min-height:0!important;overflow:visible!important;padding:16px 12px 96px!important}
  .panel:not(.active){display:none!important}
  .home-panel{padding:12px 10px 96px!important}

  .home-top{
    position:relative!important;display:block!important;
    width:100%!important;height:clamp(500px,66svh,590px)!important;min-height:500px!important;max-height:590px!important;
    border-radius:18px!important;overflow:hidden!important
  }
  .visual-reel{position:absolute!important;inset:0!important;min-height:0!important;width:100%!important;height:100%!important}
  .visual-reel video{width:100%!important;height:100%!important;object-fit:cover!important}
  .reel-topline{left:16px!important;right:16px!important;top:16px!important;font-size:7px!important;gap:8px!important}
  .reel-topline b{max-width:58%!important;text-align:right!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .visual-dots{left:16px!important;right:16px!important;bottom:18px!important}

  .artist-intro{
    position:absolute!important;z-index:4!important;left:0!important;right:0!important;bottom:0!important;
    max-width:none!important;padding:90px 18px 45px!important;
    background:linear-gradient(180deg,transparent 0%,rgba(4,5,7,.24) 16%,rgba(4,5,7,.82) 72%,rgba(4,5,7,.94) 100%)!important
  }
  .hero-kicker{font-size:7px!important;letter-spacing:.2em!important}
  .artist-intro h1{font-size:clamp(62px,18vw,78px)!important;line-height:.84!important;margin:13px 0 13px!important}
  .hero-subtitle{font-size:8px!important;line-height:1.45!important;margin:0 0 9px!important}
  .hero-tagline{font-size:12px!important;line-height:1.72!important;max-width:100%!important;margin:0!important}
  .hero-actions{margin-top:17px!important}
  .hero-actions .ghost{height:42px!important;padding:0 17px!important}
  .hero-meta{grid-template-columns:1fr 1fr!important;gap:0!important;margin-top:18px!important}
  .hero-meta>div{min-width:0!important;padding:11px 0!important}
  .hero-meta>div:nth-child(3){grid-column:1/-1!important}
  .hero-meta span{font-size:7px!important}
  .hero-meta b{font-size:10px!important;overflow-wrap:anywhere!important}

  .listen-room{margin-top:18px!important}
  .listen-head,.panel-head{display:block!important;margin-bottom:16px!important}
  .listen-head h2,.panel-head h2{font-size:29px!important;line-height:1.05!important}
  .listen-head p,.panel-head>p{margin-top:8px!important;text-align:left!important;font-size:10px!important;line-height:1.6!important}
  .track-list{grid-template-columns:1fr!important;max-height:none!important}
  .create-grid,.review-layout,.radar-grid,.dna-layout,.dna-summary{grid-template-columns:1fr!important}
  .module.span2{grid-column:auto!important}
  .source-flow,.analysis-grid{grid-template-columns:1fr!important}
  .form-row{grid-template-columns:1fr!important}
  input:not([type=range]),textarea,select{font-size:16px!important;min-height:44px!important}

  .player{
    position:fixed!important;z-index:60!important;left:0!important;right:0!important;bottom:0!important;
    height:76px!important;display:grid!important;grid-template-columns:50px minmax(0,1fr) 112px!important;
    gap:8px!important;padding:8px 10px calc(8px + env(safe-area-inset-bottom))!important;
    background:rgba(3,4,6,.97)!important
  }
  .now-art{width:48px!important;height:48px!important}
  .now-copy{min-width:0!important}
  .now-copy small{font-size:8px!important}
  .now-copy b{font-size:11px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .now-copy span{font-size:7px!important}
  .transport{justify-content:flex-end!important;gap:6px!important}
  .transport button{width:32px!important;height:32px!important}
  .transport .play{width:48px!important;height:48px!important}
  .timeline,.volume,.queue{display:none!important}
}
@media (max-width:390px){
  .brand small{display:none!important}
  .artist-pill{padding:8px 11px!important}
  .home-top{height:520px!important;min-height:520px!important}
  .artist-intro{padding-left:16px!important;padding-right:16px!important}
  .hero-tagline{font-size:11px!important}
  .player{grid-template-columns:46px minmax(0,1fr) 104px!important;padding-left:8px!important;padding-right:8px!important}
}