/*
 * OSANIME Music Responsive Unified v209
 * Mobile-first compatibility layer for the mixed-generation Music pages.
 * Loaded after each page's legacy/page CSS and music-stage12.css.
 * The global header-modern-v208 layer remains untouched and continues to own the main header.
 */

:root{
  --omu-edge:14px;
  --omu-radius:18px;
  --omu-touch:44px;
  --omu-line:rgba(148,163,184,.14);
  --omu-surface:#0b1729;
  --omu-muted:#94a3b8;
}

/* Keep the shared Music sub-navigation predictable across every Music surface. */
.music12-nav-wrap{max-width:1280px}
.music12-nav{scroll-snap-type:x proximity;scroll-padding-inline:8px}
.music12-nav>a{scroll-snap-align:start}

/* Avoid long translated labels or metadata creating horizontal page overflow. */
:where(
  .music-collection-page,.music-entities-page,.music-radio-page,.music-playlists-page,
  .music-discovery-page,.music-mixes-page,.music-recommendations-page,.music-insights-page,
  .music-taste-page,.music-history-page,.favorite-page,.music-hitz-page
) :where(h1,h2,h3,strong,p,small,span,a){overflow-wrap:anywhere}

:where(
  .mc13-shell,.me8-wrap,.mr14-shell,.mpl7-wrap,.md11-shell,.mm18-shell,
  .mr12-shell,.mi19-shell,.mt17-shell,.mh6-wrap
){box-sizing:border-box}

:where(
  .mc13-hero,.me8-hero,.me8-profile,.mr14-hero,.mpl7-hero,.md11-hero,
  .mm18-hero,.mr12-hero,.mi19-hero,.mt17-hero
){min-width:0}

:where(
  .mc13-section,.me8-section,.mr14-section,.mpl7-panel,.md11-section,
  .mm18-card,.mr12-section,.mi19-card,.mt17-section
){min-width:0}

