Fossil

/************************************************************
 pikchr...
 DOM structure:
  <DIV.pikchr-wrapper>
    <DIV.pikchr-svg>
      <SVG.pikchr>...</SVG>
    </DIV.pikchr-svg>
    <PRE.pikchr-src>...</PRE>
    <DIV.pikchr-src>
     <PRE>pikchr source code</PRE>
     <SPAN class='hidden'><A>link to open pikchr in /pikchrshow</A></SPAN>
     <!-- ^^^ is unhidden and activated by JS code -->
    </DIV.pikchr-src>
  </DIV.pikchr-wrapper>

************************************************************/
div.pikchr-wrapper {/*outer wrapper elem for a pikchr construct*/}
div.pikchr-svg {/*wrapper for SVG.pikchr element*/}
svg.pikchr {/*pikchr SVG*/
  width: 100%/*necessary for SOME SVGs for Chrome!*/;
}

div.pikchr-src {
pre.pikchr-src {/*source code view for a pikchr (see fossil.pikchr.js)*/
  /*Wrapper for source code view of a pikchr (see fossil.pikchr.js)*/
  display: flex;
  flex-direction: column;
}
div.pikchr-src > pre {
  /*Source code for a pikchr*/
  box-sizing: border-box;
  text-align: left;
}
div.pikchr-src > span {
  /*Wrapper for a link to open a pikchr in /pikchrshow*/
  margin-top: 0.8em;
  font-size: 80%;
}
/* The .source-inline class tells the .source class that the
   source view, when enabled, should be "inline" (same position
   as the graphic), else the sources are shifted to the left as
   if they were "plain text". */
div.pikchr-wrapper.center:not(.source),
div.pikchr-wrapper.center.source.source-inline{
  text-align: center;
  /* Reminder for The Future: this impl also works:

      display: grid; place-items: center;

     and does not require setting display:inline-block on the relevant
     child items, but caniuse.com/css-grid suggests that some
     still-seemingly-legitimate browsers don't support grid mode. */
}
div.pikchr-wrapper.center > div.pikchr-svg {
  width: 100%/*necessary for Chrome!*/;
}
div.pikchr-wrapper.center:not(.source) > pre.pikchr-src,
div.pikchr-wrapper.center:not(.source) > div.pikchr-src,
div.pikchr-wrapper.center:not(.source) > div.pikchr-svg,
/* ^^^ Centered non-source-view elements */
div.pikchr-wrapper.center.source.source-inline > pre.pikchr-src,
div.pikchr-wrapper.center.source.source-inline div.pikchr-src,
div.pikchr-wrapper.center.source.source-inline > div.pikchr-svg
/* ^^^ Centered inline-source-view elements */{
  display:inline-block/*allows parent text-align to do the alignment*/;
  /* ^^^^ Browser incompatibility: inline-block causes the centered
     pikchr to shrink to the point of illegiblity in Chrome. The
     closest match on Chrome seems to be using 'unset', which centers
     by virtue of stretching it to the width of the window. Similarly,

div.pikchr-wrapper.float-right.source.source-inline{
  float: right;
  padding: 4em;
}

/* For pikchr-wrapper.source mode, toggle pre.pikchr-src and
   svg.pikchr visibility... */
div.pikchr-wrapper.source > pre.pikchr-src {
div.pikchr-wrapper.source > div.pikchr-src {
  /* Source code  ^^^^^^^ is visible, else it is hidden */
}
div.pikchr-wrapper:not(.source) > pre.pikchr-src {
div.pikchr-wrapper:not(.source) > div.pikchr-src {
  /* Hide sources when image is being shown. */
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}
div.pikchr-wrapper.source > div.pikchr-svg {