div.forumHier > div > form,
div.forumTime > div > form,
div.forumHierRoot > div > form {
  margin: 0.5em 0;
}
.forum-post-collapser {
  font-size: 0.8em;
  margin: 0.2em 0 0 0;
  padding: 0;
  height: 1.75em;
  line-height: 1.75em;
  /* ^^^ Those sizes are finely tuned for the current selection of
     arrow characters. If those change, these should, too. Remember that
     FF/Chrome simply do not agree on alignment with most values :/.  */
  border-width: 1px;

  content: "⇡⇡⇡" /*reminder: FF/Chrome cannot agree on alignment of ⮝*/;
}
.forum-post-collapser:not(.expanded) > span::before {
  content: "⇣⇣⇣";
}
div.forumPostBody{
  max-height: 50em;
  /*overflow: auto;*/
}
div.forumPostBody.with-expander {
  display: flex;
  flex-direction: row;
  overflow: auto;
}
div.forumPostBody.with-expander div:nth-of-type(1){
  /* Main content DIV */
  overflow: auto;
}
div.forumPostBody.with-expander.expanded div:nth-of-type(1) {
  margin-bottom: 0.5em /* try to suppress scroll bar */;
}
div.forumPostBody.with-expander div:nth-of-type(2){
  /* "Tap zone" for expansion of the post, sits to the right of the
     post's content. */
  min-width: 1.25em;
  max-width: 1.25em;
  /*for testing only:*//*background: magenta;*/
  margin: 0 0 0 0.5em /* leave a gap between this and the neighboring scrollbar */;
  overflow: hidden;
  background-color: #777;
  opacity: 0.3;
}
div.forumPostBody.expanded {
  max-height: initial;
}
div.forumPostBody.shrunken {
  /* When an expandable post is un-expanded, it is shrunkend down
     to this size instead of its original size. */
  max-height: 8em;
}

div.forumSel {
  background-color: #cef;
}
div.forumObs {
  color: #bbb;
}

       on contentElem when the given widget is activated. */
    const getWidgetHandler = function(widget, contentElem){
      return function(ev){
        if(ev) ev.preventDefault();
        const wasExpanded = widget.classList.contains('expanded');
        widget.classList.toggle('expanded');
        contentElem.classList.toggle('expanded');
        if(wasExpanded){
          contentElem.classList.add('shrunken');
          contentElem.parentElement.scrollIntoView();
        }else{
          contentElem.classList.remove('shrunken');
        }
        return false;
      };
    };
    /* Adds an Expand/Collapse toggle to all div.forumPostBody
       elements which are deemed "too large" (those for which
       scrolling is currently activated because they are taller than
       their max-height). */
    document.querySelectorAll(
      'div.forumHier, div.forumTime, div.forumHierRoot'
    ).forEach(function(forumPostWrapper){
      const content = forumPostWrapper.querySelector('div.forumPostBody');
      if(!content || !scrollbarIsVisible(content)) return;
      const parent = content.parentElement,
            rightTapZone = D.div(),
            widget = D.div(),
            widgetEventHandler = getWidgetHandler(widget, content);
      content.classList.add('with-expander');
      widget.classList.add('forum-post-collapser');
      widget.addEventListener('click', widgetEventHandler, false);
      /** Append 3 children, which CSS will evenly space across the
          widget. This improves visibility over having the label
          in only the left, right, or center. */
      var i = 0;
      for( ; i < 3; ++i ) D.append(widget, D.span());
      if(content.nextSibling){
        forumPostWrapper.insertBefore(widget, content.nextSibling);
      }else{
        forumPostWrapper.appendChild(widget);
      }
      /** A double-click toggle will select "the current word" on the
          post, which is minorly annoying but otherwise harmless. Such
          a toggle has proven convenient on "excessive" posts,
          though. */
      //content.addEventListener('dblclick', widgetEventHandler);
      content.appendChild(rightTapZone);
      rightTapZone.addEventListener('click', widgetEventHandler, false);
    });
  })/*onload callback*/;
  
})(window.fossil);