/* Keep the page selector and both navigation buttons together on phones. */
.toolbar{justify-content:flex-start!important;overflow-x:auto!important;overflow-y:hidden!important}
.toolbar>*{flex:0 0 auto}
.toolbar .page-control{min-width:112px;justify-content:center;gap:7px;padding-inline:8px!important}
.toolbar .page-control input{width:42px!important;min-width:42px;appearance:textfield;-moz-appearance:textfield}
.toolbar .page-control input::-webkit-inner-spin-button,.toolbar .page-control input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.toolbar #previousButton,.toolbar #nextButton{min-width:80px;gap:5px}
@media(max-width:700px){
  .toolbar{padding-inline:max(8px,env(safe-area-inset-left)) max(8px,env(safe-area-inset-right))!important;gap:5px!important}
  .toolbar #previousButton,.toolbar #nextButton{min-width:72px!important;padding-inline:7px!important}
  .toolbar #previousButton span,.toolbar #nextButton span{display:inline!important;font-size:13px;line-height:1}
  .toolbar #previousButton svg,.toolbar #nextButton svg{width:15px;height:15px;flex:none}
  .toolbar .page-control{min-width:100px;gap:4px;font-size:13px}
  .toolbar .page-control input{width:34px!important;min-width:34px}
}

/* R8.1: keep explicit edition controls available on every viewport. */
.topbar .edition-switch{display:flex!important;flex:0 0 auto;gap:6px}
.topbar .edition-switch .edition-button{display:inline-flex!important;align-items:center;justify-content:center;gap:5px;width:auto!important;min-width:44px;min-height:44px;padding-inline:10px!important}
.topbar .edition-switch .edition-button span{display:inline!important;font-size:13px}
@media(max-width:700px){
 .topbar{flex-wrap:wrap!important}
 .topbar .edition-switch{order:4;flex-basis:100%;justify-content:center}
 .topbar .edition-switch .edition-button{flex:0 1 150px}
}