/* Tablet: one consistent edge rhythm instead of each legacy stylesheet using a different width. */
@media (max-width:900px){
  :root{--omu-edge:14px}

  .music12-nav-wrap{
    width:auto!important;
    margin:10px var(--omu-edge) 0!important;
    padding:0!important;
  }
  .music12-nav{
    padding:5px!important;
    gap:5px!important;
    border-radius:15px!important;
  }
  .music12-nav a{
    min-height:var(--omu-touch)!important;
    padding:0 12px!important;
    border-radius:11px!important;
    font-size:12px!important;
  }

  :where(
    .mc13-shell,.me8-wrap,.mr14-shell,.mpl7-wrap,.md11-shell,.mm18-shell,
    .mr12-shell,.mi19-shell,.mt17-shell,.mh6-wrap
  ){
    width:auto!important;
    max-width:none!important;
    margin-left:var(--omu-edge)!important;
    margin-right:var(--omu-edge)!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  :where(
    .mc13-hero,.me8-hero,.mr14-hero,.mpl7-hero,.md11-hero,.mm18-hero,
    .mr12-hero,.mi19-hero,.mt17-hero
  ){
    padding:20px!important;
    border-radius:21px!important;
    gap:18px!important;
  }

  :where(
    .mc13-hero,.me8-hero,.mr14-hero,.mpl7-hero,.md11-hero,.mm18-hero,
    .mr12-hero,.mi19-hero,.mt17-hero
  ) h1{
    font-size:clamp(1.75rem,7vw,2.4rem)!important;
    line-height:1.08!important;
  }

  :where(
    .mc13-section,.me8-section,.mr14-section,.mpl7-panel,.md11-section,
    .mm18-card,.mr12-section,.mi19-card,.mt17-section
  ){
    border-radius:17px!important;
  }

  :where(
    .mc13-head,.me8-head,.mr14-head,.mpl7-head,.md11-head,.mr12-head,
    .mi19-card>header,.mt17-head
  ){
    min-width:0;
    flex-wrap:wrap;
  }

  :where(
    .mc13-links a,.mc13-card button,.me8-primary,.me8-search button,
    .mr14-primary,.mr14-actions button,.mpl7-actions a,.mpl7-actions button,
    .md11-search button,.mm18-hero-actions a,.mm18-refresh,.mm18-play-mix,
    .mr12-hero-actions a,.mr12-hero-actions button,.mt17-hero-actions a,
    .mt17-hero-actions button,.mt17-head-actions button,.mi19-period a
  ){
    min-height:var(--omu-touch)!important;
  }

  /* Entity index/detail: make artist/album pages compact instead of a tall centered mobile poster. */
  .me8-profile{
    grid-template-columns:112px minmax(0,1fr)!important;
    align-items:center!important;
    gap:16px!important;
    padding:17px!important;
    text-align:left!important;
    border-radius:20px!important;
  }
  .me8-profile>img{
    width:112px!important;
    height:112px!important;
    margin:0!important;
  }
  .me8-profile .me8-meta{justify-content:flex-start!important;margin:10px 0!important;gap:8px!important}
  .me8-profile h1{font-size:clamp(1.65rem,7vw,2.25rem)!important}
  .me8-profile p{font-size:.9rem;line-height:1.55}
  .me8-section{padding:15px!important}
  .me8-search{padding:7px!important;border-radius:14px!important}

  /* List rows: metadata gets the width; controls move below rather than crushing titles. */
  .me8-track-list li{
    grid-template-columns:46px minmax(0,1fr)!important;
    gap:9px!important;
    padding:10px 4px!important;
  }
  .me8-track-list .num{display:none!important}
  .me8-track-list img{width:46px!important;height:46px!important}
  .me8-track-list .actions{
    grid-column:2!important;
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
  }

  /* Buttons in hero clusters wrap cleanly instead of becoming tiny pills. */
  :where(.mr12-hero-actions,.mm18-hero-actions,.mt17-hero-actions,.mpl7-actions){
    width:100%!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  :where(.mr12-hero-actions,.mm18-hero-actions,.mt17-hero-actions,.mpl7-actions)>*{
    width:100%!important;
    justify-content:center!important;
    min-width:0!important;
  }

  /* Insight controls should not force the hero wider than the viewport. */
  .mi19-period{width:100%!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .mi19-period a{min-width:0!important}
}

@media (max-width:620px){
  :root{--omu-edge:10px}

  .music12-nav-wrap{margin-top:8px!important}
  .music12-nav{border-radius:14px!important}
  .music12-nav a{padding:0 11px!important;font-size:11px!important}
  .music12-nav i{font-size:12px!important}

  :where(
    .mc13-shell,.me8-wrap,.mr14-shell,.mpl7-wrap,.md11-shell,.mm18-shell,
    .mr12-shell,.mi19-shell,.mt17-shell,.mh6-wrap
  ){
    margin-top:12px!important;
    margin-bottom:max(110px,calc(84px + env(safe-area-inset-bottom)))!important;
  }

  :where(
    .mc13-hero,.me8-hero,.mr14-hero,.mpl7-hero,.md11-hero,.mm18-hero,
    .mr12-hero,.mi19-hero,.mt17-hero
  ){
    padding:17px!important;
    border-radius:18px!important;
  }

  :where(
    .mc13-section,.me8-section,.mr14-section,.mpl7-panel,.md11-section,
    .mm18-card,.mr12-section,.mi19-card,.mt17-section
  ){
    padding:12px!important;
    margin-top:12px!important;
    border-radius:15px!important;
  }

  /* Library */
  .mc13-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .mc13-stat{min-width:0!important;padding:11px 9px!important}
  .mc13-track-grid{grid-template-columns:1fr!important}
  .mc13-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .mc13-card{padding:8px!important}
  .mc13-card button{width:100%!important}

  /* Albums + Artists index/details */
  .me8-entity-grid,.me8-album-grid{grid-template-columns:1fr!important;gap:9px!important}
  .me8-artist-card,.me8-album-card{
    display:grid!important;
    grid-template-columns:64px minmax(0,1fr)!important;
    align-items:center!important;
    gap:11px!important;
    padding:9px!important;
  }
  .me8-artist-card img,.me8-album-card img{
    width:64px!important;
    height:64px!important;
    aspect-ratio:1!important;
    margin:0!important;
  }
  .me8-album-card img{border-radius:10px!important}
  .me8-artist-card img{border-radius:50%!important}
  .me8-pages{overflow-x:auto!important;justify-content:flex-start!important;padding-bottom:4px!important;scrollbar-width:none}
  .me8-pages::-webkit-scrollbar{display:none}

  /* Discovery / For You: two-column artwork grid is readable without huge vertical cards. */
  .md11-track-grid,.mr12-track-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .md11-artist-grid,.md11-album-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  .mr12-continue-grid{grid-template-columns:1fr!important}
  .mr12-favorite-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Radio */
  .mr14-grid{grid-template-columns:1fr!important}
  .mr14-list article{min-width:0!important}
  .mr14-feedback{grid-column:1/-1!important;justify-content:stretch!important}
  .mr14-feedback button{flex:1!important;justify-content:center!important}

  /* Playlists */
  .mpl7-grid,.mpl7-detail-grid{grid-template-columns:1fr!important}
  .mpl7-cards{grid-template-columns:1fr!important}
  .mpl7-card{grid-template-columns:62px minmax(0,1fr)!important}
  .mpl7-card img{width:62px!important;height:62px!important}

  /* Mixes */
  .mm18-list article{min-width:0!important}

  /* Insights */
  .mi19-metrics,.mi19-all>div{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .mi19-grid{grid-template-columns:1fr!important}
  .mi19-list article{grid-template-columns:18px 42px minmax(0,1fr) auto!important;gap:8px!important}
  .mi19-list img{width:42px!important;height:42px!important}

  /* Taste */
  .mt17-summary-grid,.mt17-list{grid-template-columns:1fr!important}
  .mt17-toolbar label{width:100%!important}
  .mt17-head{flex-direction:column!important;align-items:stretch!important}
  .mt17-head-actions{width:100%!important;justify-content:stretch!important}

  /* Hero action groups: one control per row on compact phones. */
  :where(.mr12-hero-actions,.mm18-hero-actions,.mt17-hero-actions,.mpl7-actions){
    grid-template-columns:1fr!important;
  }
}

@media (max-width:430px){
  :root{--omu-edge:8px}

  .music12-nav-wrap{margin-left:8px!important;margin-right:8px!important}
  .music12-nav a{min-height:42px!important;padding:0 10px!important}

  .me8-profile{
    grid-template-columns:88px minmax(0,1fr)!important;
    gap:12px!important;
    padding:13px!important;
  }
  .me8-profile>img{width:88px!important;height:88px!important}
  .me8-profile h1{font-size:1.55rem!important}
  .me8-profile .me8-meta{font-size:.76rem!important}

  .mc13-grid{gap:7px!important}
  .mc13-card strong{font-size:.84rem!important}
  .mc13-card small{font-size:.7rem!important}

  .md11-track-grid,.mr12-track-grid{gap:8px!important}

  .mi19-period{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
  .mi19-period a{padding:8px 5px!important;font-size:.75rem!important}

  .mt17-stats{grid-template-columns:1fr!important}
  .mt17-stats article{display:grid!important;grid-template-columns:34px 1fr!important;text-align:left!important}
  .mt17-stats article>i{margin:0!important}
}

@media (max-width:350px){
  .mc13-grid,.md11-track-grid,.mr12-track-grid,.md11-artist-grid,.md11-album-grid,.mr12-favorite-row{grid-template-columns:1fr!important}
  .me8-profile{grid-template-columns:72px minmax(0,1fr)!important}
  .me8-profile>img{width:72px!important;height:72px!important}
}

@media (prefers-reduced-motion:reduce){
  .music12-nav{scroll-behavior:auto!important}
}