/* JLJAM v7.11.3 | Targeted iPhone/iPad usability rescue.
   Loaded LAST. Retains legacy functions and accessible minimum touch areas. */
@media (max-width:700px){
  /* FIVE destinations, including the actual React command centre. Earlier
     four-column !important dock rules made the fifth button disappear. */
  html body:not(.bm-native) #app .mobile-dock:has(#os8LaunchMobile),
  html.jljam-big-dock body:not(.bm-native) #app .mobile-dock:has(#os8LaunchMobile),
  html.jljam-big-dock body:not(.bm-native) #app .mobile-dock:has(#os8LaunchMobile):has(>button:nth-child(1).on),
  html.jljam-big-dock body:not(.bm-native) #app .mobile-dock:has(#os8LaunchMobile):has(>button:nth-child(2).on),
  html.jljam-big-dock body:not(.bm-native) #app .mobile-dock:has(#os8LaunchMobile):has(>button:nth-child(3).on),
  html.jljam-big-dock body:not(.bm-native) #app .mobile-dock:has(#os8LaunchMobile):has(>button:nth-child(4).on){
    display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-template-rows:1fr!important;gap:3px!important;
    height:69px!important;min-height:69px!important;max-height:69px!important;
    left:9px!important;right:9px!important;width:auto!important;
    bottom:calc(9px + env(safe-area-inset-bottom,0px))!important;
    border-radius:19px!important;padding:5px!important;overflow:visible!important;
    background:rgba(23,14,43,.95)!important;
    -webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;
  }
  html body:not(.bm-native) #app .mobile-dock > button,
  html body:not(.bm-native) #app .mobile-dock > button[data-nav],
  html body:not(.bm-native) #app .mobile-dock #os8LaunchMobile{
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    box-sizing:border-box!important;gap:2px!important;position:relative!important;
    height:58px!important;min-height:58px!important;max-height:58px!important;
    margin:0!important;padding:4px 1px!important;min-width:0!important;width:100%!important;
    border-radius:14px!important;font:800 12px/1.05 system-ui,sans-serif!important;
    overflow:hidden!important;white-space:nowrap!important;letter-spacing:0!important;
    touch-action:manipulation!important;
  }
  html body:not(.bm-native) #app .mobile-dock > button > span,
  html.jljam-big-dock body:not(.bm-native) #app .mobile-dock > button > span{
    font-size:22px!important;line-height:1.05!important;display:block!important;
    width:auto!important;height:auto!important;margin:0!important;
  }
  html.jljam-big-dock body:not(.bm-native) #app .mobile-dock button.on::after{
    display:none!important;content:none!important;
  }
  html.jljam-big-dock body:not(.bm-native) #app .mobile-dock > button[data-nav]{font-size:12px!important}
  html body:not(.bm-native) #app .mobile-dock #os8LaunchMobile{
    color:#fff!important;background:linear-gradient(145deg,#8258ec,#5a36ab)!important;
    border:1px solid rgba(207,171,255,.46)!important;
    box-shadow:inset 0 1px rgba(255,255,255,.2)!important;
  }
  /* Bring top controls back into proportion without reducing reading text. */
  #app > .topbar{min-height:64px!important;padding-bottom:8px!important}
  #app > .topbar .brand{min-width:0!important}
  #app > .topbar .brand img{width:37px!important;height:37px!important}
  #app > .topbar .top-actions{gap:5px!important}
  #app > .topbar .top-actions #artistSelect{
    min-width:94px!important;max-width:112px!important;width:clamp(94px,27vw,112px)!important;
    height:44px!important;min-height:44px!important;padding-left:10px!important;
    font-size:16px!important;border-radius:13px!important;
  }
  #app > .topbar .cin-global-search-btn,
  #app > .topbar .manager-chip{min-height:44px!important;height:44px!important}
  /* Compact, reliable Smart Search access, not an entire welcome card. */
  #app .shell > #jljam-smart-research-launch{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;gap:9px!important;margin:8px 0 14px!important;
    padding:10px 12px!important;border-radius:16px!important;
    background:linear-gradient(112deg,#291640,#3c1d5b)!important;
  }
  #jljam-smart-research-launch .ss-brand{width:auto!important;min-width:0!important;gap:9px!important}
  #jljam-smart-research-launch .ss-symbol{width:41px!important;height:41px!important;font-size:25px!important;border-radius:11px!important}
  #jljam-smart-research-launch .ss-brand div{min-width:0!important}
  #jljam-smart-research-launch b{font-size:17px!important;line-height:1.18!important}
  #jljam-smart-research-launch small{
    display:block!important;font-size:13px!important;line-height:1.25!important;
    max-width:210px!important;overflow:hidden!important;
    display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;
  }
  #jljam-smart-research-launch #ssOpenResearch{
    width:auto!important;min-width:83px!important;max-width:106px!important;min-height:44px!important;
    padding:6px 8px!important;border-radius:11px!important;font-size:12px!important;line-height:1.2!important;
  }
  #jljam-smart-research-launch #ssOpenResearch span{font-size:15px!important}
  /* Home: elevate real content instead of giant launch cards. */
  #app .cin-hq-harmony .cin-harmony-focus{
    padding:15px!important;border-radius:18px!important;margin-bottom:13px!important;
  }
  #app .cin-hq-harmony .cin-harmony-kicker{font-size:12px!important;letter-spacing:.10em!important}
  #app .cin-hq-harmony .cin-harmony-focus h1{
    font-size:clamp(22px,6vw,27px)!important;line-height:1.14!important;
    margin:8px 0 4px!important;letter-spacing:-.035em!important;
  }
  #app .cin-hq-harmony .cin-harmony-focus p{
    font-size:15px!important;line-height:1.35!important;margin:5px 0 11px!important;
  }
  #app .cin-hq-harmony .cin-harmony-primary{
    min-height:46px!important;padding:9px 12px!important;font-size:16px!important;
  }
  #app .cin-hq-harmony .cin-harmony-shortcuts{
    display:flex!important;gap:6px!important;flex-wrap:nowrap!important;
    margin-top:11px!important;padding-top:10px!important;
  }
  #app .cin-hq-harmony .cin-harmony-shortcuts button{
    flex:1 1 0!important;min-width:0!important;min-height:44px!important;
    padding:6px 3px!important;border-radius:10px!important;
    font-size:11px!important;line-height:1.18!important;letter-spacing:-.01em!important;
  }
  #app .cin-hq-harmony .cin-roster-heading-796{margin:12px 0 10px!important}
  #app .cin-hq-harmony .cin-roster-heading-796 h2{font-size:22px!important}
  #app .cin-hq-harmony .cin-artist-gallery .cin-face-photo-frame{aspect-ratio:1.05!important}
  #app .cin-hq-harmony .cin-artist-gallery .cin-face-name{font-size:18px!important;line-height:1.2!important}
  #app .cin-hq-harmony .cin-artist-gallery .cin-face-caption{min-height:60px!important}
  html body:not(.bm-native) #app .shell{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))!important}
  /* Floating navigator gets a SINGLE 44px trigger until requested.
     It is no longer a permanent four-button obstruction. */
  body > #jljamNavRail:not([hidden]){
    display:flex!important;position:fixed!important;
    left:auto!important;right:12px!important;top:auto!important;
    bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;
    height:46px!important;min-height:46px!important;max-height:none!important;
    min-width:46px!important;width:46px!important;max-width:calc(100vw - 24px)!important;
    padding:3px!important;gap:4px!important;overflow:hidden!important;
    border-radius:14px!important;border:1px solid rgba(196,155,255,.45)!important;
    background:rgba(36,23,65,.95)!important;
    box-shadow:0 4px 18px rgba(0,0,0,.25)!important;
    z-index:1398!important;
    backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
  }
  /* Keep the trigger in the spare header area on Home instead of over portraits. */
  body:not(.bm-native):not(.mobile-detail-open) > #jljamNavRail:not(.jljam-rail-expanded){
    left:70px!important;right:auto!important;
    top:calc(16px + env(safe-area-inset-top,0px))!important;bottom:auto!important;
  }
  body:not(.bm-native):not(.mobile-detail-open) > #jljamNavRail.jljam-rail-expanded{
    top:calc(72px + env(safe-area-inset-top,0px))!important;bottom:auto!important;
    left:10px!important;right:auto!important;
  }
  body > #jljamNavRail > .jljam-rail-toggle{
    display:grid!important;place-items:center!important;flex:0 0 40px!important;
    width:40px!important;height:38px!important;min-height:38px!important;
    padding:0!important;margin:0!important;border:0!important;border-radius:10px!important;
    background:#6b41b8!important;color:#fff!important;font:750 24px/1 system-ui!important;
  }
  body > #jljamNavRail:not(.jljam-rail-expanded) > :not(.jljam-rail-toggle){display:none!important}
  body > #jljamNavRail.jljam-rail-expanded{
    width:max-content!important;max-width:calc(100vw - 24px)!important;
    height:46px!important;padding:3px!important;
  }
  body > #jljamNavRail.jljam-rail-expanded > :is(.jljam-nav-button,.jljam-jump-button){
    display:flex!important;align-items:center!important;justify-content:center!important;
    flex:0 0 40px!important;width:40px!important;min-width:40px!important;
    max-width:40px!important;height:38px!important;min-height:38px!important;
    padding:0!important;margin:0!important;border-radius:10px!important;font-size:20px!important;
  }
  body > #jljamNavRail .jljam-nav-position{display:none!important}
  body > #jljamNavRail .jljam-nav-button > b{display:none!important}
}
@media(max-width:350px){
 #jljam-smart-research-launch small{font-size:12px!important}
 #jljam-smart-research-launch #ssOpenResearch{max-width:84px!important}
 #app .cin-hq-harmony .cin-harmony-shortcuts button{font-size:10.5px!important}
}
@media(min-width:701px){#jljamNavRail .jljam-rail-toggle{display:none!important}}

/* React-first 7.12.2: native document scrolling on iOS. No nested modal scroll trap.
   Desktop remains a fixed overlay; mobile React host moves outside #app. */
@media(max-width:720px){
  html:has(body.os8-native-scroll){height:auto!important;overflow-y:auto!important;overscroll-behavior-y:auto!important;scroll-behavior:auto!important}
  body.os8-open.os8-native-scroll{position:static!important;height:auto!important;min-height:100dvh!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;touch-action:pan-y!important;overscroll-behavior-y:auto!important;padding:0!important;-webkit-overflow-scrolling:touch}
  body.os8-open.os8-native-scroll>#app{display:none!important}
  body.os8-open.os8-native-scroll>#os8Host{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:100dvh!important;max-height:none!important;overflow:visible!important;isolation:isolate!important}
  body.os8-open.os8-native-scroll>#os8Host .os8-viewport{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:100dvh!important;max-height:none!important;overflow:visible!important;touch-action:pan-y!important;scrollbar-gutter:auto!important;-webkit-overflow-scrolling:auto!important}
  #os8Host .os8-top{position:sticky!important;top:0!important;z-index:30!important;min-height:64px!important;padding:10px 15px!important;padding-top:max(10px,env(safe-area-inset-top))!important}
  #os8Host .os8-body{padding:16px 15px calc(126px + env(safe-area-inset-bottom,0px))!important}
  #os8Host .os8-headline{margin:0 0 13px!important}
  #os8Host .os8-headline h1{font-size:27px!important;margin:7px 0!important;letter-spacing:-.05em!important}
  #os8Host .os8-headline p{font-size:13px!important;line-height:1.32!important}
  /* The six desktop destinations live in the four-button iPhone More sheet. */
  #os8Host .os8-tabs{display:none!important}
  #os8Host .os8-mobile-tabs{position:fixed!important;z-index:60!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;left:12px!important;right:12px!important;top:auto!important;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;align-items:stretch!important;gap:5px!important;min-height:67px!important;max-height:80px!important;padding:6px!important;margin:0!important;border:1px solid rgba(180,143,251,.48)!important;border-radius:18px!important;background:rgba(22,16,42,.97)!important;box-shadow:0 10px 35px #0009!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important}
  #os8Host .os8-mobile-tabs button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:1px!important;min-width:0!important;width:100%!important;min-height:55px!important;max-height:65px!important;padding:4px 3px!important;margin:0!important;border:1px solid transparent!important;border-radius:12px!important;background:transparent!important;color:#d8c8ed!important;font:800 12px/1.12 -apple-system,BlinkMacSystemFont,system-ui,sans-serif!important;letter-spacing:0!important;white-space:nowrap!important;overflow:visible!important}
  #os8Host .os8-mobile-tabs button span{font-size:23px!important;line-height:1.15!important}
  #os8Host .os8-mobile-tabs button b{font-size:clamp(12px,3.3vw,14px)!important;line-height:1.18!important;max-width:100%!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important}
  #os8Host .os8-mobile-tabs button.active{background:linear-gradient(145deg,#8059e9,#5b39b1)!important;color:#fff!important;border-color:#ab91ff!important}
  #os8Host .os8-more-backdrop{position:fixed!important;inset:0!important;z-index:49!important;background:rgba(5,5,15,.67)!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;padding:12px 12px calc(94px + env(safe-area-inset-bottom,0px))!important}
  #os8Host .os8-more-sheet{width:min(100%,520px)!important;background:linear-gradient(145deg,#31214c,#191429)!important;border:1px solid #a28ae1!important;border-radius:22px!important;box-shadow:0 18px 52px #000a!important;padding:13px!important;display:grid!important;gap:7px!important}
  #os8Host .os8-more-heading{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;padding:2px 7px 8px!important;font-size:16px!important}
  #os8Host .os8-more-heading button{height:40px!important;min-height:40px!important;width:40px!important;border-radius:11px!important;border:1px solid #69568d!important;background:#402d5e!important;font-size:23px!important}
  #os8Host .os8-more-option{display:flex!important;align-items:center!important;gap:12px!important;width:100%!important;min-height:57px!important;text-align:left!important;padding:10px 15px!important;border:1px solid rgba(202,165,255,.20)!important;border-radius:14px!important;background:#291d43!important;font-size:17px!important;color:#fff!important}
  #os8Host .os8-more-option.active{border-color:#b894ff!important;background:#4c3476!important}
  #os8Host .os8-more-option span:first-child{font-size:23px!important;width:31px!important;text-align:center!important}
  #os8Host .os8-more-option b{flex:1!important}
  #os8Host .os8-hero{min-height:0!important;padding:19px!important;border-radius:21px!important}
  #os8Host .os8-hero h2{font-size:32px!important;line-height:1.07!important;margin:9px 0 10px!important}
  #os8Host .os8-hero p{font-size:14px!important;line-height:1.42!important;margin-bottom:15px!important}
  #os8Host .os8-hero-action{font-size:14px!important;min-height:44px!important;padding:10px 14px!important}
  #os8Host .os8-metrics{margin-top:11px!important;gap:9px!important}
  #os8Host .os8-metrics button{min-height:108px!important;padding:14px!important;border-radius:16px!important}
  #os8Host .os8-metrics strong{font-size:34px!important;margin:4px 0!important}
  #os8Host .os8-metrics small{font-size:12px!important}
  #os8Host .os8-metrics span{font-size:11px!important;letter-spacing:.055em!important}
}
#os8Host .os8-mobile-tabs{display:none}
@media(max-width:720px){#os8Host .os8-mobile-tabs{display:grid}}

/* JLJAM 7.12.8: A real iPhone chrome safe area, without nested touch scrolling.
   The native document remains the ONLY vertical scroll surface. */
@media(max-width:720px){
  body.os8-open.os8-native-scroll>#os8Host .os8-top{
    position:fixed!important;top:0!important;left:0!important;right:0!important;
    width:100%!important;min-height:118px!important;height:118px!important;
    padding:64px 16px 10px!important;
    padding-top:max(64px,calc(env(safe-area-inset-top,0px) + 18px))!important;
    background:#121025!important;z-index:75!important;
    border-bottom:1px solid #5b457f!important;
    box-shadow:0 5px 22px #090817aa!important;
  }
  body.os8-open.os8-native-scroll>#os8Host .os8-body{
    padding-top:calc(132px + env(safe-area-inset-top,0px))!important;
    padding-bottom:calc(195px + env(safe-area-inset-bottom,0px))!important;
  }
  body.os8-open.os8-native-scroll>#os8Host .os8-viewport::after{
    content:"";display:block;position:fixed;pointer-events:none;
    bottom:0;left:0;right:0;height:calc(106px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to bottom,#151024f5,#100e1f 40%);
    z-index:54;
  }
  body.os8-open.os8-native-scroll>#os8Host .os8-mobile-tabs{
    z-index:80!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;
    background:#1a132d!important;
  }
  /* Native iOS keyboard should never be hidden beneath a persistent dock. */
  body.os8-native-scroll:has(#os8Host :is(input,textarea,select):focus) #os8Host .os8-mobile-tabs,
  body.os8-native-scroll:has(#os8Host :is(input,textarea,select):focus) #os8Host .os8-viewport::after{display:none!important}
  #os8Host .os8-more-backdrop{z-index:78!important}
  #os8Host :is(button,input,textarea,select){scroll-margin-top:135px;scroll-margin-bottom:140px}
}

/* 7.13.22: native tablet scrolling. The 720px phone rule remains unchanged.
   On iPad-sized coarse-pointer viewports, React is appended outside the legacy
   #app and the *document* scrolls, rather than a fixed nested overlay. */
@media (min-width:721px) and (pointer:coarse) {
  html:has(body.os8-native-scroll){height:auto!important;overflow-y:auto!important;scroll-behavior:auto!important}
  body.os8-open.os8-native-scroll{position:static!important;height:auto!important;min-height:100dvh!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;touch-action:pan-y!important;-webkit-overflow-scrolling:touch!important;padding:0!important}
  body.os8-open.os8-native-scroll>#app{display:none!important}
  body.os8-open.os8-native-scroll>#os8Host{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:100dvh!important;max-height:none!important;overflow:visible!important}
  body.os8-open.os8-native-scroll>#os8Host .os8-viewport{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:100dvh!important;max-height:none!important;overflow:visible!important;touch-action:pan-y!important;-webkit-overflow-scrolling:auto!important}
  body.os8-open.os8-native-scroll>#os8Host .os8-top{position:sticky!important;top:0!important;z-index:75!important;padding-top:max(12px,env(safe-area-inset-top,0px))!important}
  body.os8-open.os8-native-scroll>#os8Host .os8-body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))!important}
  body.os8-open.os8-native-scroll #os8Host :is(input,textarea,select){font-size:max(16px,1em)!important;scroll-margin-top:100px!important;scroll-margin-bottom:48px!important}
}