/* Translate only the floating controls; article geometry stays unchanged. */
@media screen and (max-width:899px){
  :root{--nav:calc(52px + env(safe-area-inset-bottom))}
  body.is-reader:not(.is-fullscreen) #nav{
    transition:translate .16s ease-out,opacity .16s ease-out,visibility 0s;
  }
  body.is-reader.reading-nav-hidden:not(.is-fullscreen) #nav{
    opacity:0;visibility:hidden;pointer-events:none;transition-delay:0s,0s,.16s;
  }
  body.is-reader.reading-nav-hidden:not(.is-fullscreen) #nav{translate:0 calc(100% + 2px)}
  :root body.is-reader:not(.is-fullscreen) .reader-dock{
    bottom:calc(var(--nav) + 8px);
    transition:translate .16s ease-out;
  }
  body.is-reader.reading-nav-hidden:not(.is-fullscreen) .reader-dock{
    translate:0 calc(var(--nav) - env(safe-area-inset-bottom));
  }
  :root[data-theme=eink] body.is-reader{--nav:0px}
  :root[data-theme=eink] body.is-reader #nav{display:none}
  :root[data-theme=eink] body.is-reader:not(.is-fullscreen) #main{
    height:100dvh;padding-top:calc(6px + env(safe-area-inset-top));
    padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));
  }
  :root[data-theme=eink] body.is-reader:not(.is-fullscreen) .reader-content{padding-bottom:calc(78px + env(safe-area-inset-bottom))}
  :root[data-theme=eink] body.is-reader:not(.is-fullscreen) .reader-dock{
    bottom:calc(8px + env(safe-area-inset-bottom));translate:none;
  }
}
@media(prefers-reduced-motion:reduce){
  body.is-reader #nav,body.is-reader .reader-dock{transition:none}
}
:root[data-theme=eink] body.is-reader #nav,
:root[data-theme=eink] body.is-reader .reader-dock{transition:none}