/* Gelli Belle V60 — phone and tablet reader controls, compact landscape layout.
   This final stylesheet deliberately overrides older version-specific hide rules.
   Immersive fullscreen remains pure artwork with no visible overlay controls. */
html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .topbar #fullButton{
  display:inline-flex!important;align-items:center!important;gap:6px;
  min-height:40px;min-width:42px;padding:0 12px;
  border-radius:12px;white-space:nowrap;
}
html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .topbar #fullLabel{display:inline!important;font-size:12px;white-space:nowrap;}
html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .topbar #fullButton svg{width:17px;height:17px;flex:none;}
html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .topbar #fullButton:focus-visible{
 outline:3px solid #dd9b54;outline-offset:2px;
}
/* Give mute a real finger-sized hit target; no slider may cover it. */
html.reader-dedicated #musicMute,.reader-embedded #musicMute{
  width:44px!important;min-width:44px!important;flex:0 0 44px!important;
  height:44px!important;min-height:44px!important;border-radius:12px;
  position:relative;z-index:2;touch-action:manipulation;
}
#musicMute[aria-pressed="true"]{background:#f7dfd7;color:#9a4a37;}
#musicMute svg{pointer-events:none;}
@media (max-width:720px){
 html.reader-dedicated .topbar{gap:6px;flex-wrap:wrap;justify-content:center;}
 html.reader-dedicated .topbar .branding{display:none;}
 html.reader-dedicated .topbar .top-actions{display:flex;align-items:center;gap:6px;justify-content:center;flex-wrap:wrap;}
 html.reader-dedicated .topbar .header-button,html.reader-dedicated .topbar .exit-link,html.reader-dedicated .topbar .gb40-reader-playhouse-link{min-height:40px;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .topbar #fullButton{background:#347e9e;border-color:#347e9e;color:white;}
 html.reader-dedicated .soundtrack-bar{grid-template-columns:minmax(94px,auto) minmax(55px,1fr) 44px!important;column-gap:6px!important;row-gap:3px!important;padding:5px 8px!important;min-height:51px!important;}
 html.reader-dedicated .soundtrack-copy{padding-left:7px;}
 html.reader-dedicated .soundtrack-volume-label{grid-column:1/-1;padding:0 8px!important;}
}
/* Landscape on iPhone/Android: don't let controls steal the entire viewport.
   Phone remains one-page layout, with accessible navigation and fullscreen. */
@media (orientation:landscape) and (max-height:550px) and (pointer:coarse){
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode){
   height:100dvh!important;min-height:0!important;max-height:100dvh!important;
   overflow:hidden!important;gap:2px!important;
   padding:max(4px,env(safe-area-inset-top)) max(7px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(7px,env(safe-area-inset-left))!important;
 }
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .topbar{flex-wrap:nowrap;min-height:39px;max-width:100%;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .branding{display:none!important;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .top-actions{width:100%;flex-wrap:nowrap;justify-content:space-evenly;gap:4px;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .top-actions>.header-button,
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .top-actions>.exit-link,
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .top-actions>.gb40-reader-playhouse-link{min-width:36px;min-height:37px;height:37px;padding:0 7px;border-radius:10px;font-size:11px;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) #thumbButton{width:38px;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) #fullButton{min-height:37px;height:37px;padding:0 9px;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .gb59-pan-toggle[hidden]{display:none!important;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) #motionToggle{display:none!important;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .install-reader-button{display:none!important;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .stage{flex:1 1 auto;min-height:0;margin:0!important;padding:0!important;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .book,
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .book[data-layout="single"],
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .book[data-layout="solo"]{
   width:min(78vw,calc((100dvh - 155px)*var(--page-ratio)))!important;
   height:auto!important;max-height:calc(100dvh - 155px)!important;
   aspect-ratio:var(--page-ratio)!important;flex:0 1 auto;
 }
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .book[data-layout="panorama"]{
   width:min(90vw,calc((100dvh - 155px)*2.5))!important;
   max-height:calc(100dvh - 155px)!important;aspect-ratio:2.5!important;
 }
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .soundtrack-bar{
   display:grid!important;flex:0 0 auto;grid-template-columns:minmax(98px,auto) minmax(80px,1fr) 44px minmax(54px,85px)!important;
   min-height:43px!important;padding:2px 8px!important;column-gap:5px!important;margin:0 auto!important;
 }
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .soundtrack-play{height:34px;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .soundtrack-copy{padding-left:5px;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .soundtrack-volume-label{grid-column:auto;border-left:1px solid #dbc8aa!important;padding:0 5px!important;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .footer{flex:0 0 auto;width:min(720px,95%)!important;margin:0 auto!important;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .reading-row{margin-bottom:0;font-size:11px;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .gb38-page-scrub{padding:2px 6px;margin:2px 0 0;min-height:25px;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .gb38-page-label{display:none;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .gb38-page-scrub{grid-template-columns:minmax(80px,1fr) auto;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .bottom-row{display:none!important;}
}
@media (orientation:landscape) and (max-height:350px) and (pointer:coarse){
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .book,
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .book[data-layout="single"],
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .book[data-layout="solo"]{width:min(80vw,calc((100dvh - 132px)*var(--page-ratio)))!important;max-height:calc(100dvh - 132px)!important;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .book[data-layout="panorama"]{width:min(90vw,calc((100dvh - 132px)*2.5))!important;max-height:calc(100dvh - 132px)!important;}
}
/* Original authoring rule: the immersive reader shows only the illustration. */
html.reader-dedicated :is(.app:fullscreen,.app.focus-mode) .topbar,
html.reader-dedicated :is(.app:fullscreen,.app.focus-mode) .soundtrack-bar,
html.reader-dedicated :is(.app:fullscreen,.app.focus-mode) .footer{display:none!important;}

/* Simplified one-line phone toolbar: Library already returns to Playhouse. */
@media (max-width:720px) and (pointer:coarse){
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .topbar{flex-wrap:nowrap!important;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .top-actions{flex-wrap:nowrap!important;justify-content:center!important;gap:5px;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) #motionToggle,
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .gb40-reader-playhouse-link,
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .install-reader-button{display:none!important;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .exit-link{white-space:nowrap;padding:0 9px;}
}
@media (max-width:360px) and (pointer:coarse){
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .topbar #fullButton{padding:0 8px;min-width:0;}
 html.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .topbar #fullLabel{font-size:11px;}
}

/* iOS does not expose reliable HTMLAudioElement volume control. */
html.gb60-ios-volume .soundtrack-volume-label{display:none!important;}

/* Remove the nonfunctional media-volume slider on iOS without leaving an empty grid column. */
html.gb60-ios-volume .soundtrack-bar{grid-template-columns:minmax(100px,auto) minmax(64px,1fr) 44px!important;}
@media (orientation:landscape) and (max-height:550px) and (pointer:coarse){
 html.gb60-ios-volume.reader-dedicated .app:not(:fullscreen):not(.focus-mode) .soundtrack-bar{grid-template-columns:minmax(100px,auto) minmax(80px,1fr) 44px!important;}
}