/* MYXX FM v28.1.6 mobile refinement
   Visual master remains v28.1.3. This layer only adapts the approved components
   for narrow/touch viewports and short phone landscape screens. */

@media (max-width:760px){
  :root{
    --mobile-gutter:14px;
    --dock-h:64px;
  }

  html{scroll-padding-top:88px}
  body{
    font-size:14px!important;
    padding-bottom:calc(var(--dock-h) + max(18px,env(safe-area-inset-bottom)))!important;
  }

  /* Shell: same header, better touch geometry and safe areas. */
  .site-header{
    top:max(8px,env(safe-area-inset-top))!important;
    width:calc(100% - 18px)!important;
    min-height:68px!important;
    height:68px!important;
    grid-template-columns:78px minmax(0,1fr) auto!important;
    gap:8px!important;
    padding:0 9px 0 11px!important;
    border-radius:22px!important;
  }
  .brand-link{width:78px!important;min-width:78px!important}
  .brand-link img{width:78px!important}
  .header-actions{gap:7px!important}
  .live-button{
    min-height:44px!important;
    padding:0 12px!important;
    font-size:.64rem!important;
    gap:6px!important;
  }
  .menu-button{
    width:44px!important;
    height:44px!important;
    border-radius:15px!important;
  }
  .menu-button svg{width:20px!important;height:20px!important}
  .mobile-menu-panel{
    top:max(8px,env(safe-area-inset-top))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    width:min(430px,calc(100% - 16px))!important;
    padding:16px!important;
    border-radius:26px!important;
  }
  .menu-head{min-height:88px!important;padding-bottom:14px!important}
  .menu-head img{width:148px!important}
  .mobile-nav{gap:7px!important;padding:16px 0!important}
  .mobile-nav a{min-height:64px!important;padding:10px!important;border-radius:18px!important}
  .mobile-nav strong{font-size:1rem!important}
  .mobile-nav small{font-size:.72rem!important}

  /* Type: undo the old "shrink desktop until it fits" mobile pass. */
  .eyebrow{font-size:.61rem!important;letter-spacing:.145em!important}
  .lead-copy{font-size:.88rem!important;line-height:1.55!important;max-width:38rem!important}
  .primary-action,.secondary-action{
    min-height:44px!important;
    padding:0 14px!important;
    font-size:.70rem!important;
    gap:7px!important;
  }
  .primary-action svg,.secondary-action svg{width:15px!important;height:15px!important}
  .text-action{font-size:.72rem!important;min-height:36px}
  .chip{font-size:.60rem!important;padding:6px 9px!important}

  /* Home hero: same ingredients, genuinely mobile composition. */
  .hero{
    grid-template-columns:1fr!important;
    gap:14px!important;
    padding:18px 0 44px!important;
    overflow:visible!important;
  }
  .hero-copy{
    width:100%!important;
    max-width:100%!important;
    padding-left:4px!important;
    padding-right:4px!important;
  }
  .hero-wordmark{max-width:154px!important}
  .hero-statement{
    width:fit-content!important;
    max-width:min(100%,360px)!important;
    margin:8px 0 14px!important;
    padding:13px 18px 20px 13px!important;
    border-radius:20px!important;
    font-size:clamp(2.35rem,11.2vw,3.35rem)!important;
    line-height:1!important;
  }
  .hero-statement span,.hero-statement strong{
    line-height:1.08!important;
    padding-bottom:.12em!important;
  }
  .hero .action-row{gap:9px!important;margin-top:16px!important;flex-wrap:wrap!important}
  .hero-meta{gap:6px!important;margin-top:13px!important;flex-wrap:wrap!important}
  .hero-meta span{font-size:.56rem!important;padding:6px 8px!important}
  .art-sculpture{
    width:100%!important;
    min-height:342px!important;
    padding-inline:18px!important;
    margin-top:-2px!important;
  }
  .art-rings{width:min(94vw,390px)!important}
  .art-card{
    width:min(70vw,278px)!important;
    max-width:278px!important;
    border-radius:30px!important;
  }
  .art-card>img{border-radius:24px!important}
  .show-note{
    width:112px!important;
    max-width:112px!important;
    right:2%!important;
    top:6%!important;
    padding:10px!important;
    border-radius:6px 16px 16px!important;
  }
  .show-note small{font-size:.50rem!important}
  .show-note strong{font-size:.75rem!important;line-height:1.1!important}
  .show-note span{font-size:.58rem!important}
  .track-glass{
    left:3%!important;
    right:3%!important;
    bottom:-30px!important;
    padding:12px 13px!important;
    border-radius:19px!important;
  }
  .track-glass small{font-size:.52rem!important}
  .track-glass h2{font-size:1.2rem!important;line-height:1.08!important;margin-top:4px!important}
  .track-glass p{font-size:.70rem!important}
  .track-progress{margin-top:10px!important}

  /* Section rhythm and headings. */
  .section{padding:44px 0!important}
  .section-head{gap:14px!important;margin-bottom:20px!important}
  .section-head h2{font-size:clamp(2.55rem,12vw,3.45rem)!important}
  .section-head p{font-size:.82rem!important;line-height:1.45!important;max-width:190px!important}
  .track-head-tools{max-width:210px!important}

  /* Current host: same card, stacked when horizontal space is no longer useful. */
  .host-feature{
    grid-template-columns:1fr!important;
    min-height:0!important;
    border-radius:24px!important;
  }
  .host-portrait{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:4/5!important;
  }
  .host-portrait:after{background:linear-gradient(0deg,#0b0b10 0,rgba(11,11,16,.58) 20%,transparent 52%)!important}
  .host-copy{padding:24px 20px 22px!important}
  .host-copy:before{right:8px!important;top:20px!important;font-size:4.6rem!important}
  .host-copy h2{font-size:clamp(3.15rem,15vw,4.25rem)!important;line-height:.94!important}
  .host-copy h3{font-size:1.02rem!important;margin-top:7px!important}
  .host-copy>p{font-size:.88rem!important;line-height:1.56!important;max-width:36rem!important}
  .host-copy .action-row{gap:9px!important;margin-top:16px!important;flex-wrap:wrap!important}
  .next-up{
    grid-template-columns:52px 1fr!important;
    gap:10px!important;
    margin-top:18px!important;
    padding:10px!important;
    border-radius:16px!important;
  }
  .next-up img{width:52px!important;height:52px!important;border-radius:13px!important}
  .next-up small{font-size:.52rem!important}
  .next-up strong{font-size:.77rem!important;line-height:1.15!important}
  .next-up span{font-size:.66rem!important}

  /* Recently Played keeps its horizontal visual language, but text is readable. */
  .track-rail{--track-gap:12px!important;gap:12px!important;grid-auto-columns:min(74vw,280px)!important;padding:6px 0 16px 2px!important}
  .track-card h3{font-size:.82rem!important;line-height:1.15!important;margin-top:8px!important}
  .track-card p,.track-card time{font-size:.66rem!important;line-height:1.3!important}
  .track-index{font-size:.58rem!important;padding:4px 7px!important;top:7px!important;left:7px!important}
  .track-rail-empty{min-height:190px!important;padding:24px 20px!important;border-radius:20px!important}
  .track-rail-empty strong{font-size:1rem!important}
  .track-rail-empty span{font-size:.78rem!important;line-height:1.45!important;max-width:28rem}
  .track-rail-controls button{width:42px!important;height:42px!important;border-radius:14px!important}

  /* Pulse: preserve the editorial card, remove needless mobile dead space. */
  .pulse-lead-home,.pulse-lead-inner{min-height:0!important}
  .pulse-editorial-home{padding:22px!important;border-radius:24px!important}
  .pulse-lead-inner{padding:0!important;gap:18px!important}
  .pulse-lead-inner h2{font-size:clamp(3.15rem,15vw,4.2rem)!important}
  .pulse-lead-intro>p:not(.eyebrow){font-size:.84rem!important;line-height:1.5!important}
  .pulse-story-home{margin-top:18px!important;padding:14px!important;border-radius:18px!important}
  .pulse-story-home h3,.pulse-story-feature-copy h3{font-size:1.12rem!important;line-height:1.12!important}
  .pulse-story-home p{font-size:.78rem!important;line-height:1.48!important}
  .story-label{font-size:.55rem!important}
  .pulse-headline-row{min-height:74px!important;padding:10px!important}
  .pulse-headline-row strong{font-size:.76rem!important;line-height:1.3!important}
  .pulse-headline-row small{font-size:.53rem!important}

  /* Weather + listener map: never squeeze a weather card into a 100px rail. */
  .utility-stack{
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    gap:12px!important;
  }
  .weather-block{
    min-height:190px!important;
    padding:22px!important;
    border-radius:24px!important;
  }
  .weather-temp{font-size:4.5rem!important}
  .weather-icon{width:68px!important;height:68px!important}
  .weather-block h3{font-size:1.05rem!important;line-height:1.15!important}
  .weather-block p{font-size:.78rem!important;line-height:1.4!important}
  .world-block-map{
    grid-template-areas:"copy" "list" "map"!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto minmax(250px,38vh)!important;
    gap:16px!important;
    min-height:0!important;
    padding:22px!important;
    border-radius:24px!important;
  }
  .world-map-copy{gap:10px!important}
  .world-block-map .world-map-copy h3{
    font-size:clamp(2.15rem,10.5vw,3rem)!important;
    line-height:.94!important;
    max-width:13ch!important;
  }
  .world-subcopy{font-size:.80rem!important;line-height:1.45!important;max-width:32rem}
  .world-insights{gap:10px!important}
  .world-metrics{gap:8px!important}
  .world-metrics span{padding:10px!important;border-radius:12px!important}
  .world-metrics b{font-size:.88rem!important}
  .world-metrics small{font-size:.54rem!important;margin-top:4px!important}
  .listener-map-shell{min-height:250px!important;height:auto!important;border-radius:20px!important}
  .listener-map-canvas{min-height:250px!important}
  .listener-map-controls button{min-width:40px!important;min-height:40px!important}
  .listener-map-hint{font-size:.52rem!important}
  .listener-map-readout{left:10px!important;right:10px!important;bottom:10px!important;padding:10px 12px!important}
  .listener-map-readout small{font-size:.50rem!important}
  .listener-map-readout strong{font-size:.76rem!important}
  .listener-map-readout span{font-size:.59rem!important}

  /* Instant Request: approved two-part card, but legible. */
  .request-promo{
    grid-template-columns:minmax(0,1.15fr) minmax(116px,.85fr)!important;
    gap:16px!important;
    min-height:330px!important;
    padding:24px!important;
    border-radius:24px!important;
  }
  .request-promo h2{font-size:clamp(2.8rem,13.4vw,3.8rem)!important;line-height:.92!important}
  .request-promo p{font-size:.79rem!important;line-height:1.48!important}
  .request-logo-orbit{width:min(34vw,154px)!important}

  /* REMYXX remains the same visual card, with usable text/actions. */
  .remyxx-feature{
    grid-template-columns:minmax(126px,.82fr) minmax(0,1.18fr)!important;
    gap:18px!important;
    min-height:360px!important;
    padding:24px!important;
    border-radius:24px!important;
  }
  .remyxx-cover{width:min(34vw,150px)!important;max-width:150px!important}
  .remyxx-copy h2{font-size:clamp(2.75rem,13vw,3.65rem)!important;line-height:.92!important}
  .remyxx-copy>p{font-size:.79rem!important;line-height:1.5!important}
  .remyxx-copy .chip-row{gap:6px!important;margin-top:12px!important}
  .remyxx-copy .action-row{gap:8px!important;flex-wrap:wrap!important;margin-top:14px!important}

  /* Footer: same information, mobile reading order instead of three tiny columns. */
  .site-footer{
    width:calc(100% - 24px)!important;
    padding:42px 0 calc(88px + env(safe-area-inset-bottom))!important;
  }
  .footer-brand{
    align-items:center!important;
    gap:18px!important;
    padding-bottom:24px!important;
  }
  .footer-brand img{width:132px!important;flex:0 0 auto}
  .footer-brand-copy strong{font-size:1.55rem!important;line-height:1!important}
  .footer-brand-copy span{font-size:.73rem!important}
  .footer-grid{
    grid-template-columns:minmax(0,1fr) 1fr!important;
    gap:24px 20px!important;
    padding:28px 0 24px!important;
  }
  .footer-grid>div:first-child{grid-column:1/-1}
  .footer-grid h2{font-size:1.8rem!important;line-height:1!important}
  .footer-grid p{font-size:.80rem!important;line-height:1.5!important;max-width:34rem}
  .footer-grid a,.footer-grid button{font-size:.76rem!important;min-height:34px!important}
  .footer-nav{gap:5px!important}
  .footer-bottom{gap:12px!important;flex-wrap:wrap!important;font-size:.62rem!important}

  /* Compact live player: more readable without becoming a slab. */
  .player-dock{
    bottom:max(7px,env(safe-area-inset-bottom))!important;
    width:calc(100% - 14px)!important;
    min-height:64px!important;
    grid-template-columns:44px minmax(0,1fr) auto!important;
    gap:9px!important;
    padding:7px!important;
    border-radius:19px!important;
  }
  .dock-art{width:44px!important;height:44px!important;border-radius:12px!important}
  .dock-copy strong{font-size:.74rem!important;line-height:1.15!important}
  .dock-copy span{font-size:.62rem!important;line-height:1.2!important}
  .dock-action{width:38px!important;height:38px!important;border-radius:12px!important}
  .dock-play{width:44px!important;height:44px!important}

  /* Request/search and secondary pages: keep components, stop shrinking them to unreadability. */
  .masthead{grid-template-columns:1fr!important;gap:16px!important;min-height:0!important;padding:34px 0 34px!important}
  .masthead h1{font-size:clamp(3.15rem,15vw,4.25rem)!important}
  .masthead p{font-size:.88rem!important;line-height:1.5!important;max-width:34rem}
  .request-hero{grid-template-columns:1fr!important;gap:24px!important;padding:24px 0 44px!important}
  .request-hero h1{font-size:clamp(3rem,14.5vw,4.15rem)!important}
  .request-hero-copy p:not(.eyebrow){font-size:.88rem!important;line-height:1.5!important}
  .request-art-card{width:min(72vw,290px)!important;max-width:290px!important;justify-self:center!important}
  .request-side,.request-main{padding:20px!important}
  .request-status h2{font-size:1.65rem!important}
  .search-intro h3{font-size:2.25rem!important}
  .search-intro p{font-size:.82rem!important;line-height:1.45!important}
  .progress-step span{font-size:.62rem!important}
  .search-bar input{height:48px!important;font-size:.88rem!important;padding-inline:14px!important}
  .search-bar button{width:48px!important;height:48px!important}
  .request-result{grid-template-columns:50px minmax(0,1fr) auto!important;gap:10px!important;padding:10px!important}
  .request-result img{width:50px!important;height:50px!important}
  .request-result strong{font-size:.80rem!important}
  .request-result p{font-size:.68rem!important}
  .request-result em{font-size:.58rem!important}
  .request-side-panel h3{font-size:1.05rem!important}
  .request-side-panel p{font-size:.76rem!important;line-height:1.45!important}

  .on-air-stage,.host-profile,.host-profile:nth-child(even){grid-template-columns:1fr!important;min-height:0!important;border-radius:24px!important}
  .host-profile:nth-child(even) .host-profile-media{order:0!important}
  .host-profile-media,.on-air-stage-media{min-height:0!important;aspect-ratio:4/5!important}
  .host-profile-copy,.on-air-stage-copy{padding:24px 20px!important}
  .host-profile-copy h2,.on-air-stage-copy h2{font-size:clamp(3rem,14vw,4rem)!important}
  .host-profile-copy p,.on-air-stage-copy>p{font-size:.86rem!important;line-height:1.52!important}
  .host-lanes span{font-size:.58rem!important;padding:6px 8px!important}
  .day-tabs{overflow-x:auto!important;overscroll-behavior-inline:contain}
  .day-tabs button{min-width:92px!important;min-height:42px!important;font-size:.66rem!important}
  .schedule-row img{width:48px!important;height:48px!important}
  .schedule-row strong{font-size:.78rem!important}
  .schedule-row p{font-size:.66rem!important}
  .schedule-row em{font-size:.58rem!important}

  .now-playing-feature{grid-template-columns:120px minmax(0,1fr)!important;gap:16px!important;padding:18px!important;border-radius:24px!important}
  .now-playing-copy h2{font-size:2.6rem!important}
  .episode-copy h2{font-size:1.55rem!important}
  .episode-row img{width:56px!important;height:56px!important}
  .episode-row h3{font-size:.78rem!important}
  .episode-row p{font-size:.64rem!important}
  .episode-row button{width:38px!important;height:38px!important}

  .entity-hero,.episode-detail-hero,.artist-identity-hero,.authority-hero{border-radius:26px!important;padding:20px!important}
  .entity-hero-copy h1,.authority-hero-copy h1{font-size:clamp(2.8rem,13vw,4rem)!important}
  .entity-hero-copy p,.authority-hero-copy p{font-size:.86rem!important;line-height:1.52!important}
  .entity-index-card{border-radius:20px!important;padding:14px!important}
}

/* Extra-small phones: preserve every component, but give it the full width it needs. */
@media (max-width:360px){
  :root{--mobile-gutter:10px}
  .site-header{width:calc(100% - 12px)!important;grid-template-columns:68px minmax(0,1fr) auto!important;padding-left:8px!important}
  .brand-link{width:68px!important;min-width:68px!important}
  .brand-link img{width:68px!important}
  .live-button{padding:0 9px!important;font-size:.59rem!important}
  .hero-statement{font-size:2.25rem!important}
  .art-card{width:min(76vw,250px)!important}
  .request-promo,.remyxx-feature{grid-template-columns:1fr!important;gap:22px!important}
  .request-promo-art,.remyxx-visual{justify-self:center!important}
  .request-logo-orbit{width:min(48vw,150px)!important}
  .remyxx-cover{width:min(50vw,150px)!important}
  .footer-brand{align-items:flex-start!important;flex-direction:column!important}
  .footer-grid{grid-template-columns:1fr 1fr!important}
  .section-head{align-items:flex-start!important;flex-direction:column!important}
  .section-head p,.track-head-tools{max-width:100%!important}
}

/* Short phone landscape: repair intended geometry without turning the page into a portrait stack. */
@media (orientation:landscape) and (max-height:520px) and (max-width:940px){
  :root{--dock-h:58px}
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))!important}
  .site-header{
    top:max(6px,env(safe-area-inset-top))!important;
    height:60px!important;
    min-height:60px!important;
    width:calc(100% - 18px)!important;
  }
  .brand-link,.brand-link img{width:76px!important;min-width:76px!important}
  .live-button{min-height:40px!important}
  .menu-button{width:40px!important;height:40px!important}
  .hero{
    grid-template-columns:minmax(0,1fr) minmax(280px,.8fr)!important;
    gap:26px!important;
    padding-top:22px!important;
    padding-bottom:38px!important;
  }
  .hero-copy{max-width:520px!important}
  .hero-statement{font-size:clamp(2.2rem,6.2vw,3.25rem)!important;max-width:470px!important}
  .lead-copy{font-size:.80rem!important;max-width:500px!important}
  .art-sculpture{min-height:330px!important;padding-inline:24px!important}
  .art-rings{width:min(43vw,340px)!important}
  .art-card{width:min(34vw,250px)!important;max-width:250px!important}
  .show-note{display:none!important}
  .track-glass{bottom:-28px!important}
  .host-feature{grid-template-columns:minmax(260px,.85fr) minmax(0,1.15fr)!important}
  .host-portrait{aspect-ratio:auto!important;min-height:300px!important;height:auto!important}
  .host-copy{padding:24px!important}
  .host-copy h2{font-size:2.85rem!important}
  .host-copy>p{font-size:.78rem!important}
  .utility-stack{grid-template-columns:minmax(240px,.72fr) minmax(0,1.28fr)!important;grid-template-rows:auto!important}
  .weather-block{min-height:300px!important;align-self:start!important}
  .world-block-map{grid-template-rows:auto auto 220px!important}
  .request-promo,.remyxx-feature{min-height:0!important}
  .player-dock{
    width:min(calc(100% - 20px),650px)!important;
    min-height:58px!important;
    grid-template-columns:44px minmax(0,1fr) auto!important;
    gap:9px!important;
    padding:6px!important;
    border-radius:17px!important;
    bottom:max(6px,env(safe-area-inset-bottom))!important;
  }
  .dock-art{width:44px!important;height:44px!important;border-radius:12px!important}
  .dock-copy strong{font-size:.74rem!important;line-height:1.15!important}
  .dock-copy span{font-size:.62rem!important;line-height:1.2!important}
  .dock-action{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;border-radius:12px!important}
  .dock-play{width:44px!important;height:44px!important}
}

@media (prefers-reduced-motion:reduce){
  .artwork-swapping{transition:none!important}
  .mobile-menu-panel{transition:none!important}
}

@media (max-width:520px){
  .section-head{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:12px!important;
  }
  .section-head p,.track-head-tools{max-width:100%!important;width:100%!important}
  .track-head-actions{justify-content:space-between!important;width:100%!important;gap:10px!important}
  .track-rail-controls button{width:44px!important;height:44px!important}
  .footer-grid a,.footer-grid button{display:flex!important;align-items:center!important;min-height:44px!important}
  .listener-map-controls button{min-width:44px!important;min-height:44px!important}
  .dock-action{width:42px!important;height:42px!important}
}

/* Final touch-target guard: later legacy rules must not shrink primary mobile controls. */
@media (max-width:760px){
  .menu-button{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
  .live-button{height:44px!important;min-height:44px!important}
}
@media (orientation:landscape) and (max-height:520px) and (max-width:940px){
  .menu-button{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
  .live-button{height:44px!important;min-height:44px!important}
}