we can include multiple INPUT elements (e.g. a set of radio
   buttons). Note that these elements must sometimes be BLOCK elements
   (e.g. DIV) so that certain nesting constructs are legal.
*/
.input-with-label {
  border: 1px inset rgba(128, 128, 128, 0.5);
  border-radius: 0.25em;
  padding: 0.1em;
  margin: 0 0.5em;
  display: inline-block;
  cursor: default;
  white-space: nowrap;
}
.input-with-label > * {
  vertical-align: middle;

}
.input-with-label > input[type=text] {
  margin: 0;
}
.input-with-label > textarea {
  margin: 0;
}
/* Browsers are unfortunately inconsistent in how they
   align checkboxes and radio buttons, even if they're
   given the same vertical-align value. 'middle' seems to
   be the least bad option, rather than the ideal. */
.input-with-label > input[type=checkbox] {
  vertical-align: middle;
}
.input-with-label > input[type=radio] {
  vertical-align: middle;
}
.input-with-label > label {
  font-weight: initial;
  margin: 0 0.25em 0 0.25em;
  vertical-align: middle;
}

      btnSubmit: E('#pikchr-submit-preview'),
      cbDarkMode: E('#flipcolors-wrapper > input[type=checkbox]'),
      taContent: E('#content'),
      taPreviewText: D.attr(D.textarea(), 'rows', 20, 'cols', 60,
                            'readonly', true),
      uiControls: E('#pikchrshow-controls'),
      previewModeToggle: D.button("Preview mode"),
      markupAlignCenter: D.attr(D.checkbox(), 'id','markup-align-center'),
      markupAlignWrapper: D.span()//D.addClass(D.span(), 'input-with-label')




    };

    ////////////////////////////////////////////////////////////
    // Setup markup alignment selection...



    P.e.markupAlignCenter.addEventListener('change', function(ev){
      /* Update markdown/fossil wiki preview if it's active */
      if(P.previewMode==1 || P.previewMode==2){
        P.renderPreview();
      }
    }, false);
    D.append(P.e.markupAlignWrapper,
             P.e.markupAlignCenter,
             D.label(P.e.markupAlignCenter, "Align center?"));

    ////////////////////////////////////////////////////////////
    // Setup the preview fieldset's LEGEND element...
    D.append( P.e.previewLegend,
              P.e.previewModeToggle,
              '\u00a0',
              P.e.previewCopyButton,
              P.e.previewModeLabel,
              P.e.markupAlignWrapper );

    ////////////////////////////////////////////////////////////
    // Setup clipboard-copy of markup/SVG...
    F.copyButton(P.e.previewCopyButton, {copyFromElement: P.e.taPreviewText});
    P.e.previewCopyButton.addEventListener('text-copied', D.flashOnce.eventHandler, false);

    ////////////////////////////////////////////////////////////

                   'slow connection/server.',
                   D.br(),D.br(),
                   'Pikchr scripts may also be dragged/dropped from ',
                   'the local filesystem into the text area, but ',
                   'the auto-preview option does not apply to them.'
                  )
        )
      )/*.childNodes.forEach(function(ch){
        ch.style.margin = "0 0.25em";
      })*/;
      D.append(P.e.uiControls, cbWrap);
      P.predefinedPiks.forEach(function(script,ndx){
        const opt = D.option(script.code ? script.code.trim() :'', script.name);
        D.append(selectScript, opt);
        if(!ndx) selectScript.selectedIndex = 0 /*timing/ordering workaround*/;
        if(!script.code) D.disable(opt);
      });

      P.response.inputText = P.e.taContent.value;
      P.response.raw = P.e.previewTarget.innerHTML;
      P.renderPreview()/*it's already rendered, but this gets all
                         labels/headers in sync.*/;
    }    
  }/*F.onPageLoad()*/);

  /* Shows or hides P.e.markupAlignWrapper */
  const showMarkupAlignment = function(showIt){
    P.e.markupAlignWrapper.classList[showIt ? 'remove' : 'add']('hidden');
  };

  /**
     Updates the preview view based on the current preview mode and
     error state.
  */
  P.renderPreview = function f(){
    if(!f.hasOwnProperty('rxNonce')){
      f.rxNonce = /<!--.+-->\r?\n?/g /*pikchr nonce comments*/;
    }
    const preTgt = this.e.previewTarget;
    if(this.response.isError){
      preTgt.innerHTML = this.response.raw;
      D.addClass(preTgt, 'error');
      this.e.previewModeLabel.innerText = "Error";
      return;
    }
    D.removeClass(preTgt, 'error');
    D.removeClass(P.e.previewCopyButton, 'disabled');
    D.enable(this.e.previewModeToggle, this.e.markupAlignCenter);
    let label;
    switch(this.previewMode){
    case 0:
      label = "SVG";
      showMarkupAlignment(false);
      preTgt.innerHTML = this.response.raw;
      this.e.taPreviewText.value = this.response.raw.replace(f.rxNonce, '')/*for copy button*/;
      break;
    case 1:
      label = "Markdown";
      showMarkupAlignment(true);
      this.e.taPreviewText.value = [
        '```pikchr'+(this.e.markupAlignCenter.checked? ' center' : ''),

        this.response.inputText, '```'
      ].join('\n');
      D.append(D.clearElement(preTgt), this.e.taPreviewText);
      break;
    case 2:
      label = "Fossil wiki";
      showMarkupAlignment(true);
      this.e.taPreviewText.value = [
        '<verbatim type="pikchr',
        this.e.markupAlignCenter.checked ? ' center' : '',
        '">', this.response.inputText, '</verbatim>'
      ].join('');
      D.append(D.clearElement(preTgt), this.e.taPreviewText);
      break;
    case 3:
      label = "Raw SVG";
      showMarkupAlignment(false);

     the rendered SVG content or error report.
  */
  P.preview = function fp(){
    if(!fp.hasOwnProperty('toDisable')){
      fp.toDisable = [
        /* input elements to disable during ajax operations */
        this.e.btnSubmit, this.e.taContent,

        this.e.cbAutoPreview, this.e.selectScript
        /* handled separately: previewModeToggle, previewCopyButton,
           markupAlignCenter */
      ];
      fp.target = this.e.previewTarget;
      fp.updateView = function(c,isError){
        P.previewMode = 0;
        P.response.raw = c;
        P.response.isError = isError;
        D.enable(fp.toDisable);
        P.renderPreview();
      };
    }
    D.disable(fp.toDisable, this.e.previewModeToggle, this.e.markupAlignCenter);
    D.addClass(this.e.previewCopyButton, 'disabled');
    const content = this.e.taContent.value.trim();
    this.response.raw = undefined;
    this.response.inputText = content;
    if(!content){
      fp.updateView("No pikchr content!",true);
      return this;

  CX("#pikchrshow-controls {" /* where the buttons live */
     "display: flex; flex-direction: row; "
     "align-items: center; flex-wrap: wrap;"
     "}");
  CX("#pikchrshow-controls > * {"
     "display: inline; margin: 0 0.25em 0.5em 0;"
     "}");
  CX("#pikchrshow-output-wrapper label {"
     "cursor: pointer;"
     "}");
  CX("body.pikchrshow .input-with-label > * {"
     "margin: 0 0.2em; cursor: pointer;"
     "}");
  CX("#pikchrshow-output.dark-mode svg {"
     /* Flip the colors to approximate a dark theme look */
     "filter: invert(1) hue-rotate(180deg);"
     "}");
  CX("#pikchrshow-output-wrapper {"
     "padding: 0.25em 0.5em; border-radius: 0.25em;"
     "}");
  CX("#pikchrshow-output-wrapper > legend {"
     "display: flex; flex-direction: row;"
     "align-items: center;"
     "}");
  CX("#pikchrshow-output-wrapper > legend > *,"
     "#pikchrshow-output-wrapper > legend > .copy-button"
     /* ^^^ better-match .copy-button selector required to override
        default */
     "{margin-right: 0.5em}");
  CX(".dragover {border: 0.5em dotted rgba(0,255,0,0.6)}");
  CX("</style>");
  CX("<div>Input pikchr code and tap Preview to render it:</div>");
  CX("<div id='sbs-wrapper'>");