/* Palace of Future v40: native portrait scenes, not a pannable desktop canvas. */
@media(max-width:760px){
  #future{
    --mobile-stage-w:min(100vw,56.25svh);
    --mobile-stage-h:min(100svh,177.7778vw);
    --mobile-stage-x:calc((100vw - var(--mobile-stage-w)) / 2);
    --mobile-stage-y:calc((100svh - var(--mobile-stage-h)) / 2);
    height:100svh;min-height:560px;overflow:hidden
  }
  #future .world-viewport{inset:0!important;overflow:hidden!important;touch-action:manipulation!important}
  #future :is(#futureGateCanvas,#futureSalonCanvas,#futureDeskCanvas){
    position:absolute!important;width:var(--mobile-stage-w)!important;height:var(--mobile-stage-h)!important;
    left:50%!important;top:50%!important;min-width:0!important;transform:translate(-50%,-50%)!important
  }
  /* CSS owns the mobile artwork so a late desktop image loader cannot replace
     the portrait source. Show the whole 9:16 composition on taller phones. */
  #futureGateCanvas{background:#dceefa url("assets/images/future-gate-mobile-v40.webp") center/100% 100% no-repeat!important}
  #futureSalonCanvas{background:#f2e8dd url("assets/images/future-salon-mobile-v40.webp") center/100% 100% no-repeat!important}
  #futureDeskCanvas{background:#d9ece9 url("assets/images/future-desk-mobile-v40.webp") center/100% 100% no-repeat!important}
  #future :is(#futureGateCanvas,#futureSalonCanvas,#futureDeskCanvas)>.world-art{opacity:0!important}
  #futureBeyondGate{content:url("assets/images/future-salon-mobile-v40.webp")!important}
  #future .future-gate-leaf{
    background-image:url("assets/images/future-gate-mobile-v40.webp")!important;
    background-size:var(--mobile-stage-w) var(--mobile-stage-h)!important
  }
  #future .world-look{display:none!important}
  #future>.self-top{left:8px!important;right:8px!important;top:max(7px,env(safe-area-inset-top))!important;height:auto!important;padding:0!important;gap:4px!important;align-items:stretch;background:none!important}
  #future>.self-top :is(.brand,.self-palace-toggle,.top-memory){min-height:40px!important;padding:7px 9px!important;border-radius:12px!important;font-size:11px!important;line-height:1.15!important}
  #future>.self-top .brand{flex:0 0 78px!important;font-size:14px!important;letter-spacing:.08em}
  #future>.self-top .self-palace-toggle{margin-left:auto!important;flex:0 0 66px}
  body:has(#future.active) #elarisNavigation{left:8px;right:8px;top:max(7px,env(safe-area-inset-top));gap:4px;align-items:stretch}
  body:has(#future.active) #elarisNavigation button{min-height:40px!important;padding:7px 8px!important;border-radius:12px!important;font-size:11px!important;line-height:1.15;white-space:normal}
  body:has(#future.active) #elarisNavigation #journeyHome{flex:0 0 78px;font-size:14px!important;letter-spacing:.08em}
  body:has(#future.active) #elarisNavigation #journeyBack{flex:1 1 auto;min-width:0;max-width:none!important}
  body:has(#future.active) #elarisNavigation #journeyPalaces{flex:0 0 62px;margin-left:0}
  body:has(#future.active) #elarisNavigation #journeyMember{flex:0 0 60px;padding-inline:6px!important}
  body:has(#future.active) .ux-chronicle-link{right:8px;top:58px;min-height:34px;padding:6px 11px;font-size:11px;border-radius:17px}
  body:has(#future.active) #esMySpace{left:8px;bottom:calc(8px + env(safe-area-inset-bottom));max-width:55vw}
  body:has(#future.active) #esMySpace :is(#esDiscover,#esSaveSpace){min-height:40px;padding:8px 11px;font-size:11px;line-height:1.1;white-space:nowrap}

  #future[data-journey=gate] #futureGateSpot>span{
    top:91%!important;min-width:132px!important;max-width:154px!important;padding:7px 10px!important;border-radius:13px!important;
    font-size:14px!important;line-height:1.12!important
  }
  #future[data-journey=gate] #futureGateSpot small{font-size:10px!important;line-height:1.2!important;margin-top:3px}
  #future #futureArrivalTitle{left:calc(var(--mobile-stage-x) + 14px)!important;top:calc(var(--mobile-stage-y) + 72px)!important;bottom:auto!important;max-width:230px!important;padding:10px 13px!important;border-radius:15px!important}
  #future #futureArrivalTitle p{font-size:9px!important;margin:0 0 3px!important;letter-spacing:.13em}
  #future #futureArrivalTitle h1{font-size:23px!important;line-height:1.05!important}
  #future[data-journey=gate] .world-direct{right:calc(var(--mobile-stage-x) + 8px)!important;bottom:calc(var(--mobile-stage-y) + 68px + env(safe-area-inset-bottom))!important;min-height:38px!important;padding:7px 10px!important;font-size:10px!important}

  #future #futureSalonCaption{left:calc(var(--mobile-stage-x) + 12px)!important;top:calc(var(--mobile-stage-y) + 70px)!important;bottom:auto!important;max-width:252px!important;padding:9px 12px!important;border-radius:15px!important}
  #future #futureSalonCaption p{font-size:8px!important;margin:0 0 2px!important;letter-spacing:.11em}
  #future #futureSalonCaption h1{font-size:20px!important;line-height:1.08!important;margin:2px 0 3px!important}
  #future #futureSalonCaption>span{font-size:10px!important;line-height:1.25!important}
  #future[data-journey=salon] .world-direct{display:none!important}
  #future[data-journey=salon] .world-object{min-width:0!important;min-height:0!important}
  #future[data-journey=salon] .world-object>span,
  #future[data-journey=desk] .world-object>span{
    min-width:88px!important;width:auto!important;max-width:min(116px,calc(100vw - 20px))!important;min-height:0!important;padding:6px 8px!important;
    border-radius:12px!important;font-size:12px!important;line-height:1.12!important;white-space:normal!important;backdrop-filter:blur(7px)
  }
  #future[data-journey=salon] .world-object small,
  #future[data-journey=desk] .world-object small{font-size:9px!important;line-height:1.18!important;margin-top:2px}
  /* Labels sit beside their painted objects and stay inside the portrait. */
  #futureAgendaSpot>span{top:68%!important;left:48%!important}
  #futureLettersSpot>span{top:64%!important;left:60%!important}
  #futureGlobeSpot>span{top:58%!important;left:20%!important}
  #futureArchiveSpot>span{top:60%!important;left:12%!important}
  #deskAgenda>span{top:68%!important;left:50%!important}
  #deskLetters>span{top:62%!important;left:65%!important}
  #deskGlobe>span{top:62%!important;left:30%!important}
  #deskKeepsakes>span{top:auto!important;bottom:68%!important;left:28%!important}

  #future .world-back{top:56px!important;left:8px!important;min-height:34px!important;padding:6px 9px!important;font-size:10px!important;border-radius:13px!important}
  /* Ordinary planner views sit directly on one enlarged page of the desk book. */
  #future[data-journey=page][data-art-page=false] .future-workspace{
    position:fixed!important;inset:0!important;width:100%!important;height:100%!important;padding:0!important;overflow:hidden!important;
    background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;pointer-events:none!important
  }
  #future[data-journey=page][data-art-page=false] .future-app{position:fixed!important;inset:0!important;padding:0!important;background:transparent!important}
  #future[data-journey=page][data-art-page=false] .future-main.world-planner-page{
    position:fixed!important;left:12vw!important;right:auto!important;
    top:calc(var(--mobile-stage-y) + 53.3333vw)!important;bottom:auto!important;width:76vw!important;height:76.4444vw!important;
    min-width:0!important;padding:8px 7px 22px!important;overflow-x:hidden!important;overflow-y:auto!important;color:#684f4a!important;background:transparent!important;
    border:0!important;border-radius:0!important;box-shadow:none!important;pointer-events:auto!important;z-index:42!important;opacity:1!important
  }
  #future[data-journey=page][data-art-page=false] .future-main.world-planner-page *{min-width:0;max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
  #future[data-journey=page][data-art-page=false] .world-page-turns{gap:8px!important;margin-bottom:10px!important;padding-bottom:7px!important;flex-wrap:nowrap!important;overflow-x:auto}
  #future[data-journey=page][data-art-page=false] .world-page-turns button{flex:0 0 auto;font-size:11px!important;padding:4px 0!important}
  #future[data-journey=page][data-art-page=false] .future-head{margin:0 0 8px!important;padding:0 0 9px!important;border-bottom:1px solid #9a65523d!important}
  #future[data-journey=page][data-art-page=false] .future-head h1{font-size:20px!important;line-height:1.08!important;margin:0 0 5px!important}
  #future[data-journey=page][data-art-page=false] .future-head p{font:11px/1.35 Georgia,"Times New Roman",serif!important;margin:0!important}
  #future[data-journey=page][data-art-page=false] .future-head button{min-height:36px!important;margin-top:8px!important;padding:7px 11px!important;font-size:11px!important}
  #future[data-journey=page][data-art-page=false] .fcard,
  #future[data-journey=page][data-art-page=false] .future-item,
  #future[data-journey=page][data-art-page=false] .thread-card,
  #future[data-journey=page][data-art-page=false] .intent-card{padding:11px 0!important}
  #future[data-journey=page][data-art-page=false] .fcard h3{font-size:18px!important;margin:4px 0 8px!important}
  #future[data-journey=page][data-art-page=false] .future-btn,
  #future[data-journey=page][data-art-page=false] .microbtn,
  #future[data-journey=page][data-art-page=false] .template-chip{min-height:36px!important;padding:7px 10px!important;font-size:11px!important;line-height:1.2!important;white-space:normal!important}
  #future[data-journey=page][data-art-page=false] .future-btn.primary{border-radius:5px 14px 5px 14px!important}
  #future[data-journey=page][data-art-page=false] :is(.empty-future,.future-note,.fcard p){font-size:11px!important;line-height:1.4!important}
  #future[data-journey=page][data-art-page=false] .empty-future{width:min(100%,30ch)!important;margin-inline:auto!important;text-align:center!important}
  #future[data-journey=page][data-art-page=false] :is(input:not([type=range]),textarea,select){
    display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;min-height:32px!important;
    padding:6px 7px!important;font-size:12px!important;line-height:1.3!important;overflow-wrap:anywhere!important
  }
  #future[data-journey=page][data-art-page=false] textarea{min-height:52px!important;max-height:120px!important;resize:vertical!important}
  #future[data-journey=page][data-art-page=false] button{max-width:100%!important;white-space:normal!important}
  #future[data-journey=page][data-art-page=false] :is(.future-actions,.task-tools,.template-row){max-width:100%!important;flex-wrap:wrap!important}
  #future[data-journey=page][data-art-page=false] .quick-line{grid-template-columns:minmax(0,1fr) 48px!important;gap:6px!important}
  #future[data-journey=page][data-art-page=false] .future-view.active{display:block!important;position:relative!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
  #future[data-journey=page]~.ux-chronicle-link,
  body:has(#future.active[data-journey=page]) .ux-chronicle-link{display:none!important}

  /* Vision, month and year use dedicated portrait artwork with no horizontal camera. */
  #future.fs-artful[data-art-page=true][data-journey=page] .future-workspace{position:fixed!important;inset:0!important;background:transparent!important}
  #future.fs-artful[data-art-page=true] .fs-art-viewport{
    position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;overflow:hidden!important;background:#e9eee6!important;
    touch-action:pan-y pinch-zoom!important
  }
  #future.fs-artful[data-art-page=true] .fs-art-scene{
    position:absolute!important;inset:auto!important;width:var(--mobile-stage-w)!important;height:var(--mobile-stage-h)!important;
    left:50%!important;top:50%!important;min-width:0!important;aspect-ratio:9/16!important;margin:0!important;transform:translate(-50%,-50%)!important
  }
  #future.fs-artful[data-art-page=true] .fs-scene-art{opacity:0!important}
  #future.fs-artful #fsScene-vision{background:#f4e8df url("assets/images/future-vision-mobile-v40.webp") center/100% 100% no-repeat!important}
  #future.fs-artful #fsScene-monthly{background:#dcece8 url("assets/images/future-month-mobile-v40.webp") center/100% 100% no-repeat!important}
  #future.fs-artful #fsScene-yearly{background:#e8e1d8 url("assets/images/future-year-mobile-v40.webp") center/100% 100% no-repeat!important}
  #future.fs-artful[data-art-page=true] .fs-bookmark{
    top:56px!important;right:8px!important;max-width:172px!important;padding:4px 6px!important;border-radius:12px!important
  }
  #future.fs-artful[data-art-page=true] .fs-bookmark select{max-width:158px!important;min-height:32px!important;padding:4px 6px!important;font-size:10px!important}
  #future.fs-artful[data-art-page=true] .fs-heading h1{font-size:21px!important;line-height:1.05!important}
  #future.fs-artful[data-art-page=true] .fs-heading>label{width:90px!important;font-size:10px!important}
  #future.fs-artful[data-art-page=true] .fs-heading input{width:100%!important;min-width:0!important;font-size:12px!important;min-height:24px!important;padding:2px!important}
  #future.fs-artful[data-art-page=true] .fs-footer{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;
    justify-content:stretch!important;gap:5px!important;min-width:0!important
  }
  #future.fs-artful[data-art-page=true] .fs-footer>button{
    width:auto!important;max-width:112px!important;min-height:32px!important;padding:5px 8px!important;
    font-size:10px!important;line-height:1.15!important;white-space:normal!important
  }
  #future.fs-artful[data-art-page=true] .fs-footer>p{font-size:9px!important;line-height:1.2!important;margin-top:4px!important}
  #future.fs-artful[data-art-page=true] .fs-leaf-nav{
    display:grid!important;grid-template-columns:24px minmax(0,1fr) 24px!important;width:100%!important;max-width:145px!important;
    min-width:0!important;gap:3px!important;padding:2px 5px!important;font-size:9px!important;white-space:nowrap!important;overflow:hidden!important
  }
  #future.fs-artful[data-art-page=true] .fs-leaf-nav span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;text-align:center!important}
  #future.fs-artful[data-art-page=true] .fs-leaf-nav button{min-width:24px!important;width:24px!important;min-height:28px!important;padding:0!important;font-size:18px!important}

  #fv-vision .fs-heading{left:15%!important;top:20.5%!important;width:70%!important}
  #future.fs-artful #fsContent-vision{left:15%!important;top:28%!important;width:70%!important;height:49%!important;overflow:hidden!important}
  #future.fs-artful #fsContent-vision>.fs-title{display:block!important;width:100%!important;height:29px!important;margin:0 0 5px!important;min-height:0!important}
  #future.fs-artful #fsContent-vision>.fs-leaf{height:calc(100% - 34px)!important;min-height:0!important;overflow:hidden!important}
  #future.fs-artful .fs-collage{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(3,minmax(0,1fr))!important;
    width:100%!important;height:100%!important;gap:5px!important;padding:2px 0!important;overflow:hidden!important
  }
  #future.fs-artful .fs-vision-tile{
    display:grid!important;grid-template-rows:minmax(0,1fr) 19px!important;min-width:0!important;min-height:0!important;
    height:100%!important;padding:3px!important;overflow:hidden!important
  }
  #future.fs-artful .fs-image{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;aspect-ratio:auto!important;overflow:hidden!important}
  #future.fs-artful .fs-image>img{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;object-fit:cover!important}
  #future.fs-artful .fs-vision-tile>input{
    display:block!important;width:100%!important;min-width:0!important;height:19px!important;min-height:0!important;
    margin:0!important;padding:2px 1px!important;font-size:9px!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
  }
  #future.fs-artful .fs-upload{font-size:8px!important;padding:3px 4px!important}
  #fv-vision .fs-footer{left:14%!important;right:14%!important;top:82%!important;width:auto!important}
  #fv-vision .fs-footer .fs-leaf-nav{width:100%!important;min-width:0!important;max-width:145px!important}

  #fv-monthly .fs-heading{left:16%!important;top:20%!important;width:68%!important}
  #future.fs-artful #fsContent-monthly{left:15%!important;top:29%!important;width:70%!important;height:51%!important}
  #future.fs-artful .fs-day-labels{height:17px!important;font-size:9px!important}
  #future.fs-artful .fs-days{height:calc(100% - 17px)!important}
  #future.fs-artful .fs-days>label{padding:1px 2px!important}
  #future.fs-artful .fs-days b{font-size:10px!important}
  #future.fs-artful .fs-days textarea{font-size:9px!important;line-height:1.05!important}
  #fv-monthly .fs-footer{left:15%!important;right:15%!important;top:82.5%!important}

  #fv-yearly .fs-heading{left:11%!important;top:32%!important;width:33%!important}
  #fv-yearly .fs-heading h1{font-size:22px!important;margin-bottom:8px!important}
  #fv-yearly .fs-heading>label{margin:8px 0 10px!important;width:100%!important}
  #future.fs-artful #fsContent-yearly{left:54%!important;top:32%!important;width:35%!important;height:41%!important;overflow:hidden!important}
  #future.fs-artful .fs-leaf h2{font-size:16px!important;margin:2px 0 7px!important}
  #future.fs-artful .fs-field{min-width:0!important;font-size:10px!important;line-height:1.2!important;gap:2px!important;margin:5px 0!important;overflow:hidden!important}
  #future.fs-artful .fs-field textarea{
    display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;
    font-size:10.5px!important;line-height:1.25!important;min-height:34px!important;max-height:74px!important;padding:3px 0!important;resize:none!important
  }
  #future.fs-artful #fv-yearly .fs-footer{left:48%!important;right:8%!important;top:81.5%!important}
}