/******************************************************************************/
/*                                                                            */
/*  spotlight.css - the spotlight: MECHANISM ONLY                             */
/*                                                                            */
/*  There is deliberately not one colour in this file, and not one style name */
/*  either. The tints live in each style sheet, next to that style's own token */
/*  palette.                                                                  */
/*                                                                            */
/*  That split is not tidiness, it is correctness. An earlier draft carried    */
/*  the colours here and keyed the dark recipe on two style names,            */
/*  .highlight-rexx-dark and .highlight-rexx-electric. There are SIXTEEN dark  */
/*  styles in css/: tokio-night, rgfdark and the twelve vim-dark ones would    */
/*  all have been served the light recipe -- a strong wash over a dark ground, */
/*  which buries the token colouring. Nobody would have found out until        */
/*  somebody presented with vim-dark-desert. A sheet that reaches into other   */
/*  sheets by name is incomplete the moment a new style is added, and it is    */
/*  invisible to whoever edits that style's palette.                          */
/*                                                                            */
/*  So: this file owns HOW a marked line behaves. Each style owns WHAT COLOUR  */
/*  its pens are, because that is the same decision as its token palette and   */
/*  belongs in the same file. A style declares four pens as custom properties: */
/*                                                                            */
/*      .highlight-rexx-<name> { --spot-pen-1-bar: #...;                      */
/*                               --spot-pen-1-bg:  rgba(...); ... }           */
/*                                                                            */
/*  A style that declares none still works: it falls back to the single        */
/*  neutral pen below. That is a FALLBACK so nothing renders blank, not a      */
/*  palette -- a style meant to be used with the pen declares its own.         */
/*                                                                            */
/******************************************************************************/

/* ------------------------------------------------------------------------- */
/* The box. A marked line has to paint edge to edge, but a line span is       */
/* inline and only as wide as its text, so a bare background would stop at    */
/* the last character and read as a ragged text selection rather than as a    */
/* stroke of a pen. inline-block + width:100% squares it off.                 */
/*                                                                            */
/* The stroke deliberately runs across the line-number gutter as well. That   */
/* is what makes it read as a pen stroke: nobody marking a printed listing    */
/* steers around the number in the margin. It reaches there for free, because */
/* a numbered listing already slides its line spans left over the gutter with */
/* position:relative and left:-4em.                                           */
/*                                                                            */
/* Only LINES get the box. A prose fragment that joined the beat must not be  */
/* boxed -- it only reveals -- hence the code > span scoping throughout.      */
/* ------------------------------------------------------------------------- */
code > span[data-spot-beat] {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  border-left: 3px solid transparent;   /* reserved always, so nothing shifts */
  margin-left: -3px;                    /* ...and reclaimed, so nothing moves */
  /* The bar's strip is declared here, transparent and already at its full    */
  /* width, so lighting a line animates its COLOUR and nothing else. Left to  */
  /* the .spot-on rule alone the offset would interpolate from zero too, and  */
  /* a strip narrower than the overhang is entirely clipped -- the bar would  */
  /* wipe in over the last 80ms instead of fading with the wash.              */
  box-shadow: inset var(--spot-bar-x, 0px) 0 0 0 transparent;
  transition: background-color var(--spot-dur, .28s) ease,
              border-left-color var(--spot-dur, .28s) ease,
              box-shadow var(--spot-dur, .28s) ease;
}

/* A marked line is as tall as the line it stands on (v278, Rony 11-Oct:     */
/* "a thin white line between the lines numbered 3 and 4"). Pandoc's own     */
/* highlighting sheets give the line spans of a block that is not Rexx (an  */
/* output, say) line-height 1.25 in a <pre> of 1.35: each line box is then   */
/* a pixel taller than the box we paint, and a run of marked lines shows the */
/* ground between them. Inheriting the <pre>'s value fills the line box and  */
/* moves nothing: the strut already makes every line that tall. The second   */
/* selector outweighs Pandoc's "pre > code.sourceCode > span".               */
code > span[data-spot-beat],
pre > code.sourceCode > span[data-spot-beat] {
  line-height: inherit;
}

/* And as tall as the line box, when a scaled screen makes that taller than */
/* the line-height (v296, Rony 15-Oct: 230, 270, 360, outputs in IBM Plex   */
/* Mono): spotlight.js measures the difference per block, --spot-gap, and  */
/* each marked line takes it as padding below its text, given back as a     */
/* negative margin -- its line box, and so every line, stays where it was. */
/* Nothing on paper: the print rules below pad by their own pixel.          */
@media screen {
  code > span[data-spot-beat] {
    padding-bottom: var(--spot-gap, 0px);
    margin-bottom: calc(-1 * var(--spot-gap, 0px));
  }
}

/* ------------------------------------------------------------------------- */
/* The strike, and why the right-hand end is a SHADOW and not extra width.    */
/*                                                                            */
/* That same left:-4em is a relative offset: it moves what is PAINTED and     */
/* leaves the layout box where it was. So the line keeps the width of the     */
/* <pre>'s content area and is merely drawn further left, and it ends short   */
/* on the right by exactly what it gained on the left, plus the <pre>'s right */
/* padding. Nothing revealed that for years, because nothing painted a        */
/* background on those spans until the spotlight did.                        */
/*                                                                            */
/* The obvious repair -- widen the box by that shortfall -- works and is      */
/* wrong: the wrapper is a scrolling box (div.code, overflow-x:auto), a wider */
/* line is real overflow, and a horizontal scrollbar appears under a listing  */
/* that fits perfectly well. The same trap the runtime already documents for  */
/* pre.output.numberSource.                                                   */
/*                                                                            */
/* A box-shadow paints outside the border box but is INK overflow, never      */
/* scrollable overflow, so it colours the missing strip and moves no          */
/* scrollbar. Offset right by the shortfall, no blur, no spread: a solid copy */
/* of the line peeking out from behind it, in the pen's own colour. It is     */
/* also clipped by the scrolling box at exactly the edge we want it to stop.  */
/*                                                                            */
/*   --spot-bleed-r  the shortfall, measured on the page by spotlight.js and  */
/*                   set per block. Measured, not written here: the gutter is */
/*                   4em in a sheet this file does not own and a future style */
/*                   may set it differently, and this file holds no style     */
/*                   values by design. Absent the script it is 0 and the      */
/*                   stroke simply ends where it always did.                  */
/*   + 3px           pays back the bar: margin-left:-3px slides the box left  */
/*                   so the reserved border costs no indent, but under        */
/*                   border-box the border eats into the width.               */
/* ------------------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
/* The bar, and why the left-hand end is an INSET shadow.                    */
/*                                                                           */
/* border-left paints at the span's own left edge. On a NUMBERED listing     */
/* that edge is not where the stroke starts: left:-4em drags the whole box   */
/* left of div.code's padding box, and div.code is a scrolling box, so the   */
/* bar is clipped away entirely. Measured: zero pixels of the bar colour on  */
/* the slide, in every style. It only ever showed on unnumbered blocks --    */
/* which is why a program listing and the ~~~output block of the same beat   */
/* did not match, one wearing a bar and the other not.                       */
/*                                                                           */
/* An INSET shadow with no blur and no spread fills a strip of width dx down */
/* the inside of the left edge. Give it the width of the overhang and the    */
/* same clip that ate the border trims the strip to exactly the 3px that     */
/* survive -- the bar lands on the visible edge without anyone computing     */
/* where that edge is. It paints above the wash and below the border, and it */
/* rides the transition already declared for box-shadow.                     */
/*                                                                           */
/*   --spot-bar-x  the overhang, measured per block by spotlight.js beside   */
/*                 --spot-bleed-r. Absent the script it is 0, the strip has  */
/*                 no width, and border-left paints the bar as it always     */
/*                 did -- correct wherever it was correct before.            */
/*                                                                           */
/* Keep border-left-color set. It is what draws the bar in the unnumbered    */
/* case and whenever the script has not run, and where the strip does the    */
/* work the border is clipped and costs nothing.                             */
/* ------------------------------------------------------------------------- */
code > span[data-spot-pen="1"].spot-on {
  background-color: var(--spot-pen-1-bg, rgba(255, 214, 0, .40));
  border-left-color: var(--spot-pen-1-bar, #E6B800);
  box-shadow: inset var(--spot-bar-x, 0px) 0 0 0
              var(--spot-pen-1-bar, #E6B800),
              calc(var(--spot-bleed-r, 0px) + 3px) 0 0 0
              var(--spot-pen-1-bg, rgba(255, 214, 0, .40));
}
code > span[data-spot-pen="2"].spot-on {
  background-color: var(--spot-pen-2-bg, rgba(255, 214, 0, .40));
  border-left-color: var(--spot-pen-2-bar, #E6B800);
  box-shadow: inset var(--spot-bar-x, 0px) 0 0 0
              var(--spot-pen-2-bar, #E6B800),
              calc(var(--spot-bleed-r, 0px) + 3px) 0 0 0
              var(--spot-pen-2-bg, rgba(255, 214, 0, .40));
}
code > span[data-spot-pen="3"].spot-on {
  background-color: var(--spot-pen-3-bg, rgba(255, 214, 0, .40));
  border-left-color: var(--spot-pen-3-bar, #E6B800);
  box-shadow: inset var(--spot-bar-x, 0px) 0 0 0
              var(--spot-pen-3-bar, #E6B800),
              calc(var(--spot-bleed-r, 0px) + 3px) 0 0 0
              var(--spot-pen-3-bg, rgba(255, 214, 0, .40));
}
code > span[data-spot-pen="4"].spot-on {
  background-color: var(--spot-pen-4-bg, rgba(255, 214, 0, .40));
  border-left-color: var(--spot-pen-4-bar, #E6B800);
  box-shadow: inset var(--spot-bar-x, 0px) 0 0 0
              var(--spot-pen-4-bar, #E6B800),
              calc(var(--spot-bleed-r, 0px) + 3px) 0 0 0
              var(--spot-pen-4-bg, rgba(255, 214, 0, .40));
}

/* On screen, two seams between marked lines, both Firefox's (v299, found */
/* at 125% and 200%; Chromium snaps the edges to the pixel and has none).   */
/* Two marked lines meet at a fraction of a pixel under the stage's         */
/* transform, and Firefox smooths the edges of both onto that pixel:        */
/*                                                                           */
/* - the washes: two see-through layers there add up to a darker hair. An  */
/*   opaque colour laid twice is the same colour, so where the line stands */
/*   on a solid ground spotlight.js mixes the pen over it and puts it in    */
/*   --spot-solid. Where the ground is not one colour (a picture, a         */
/*   gradient, a see-through block) it puts nothing, and the wash stays as  */
/*   it was.                                                                */
/* - the bar: Firefox smooths the top and bottom of an inset shadow too,    */
/*   even one of no width, and leaves a hair of the bar's colour all along  */
/*   the line. So on screen the bar is not a shadow but what it is on paper */
/*   (see the print rules below): 3px of gradient in the ground, ending at  */
/*   --spot-bar-x. Its colour, --spot-bar-now, is a registered property, so */
/*   it still fades in with the wash. With --spot-bar-x at 0 (no numbers)   */
/*   the gradient has no width, and border-left draws the bar, as before.   */
/*                                                                           */
/* Paper is left alone: it mixes the pen over white by itself. These come   */
/* before the ink, box, ring and hatch rules, which weigh as much and must  */
/* still win; the pen-drawn wash (.spot-stroke) is answered after its own   */
/* rules, further down.                                                      */
@property --spot-bar-now {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@media screen {
  code > span[data-spot-beat] {
    background-image: linear-gradient(to right,
                transparent calc(var(--spot-bar-x, 0px) - 3px),
                var(--spot-bar-now) calc(var(--spot-bar-x, 0px) - 3px),
                var(--spot-bar-now) var(--spot-bar-x, 0px),
                transparent var(--spot-bar-x, 0px));
    background-repeat: no-repeat;
    box-shadow: none;
    transition: background-color var(--spot-dur, .28s) ease,
                border-left-color var(--spot-dur, .28s) ease,
                --spot-bar-now var(--spot-dur, .28s) ease,
                box-shadow var(--spot-dur, .28s) ease;
  }
  code > span[data-spot-pen="1"].spot-on {
    --spot-bar-now: var(--spot-pen-1-bar, #E6B800);
    background-color: var(--spot-solid, var(--spot-pen-1-bg, rgba(255, 214, 0, .40)));
    box-shadow: calc(var(--spot-bleed-r, 0px) + 3px) 0 0 0
                var(--spot-solid, var(--spot-pen-1-bg, rgba(255, 214, 0, .40)));
  }
  code > span[data-spot-pen="2"].spot-on {
    --spot-bar-now: var(--spot-pen-2-bar, #E6B800);
    background-color: var(--spot-solid, var(--spot-pen-2-bg, rgba(255, 214, 0, .40)));
    box-shadow: calc(var(--spot-bleed-r, 0px) + 3px) 0 0 0
                var(--spot-solid, var(--spot-pen-2-bg, rgba(255, 214, 0, .40)));
  }
  code > span[data-spot-pen="3"].spot-on {
    --spot-bar-now: var(--spot-pen-3-bar, #E6B800);
    background-color: var(--spot-solid, var(--spot-pen-3-bg, rgba(255, 214, 0, .40)));
    box-shadow: calc(var(--spot-bleed-r, 0px) + 3px) 0 0 0
                var(--spot-solid, var(--spot-pen-3-bg, rgba(255, 214, 0, .40)));
  }
  code > span[data-spot-pen="4"].spot-on {
    --spot-bar-now: var(--spot-pen-4-bar, #E6B800);
    background-color: var(--spot-solid, var(--spot-pen-4-bg, rgba(255, 214, 0, .40)));
    box-shadow: calc(var(--spot-bleed-r, 0px) + 3px) 0 0 0
                var(--spot-solid, var(--spot-pen-4-bg, rgba(255, 214, 0, .40)));
  }
}

/* ------------------------------------------------------------------------- */
/* Paged media. Transitions do not exist on paper and a printed page is       */
/* always the finished state, so every beat prints struck. This is also what  */
/* makes the feature degrade sanely outside the slide runtime: in md2html,    */
/* md2pdf and md2epub there is no "advance", so the beats simply collapse     */
/* into one finished picture instead of breaking.                             */
/* ------------------------------------------------------------------------- */
/* On paper the wash is SOLID (v274, Rony 11-Oct): the pen's colour as it  */
/* shows over white paper, worked out from its alpha. Firefox writes a      */
/* line's ground and its bleed shadow to the PDF as two see-through        */
/* rectangles, and does not clip the shadow to outside the box: where they */
/* overlap the wash came out darker, with an edge ("a vertical bar 2em     */
/* before the end"), and lines a hair apart showed a seam between them.    */
/* Solid, an overlap does not show. The colour is the same as on screen    */
/* over a white ground.                                                    */
/* No shadows on paper at all (v278): Firefox clips an outer shadow to     */
/* outside its box with a clip path of its own, and every clip edge that   */
/* falls between two pixels is a hairline in the PDF viewer -- the bar 2em */
/* before the end was still there, fainter, and so were the seams. The box */
/* itself is made wider by the shortfall instead (on paper nothing         */
/* scrolls), and one pixel taller with the pixel given back as margin, so  */
/* a line overlaps the next one instead of meeting it at an edge.          */
/* The bar is not an inset shadow on paper: Firefox paints one as the box  */
/* less a shifted box, the box's clip rounded and the other not, and the  */
/* slivers left -- in the bar's colour, along the top, the bottom and the  */
/* right end of every line -- were the seams and the bar. A gradient in   */
/* the ground puts the same 3px in the same place, as a plain rectangle.   */
@media print {
  code > span[data-spot-beat] { transition: none; }

  code > span[data-spot-pen="1"] {
    --spot-paper-bg: rgb(from var(--spot-pen-1-bg, rgba(255, 214, 0, .40))
                     calc(r * alpha + 255 * (1 - alpha))
                     calc(g * alpha + 255 * (1 - alpha))
                     calc(b * alpha + 255 * (1 - alpha)) / 1);
    background-color: var(--spot-paper-bg);
    border-left-color: var(--spot-pen-1-bar, #E6B800);
    background-image: linear-gradient(to right,
                transparent calc(var(--spot-bar-x, 0px) - 3px),
                var(--spot-pen-1-bar, #E6B800) calc(var(--spot-bar-x, 0px) - 3px),
                var(--spot-pen-1-bar, #E6B800) var(--spot-bar-x, 0px),
                transparent var(--spot-bar-x, 0px));
    width: calc(100% + var(--spot-bleed-r, 0px) + 3px);
    padding-bottom: 1px;
    margin-bottom: -1px;
    box-shadow: none;
  }
  code > span[data-spot-pen="2"] {
    --spot-paper-bg: rgb(from var(--spot-pen-2-bg, rgba(255, 214, 0, .40))
                     calc(r * alpha + 255 * (1 - alpha))
                     calc(g * alpha + 255 * (1 - alpha))
                     calc(b * alpha + 255 * (1 - alpha)) / 1);
    background-color: var(--spot-paper-bg);
    border-left-color: var(--spot-pen-2-bar, #E6B800);
    background-image: linear-gradient(to right,
                transparent calc(var(--spot-bar-x, 0px) - 3px),
                var(--spot-pen-2-bar, #E6B800) calc(var(--spot-bar-x, 0px) - 3px),
                var(--spot-pen-2-bar, #E6B800) var(--spot-bar-x, 0px),
                transparent var(--spot-bar-x, 0px));
    width: calc(100% + var(--spot-bleed-r, 0px) + 3px);
    padding-bottom: 1px;
    margin-bottom: -1px;
    box-shadow: none;
  }
  code > span[data-spot-pen="3"] {
    --spot-paper-bg: rgb(from var(--spot-pen-3-bg, rgba(255, 214, 0, .40))
                     calc(r * alpha + 255 * (1 - alpha))
                     calc(g * alpha + 255 * (1 - alpha))
                     calc(b * alpha + 255 * (1 - alpha)) / 1);
    background-color: var(--spot-paper-bg);
    border-left-color: var(--spot-pen-3-bar, #E6B800);
    background-image: linear-gradient(to right,
                transparent calc(var(--spot-bar-x, 0px) - 3px),
                var(--spot-pen-3-bar, #E6B800) calc(var(--spot-bar-x, 0px) - 3px),
                var(--spot-pen-3-bar, #E6B800) var(--spot-bar-x, 0px),
                transparent var(--spot-bar-x, 0px));
    width: calc(100% + var(--spot-bleed-r, 0px) + 3px);
    padding-bottom: 1px;
    margin-bottom: -1px;
    box-shadow: none;
  }
  code > span[data-spot-pen="4"] {
    --spot-paper-bg: rgb(from var(--spot-pen-4-bg, rgba(255, 214, 0, .40))
                     calc(r * alpha + 255 * (1 - alpha))
                     calc(g * alpha + 255 * (1 - alpha))
                     calc(b * alpha + 255 * (1 - alpha)) / 1);
    background-color: var(--spot-paper-bg);
    border-left-color: var(--spot-pen-4-bar, #E6B800);
    background-image: linear-gradient(to right,
                transparent calc(var(--spot-bar-x, 0px) - 3px),
                var(--spot-pen-4-bar, #E6B800) calc(var(--spot-bar-x, 0px) - 3px),
                var(--spot-pen-4-bar, #E6B800) var(--spot-bar-x, 0px),
                transparent var(--spot-bar-x, 0px));
    width: calc(100% + var(--spot-bleed-r, 0px) + 3px);
    padding-bottom: 1px;
    margin-bottom: -1px;
    box-shadow: none;
  }
}

/* ------------------------------------------------------------------------- */
/* A marked TEXT (spot="trap:[NOVALUE NAME ANY]") -- v217.                    */
/*                                                                           */
/* The same pen as a line, on a smaller surface: just the wash, tight around */
/* the text, the way one runs a highlighter over two words. No bar and no    */
/* edge-to-edge stroke -- those say "this line", and this says "these words".*/
/*                                                                           */
/* The UA gives <mark> a yellow background and black text; both are undone,  */
/* so the token colours show through and nothing is lit before its beat.     */
/* A text that spans several tokens is several <mark>s side by side; only    */
/* the first and last round their outer corners, so it reads as one stroke.  */
/* ------------------------------------------------------------------------- */
.spot-mark {
  background-color: transparent;
  color: inherit;
  padding: 0;
  transition: background-color var(--spot-dur, .28s) ease;
}
.spot-mark-first {
  border-top-left-radius: .2em;
  border-bottom-left-radius: .2em;
}
.spot-mark-last {
  border-top-right-radius: .2em;
  border-bottom-right-radius: .2em;
}
.spot-mark[data-spot-pen="1"].spot-on {
  background-color: var(--spot-pen-1-bg, rgba(255, 214, 0, .40));
}
.spot-mark[data-spot-pen="2"].spot-on {
  background-color: var(--spot-pen-2-bg, rgba(255, 214, 0, .40));
}
.spot-mark[data-spot-pen="3"].spot-on {
  background-color: var(--spot-pen-3-bg, rgba(255, 214, 0, .40));
}
.spot-mark[data-spot-pen="4"].spot-on {
  background-color: var(--spot-pen-4-bg, rgba(255, 214, 0, .40));
}

/* ------------------------------------------------------------------------- */
/* How the marks come in (v224; Rony, 28-Sep: the animation he writes on the */
/* spot should be honoured). The empty trigger of a beat,                    */
/*                                                                           */
/*     []{spot=trap .afterPrev anim=pen anim-duration=3}                     */
/*                                                                           */
/* has nothing of its own to animate, so spotlight.js hands what it says to  */
/* the beat's marks: --spot-dur, the time they take (0 for anim=cut), and     */
/* .spot-stroke for anim=pen. The default, anim=fade, is the wash fading in, */
/* as it always did.                                                         */
/*                                                                           */
/* The pen is the wash drawn from left to right: the pen's colour as a       */
/* background IMAGE that grows from nothing to the full width, while the     */
/* background colour stays clear. A text cut into several <mark>s (one per   */
/* token) is ONE stroke: spotlight.js gives each piece its share of the time */
/* and a delay, so the pen runs through them in order.                        */
/* ------------------------------------------------------------------------- */
code > span[data-spot-pen="1"], .spot-mark[data-spot-pen="1"] { --spot-ink: var(--spot-pen-1-bg, rgba(255, 214, 0, .40)); }
code > span[data-spot-pen="2"], .spot-mark[data-spot-pen="2"] { --spot-ink: var(--spot-pen-2-bg, rgba(255, 214, 0, .40)); }
code > span[data-spot-pen="3"], .spot-mark[data-spot-pen="3"] { --spot-ink: var(--spot-pen-3-bg, rgba(255, 214, 0, .40)); }
code > span[data-spot-pen="4"], .spot-mark[data-spot-pen="4"] { --spot-ink: var(--spot-pen-4-bg, rgba(255, 214, 0, .40)); }

code > span[data-spot-beat].spot-stroke,
.spot-mark.spot-stroke {
  background-image: linear-gradient(var(--spot-ink), var(--spot-ink));
  background-repeat: no-repeat;
  background-size: 0% 100%;
}
.spot-mark.spot-stroke {
  transition: background-size var(--spot-dur, .28s) linear;
}
code > span[data-spot-beat].spot-stroke {
  transition: background-size var(--spot-dur, .28s) linear,
              border-left-color var(--spot-dur, .28s) ease,
              box-shadow var(--spot-dur, .28s) ease;
}
code > span[data-spot-beat].spot-stroke.spot-on,
.spot-mark.spot-stroke.spot-on {
  background-color: transparent;
  background-size: 100% 100%;
}
/* On screen the bar is a layer of the ground (v299, see above): the pen  */
/* draws its stroke under it, opaque where the ground is solid, and the    */
/* bar fades in as it always did.                                          */
@media screen {
  code > span[data-spot-beat].spot-stroke {
    background-image: linear-gradient(to right,
                transparent calc(var(--spot-bar-x, 0px) - 3px),
                var(--spot-bar-now) calc(var(--spot-bar-x, 0px) - 3px),
                var(--spot-bar-now) var(--spot-bar-x, 0px),
                transparent var(--spot-bar-x, 0px)),
      linear-gradient(var(--spot-solid, var(--spot-ink)), var(--spot-solid, var(--spot-ink)));
    background-size: 100% 100%, 0% 100%;
    transition: background-size var(--spot-dur, .28s) linear,
                border-left-color var(--spot-dur, .28s) ease,
                --spot-bar-now var(--spot-dur, .28s) ease,
                box-shadow var(--spot-dur, .28s) ease;
  }
  code > span[data-spot-beat].spot-stroke.spot-on {
    background-size: 100% 100%, 100% 100%;
  }
}

@media print {
  .spot-mark { transition: none; }
  .spot-mark[data-spot-pen="1"] {
    background-color: var(--spot-pen-1-bg, rgba(255, 214, 0, .40));
  }
  .spot-mark[data-spot-pen="2"] {
    background-color: var(--spot-pen-2-bg, rgba(255, 214, 0, .40));
  }
  .spot-mark[data-spot-pen="3"] {
    background-color: var(--spot-pen-3-bg, rgba(255, 214, 0, .40));
  }
  .spot-mark[data-spot-pen="4"] {
    background-color: var(--spot-pen-4-bg, rgba(255, 214, 0, .40));
  }
}

/* ------------------------------------------------------------------------- */
/* How a mark looks (v226; Rony's ODP collection, 29-Sep). spot="... ink",   */
/* "... box", "... ring"; the default, "wash", is everything above.         */
/*                                                                           */
/*   ink   the text in the pen's colour, on no wash (four words that turn   */
/*         red, 090 #36). The tokens inside a marked line take it too.      */
/*   box   a frame, no fill (140 #6, 220 #8, 040 #14).                      */
/*   ring  the same frame, rounded into a pill (140 #6).                    */
/*                                                                           */
/* The colour is the pen's solid one, its bar (--spot-line), since a frame  */
/* or a letter in the 40% wash would be too pale to read. A frame is drawn  */
/* with box-shadows: no layout moves, and several pieces make one frame --  */
/* a text is one <mark> per token, so the top and bottom strips run through */
/* all of them and only the first and the last draw a side; a run of whole  */
/* lines works the same way, down instead of across (spot-run-first/-last,  */
/* set by spotlight.js). The frame is --spot-frame thick (2px; a skin sets  */
/* --skin-spot-frame).                                                      */
/* ------------------------------------------------------------------------- */
code > span[data-spot-pen="1"], .spot-mark[data-spot-pen="1"] { --spot-line: var(--spot-pen-1-bar, #E6B800); }
code > span[data-spot-pen="2"], .spot-mark[data-spot-pen="2"] { --spot-line: var(--spot-pen-2-bar, #E6B800); }
code > span[data-spot-pen="3"], .spot-mark[data-spot-pen="3"] { --spot-line: var(--spot-pen-3-bar, #E6B800); }
code > span[data-spot-pen="4"], .spot-mark[data-spot-pen="4"] { --spot-line: var(--spot-pen-4-bar, #E6B800); }

[data-spot-style] {
  --spot-frame: var(--skin-spot-frame, 2px);
  --spot-l: 0 0 transparent;
  --spot-r: 0 0 transparent;
  --spot-t: 0 0 transparent;
  --spot-b: 0 0 transparent;
}
.spot-mark[data-spot-style] {
  transition: background-color var(--spot-dur, .28s) ease,
              box-shadow var(--spot-dur, .28s) ease,
              color var(--spot-dur, .28s) ease;
}
code > span[data-spot-style] {
  transition: box-shadow var(--spot-dur, .28s) ease,
              color var(--spot-dur, .28s) ease;
}

/* The sides each piece draws. A text: top and bottom always, a side at each */
/* end. A run of lines: the sides always (inset: a line is the full width), */
/* the top on the first line and the bottom on the last.                    */
.spot-mark[data-spot-style="box"], .spot-mark[data-spot-style="ring"] {
  --spot-t: 0 calc(-1 * var(--spot-frame)) 0 0 var(--spot-line);
  --spot-b: 0 var(--spot-frame) 0 0 var(--spot-line);
}
.spot-mark-first[data-spot-style="box"], .spot-mark-first[data-spot-style="ring"] {
  --spot-l: calc(-1 * var(--spot-frame)) 0 0 0 var(--spot-line),
            calc(-1 * var(--spot-frame)) calc(-1 * var(--spot-frame)) 0 0 var(--spot-line),
            calc(-1 * var(--spot-frame)) var(--spot-frame) 0 0 var(--spot-line);
}
.spot-mark-last[data-spot-style="box"], .spot-mark-last[data-spot-style="ring"] {
  --spot-r: var(--spot-frame) 0 0 0 var(--spot-line),
            var(--spot-frame) calc(-1 * var(--spot-frame)) 0 0 var(--spot-line),
            var(--spot-frame) var(--spot-frame) 0 0 var(--spot-line);
}
.spot-mark-first[data-spot-style="ring"] {
  border-top-left-radius: .7em;
  border-bottom-left-radius: .7em;
}
.spot-mark-last[data-spot-style="ring"] {
  border-top-right-radius: .7em;
  border-bottom-right-radius: .7em;
}
code > span[data-spot-style="box"], code > span[data-spot-style="ring"] {
  --spot-l: inset var(--spot-frame) 0 0 0 var(--spot-line);
  --spot-r: inset calc(-1 * var(--spot-frame)) 0 0 0 var(--spot-line);
}
code > span.spot-run-first[data-spot-style="box"],
code > span.spot-run-first[data-spot-style="ring"] {
  --spot-t: inset 0 var(--spot-frame) 0 0 var(--spot-line);
}
code > span.spot-run-last[data-spot-style="box"],
code > span.spot-run-last[data-spot-style="ring"] {
  --spot-b: inset 0 calc(-1 * var(--spot-frame)) 0 0 var(--spot-line);
}
code > span.spot-run-first[data-spot-style="ring"] {
  border-top-left-radius: .7em;
  border-top-right-radius: .7em;
}
code > span.spot-run-last[data-spot-style="ring"] {
  border-bottom-left-radius: .7em;
  border-bottom-right-radius: .7em;
}

/* Lit. These come after the wash rules and weigh as much, so they win.     */
code > span[data-spot-style="ink"].spot-on,
.spot-mark[data-spot-style="ink"].spot-on {
  background-color: transparent;
  background-image: none;
  border-left-color: transparent;
  box-shadow: none;
  color: var(--spot-line);
}
code > span[data-spot-style="ink"].spot-on * { color: inherit; }

code > span[data-spot-style="box"].spot-on,
code > span[data-spot-style="ring"].spot-on,
.spot-mark[data-spot-style="box"].spot-on,
.spot-mark[data-spot-style="ring"].spot-on {
  background-color: transparent;
  background-image: none;
  border-left-color: transparent;
  box-shadow: var(--spot-l), var(--spot-r), var(--spot-t), var(--spot-b);
}

@media print {
  code > span[data-spot-style], .spot-mark[data-spot-style] { transition: none; }
  code > span[data-spot-style="ink"],
  .spot-mark[data-spot-style="ink"] {
    background-color: transparent;
    background-image: none;
    border-left-color: transparent;
    box-shadow: none;
    color: var(--spot-line);
  }
  code > span[data-spot-style="ink"]:not([data-spot-cleared]) * { color: inherit; }
  code > span[data-spot-style="box"], code > span[data-spot-style="ring"],
  .spot-mark[data-spot-style="box"], .spot-mark[data-spot-style="ring"] {
    background-color: transparent;
    background-image: none;
    border-left-color: transparent;
    box-shadow: var(--spot-l), var(--spot-r), var(--spot-t), var(--spot-b);
  }

  /* spot="... clear": what a later beat put out is out on paper too.      */
  code > span[data-spot-cleared], .spot-mark[data-spot-cleared] {
    background-color: transparent !important;
    background-image: none !important;
    border-left-color: transparent !important;
    box-shadow: none !important;
  }
  .spot-mark[data-spot-cleared][data-spot-style="ink"] { color: inherit !important; }
  code > span[data-spot-cleared][data-spot-style="ink"] { color: inherit !important; }
}

/* ------------------------------------------------------------------------- */
/* Bands that follow the indentation (v227): spot="loop:1-7 indent".         */
/*                                                                           */
/* A band is a layer of its own, laid in the <pre> by spotlight.js (layout)  */
/* from where the text of its first line begins to the right edge, UNDER    */
/* the text: the <pre> becomes a stacking context (isolation) and the band  */
/* sits at z-index -1 in it, above the <pre>'s ground and below its lines.  */
/* Each band is translucent on its own, so two that overlap add up and the  */
/* overlap is darker -- a line in two beats is no longer one wash.          */
/*                                                                           */
/* It is a .spot-mark, so its wash, its frame (box, ring), its stroke       */
/* (anim=pen), print and clear are the rules above. What is its own: the   */
/* bar on its left edge (a wash, as a marked line has), square corners, and */
/* its lines, which it only needs squared off to be measured.               */
/* ------------------------------------------------------------------------- */
.spot-layered {                /* a <pre>, or the holder of a table */
  position: relative;
  isolation: isolate;
}
code > span.spot-banded {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
}
.spot-mark.spot-band {
  position: absolute;
  z-index: -1;
  display: block;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-left: 3px solid transparent;
  border-radius: 0;
  pointer-events: none;
  transition: background-color var(--spot-dur, .28s) ease,
              background-size var(--spot-dur, .28s) linear,
              border-left-color var(--spot-dur, .28s) ease,
              box-shadow var(--spot-dur, .28s) ease;
}
.spot-band[data-spot-style="ring"] { border-radius: .7em; }
/* A frame round a band is drawn INSIDE it, as round a run of marked lines: */
/* the band reaches the right edge of the <pre>, and an outer shadow there  */
/* is cut off by the listing's scrolling box.                               */
.spot-mark.spot-band[data-spot-style="box"],
.spot-mark.spot-band[data-spot-style="ring"] {
  --spot-l: inset var(--spot-frame) 0 0 0 var(--spot-line);
  --spot-r: inset calc(-1 * var(--spot-frame)) 0 0 0 var(--spot-line);
  --spot-t: inset 0 var(--spot-frame) 0 0 var(--spot-line);
  --spot-b: inset 0 calc(-1 * var(--spot-frame)) 0 0 var(--spot-line);
}
.spot-band.spot-on:not([data-spot-style]),
.spot-band.spot-on[data-spot-style="wash"] {
  border-left-color: var(--spot-line);
}
@media print {
  .spot-mark.spot-band { transition: none; }
  .spot-band:not([data-spot-style]),
  .spot-band[data-spot-style="wash"] {
    border-left-color: var(--spot-line);
  }
}

/* ------------------------------------------------------------------------- */
/* hatch (v228; Rony's 051 #3, "highlight classes in two different ways"):  */
/* diagonal strokes of the pen's solid colour on no wash. One position per  */
/* stop: Firefox drops the two-position ones when it prints (v193).         */
/* ------------------------------------------------------------------------- */
code > span[data-spot-style="hatch"].spot-on,
.spot-mark[data-spot-style="hatch"].spot-on {
  background-color: transparent;
  border-left-color: transparent;
  box-shadow: none;
  background-image: repeating-linear-gradient(-45deg,
    var(--spot-line) 0, var(--spot-line) 2px, transparent 2px, transparent 7px);
}
@media print {
  code > span[data-spot-style="hatch"]:not([data-spot-cleared]),
  .spot-mark[data-spot-style="hatch"]:not([data-spot-cleared]) {
    background-color: transparent;
    border-left-color: transparent;
    box-shadow: none;
    background-image: repeating-linear-gradient(-45deg,
      var(--spot-line) 0, var(--spot-line) 2px, transparent 2px, transparent 7px);
  }
}

/* ------------------------------------------------------------------------- */
/* A hull (v228): one region round some nodes of a tree. The mark itself is  */
/* a point in the tree's corner; spotlight.js draws the region in its SVG,   */
/* under the nodes and their lines. wash fills it, box and ring outline it,  */
/* hatch fills it with strokes (a pattern of its own SVG). A skin may set    */
/* --skin-spot-hull-margin (how far round the nodes, 6px) and                */
/* --skin-spot-hull-radius (the corners, 10px).                              */
/* ------------------------------------------------------------------------- */
.spot-mark.spot-hull {
  --spot-hull-margin: var(--skin-spot-hull-margin, 6px);
  --spot-hull-radius: var(--skin-spot-hull-radius, 10px);
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  z-index: 0;
  pointer-events: none;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
.spot-hull svg {
  position: absolute;
  left: 0;
  top: 0;
  overflow: visible;
}
.spot-hull path {
  fill: transparent;
  stroke: transparent;
  stroke-width: var(--spot-frame, 2px);
  transition: fill var(--spot-dur, .28s) ease, stroke var(--spot-dur, .28s) ease;
}
.spot-hatch-stroke { fill: var(--spot-line); }
/* label= on the cue: the region's name, in its top left corner, in the     */
/* pen's solid colour; it comes and goes with the region.                  */
.spot-hull-label {
  fill: transparent;
  font-size: var(--skin-spot-hull-label-size, .8em);
  font-weight: 600;
  transition: fill var(--spot-dur, .28s) ease;
}
.spot-hull.spot-on .spot-hull-label { fill: var(--spot-line); }
.spot-hull.spot-on:not([data-spot-style]) path,
.spot-hull.spot-on[data-spot-style="wash"] path { fill: var(--spot-ink); }
.spot-hull.spot-on[data-spot-style="box"] path,
.spot-hull.spot-on[data-spot-style="ring"] path { stroke: var(--spot-line); }
.spot-hull.spot-on[data-spot-style="hatch"] path { fill: var(--spot-hatch); }
@media print {
  .spot-hull path { transition: none; }
  .spot-hull:not([data-spot-cleared]):not([data-spot-style]) path,
  .spot-hull:not([data-spot-cleared])[data-spot-style="wash"] path { fill: var(--spot-ink); }
  .spot-hull:not([data-spot-cleared])[data-spot-style="box"] path,
  .spot-hull:not([data-spot-cleared])[data-spot-style="ring"] path { stroke: var(--spot-line); }
  .spot-hull:not([data-spot-cleared])[data-spot-style="hatch"] path { fill: var(--spot-hatch); }
  .spot-hull:not([data-spot-cleared]) .spot-hull-label { fill: var(--spot-line); }
}

/* ------------------------------------------------------------------------- */
/* A region of a picture (v231): spot="url:@20,8,45,14 ring" on the picture. */
/* A span laid over it by spotlight.js. Its frame is a border, so a ring is  */
/* a true ellipse; wash and hatch fill it, as they fill any mark.           */
/* ------------------------------------------------------------------------- */
.spot-mark.spot-area {
  position: absolute;
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  z-index: 1;
  pointer-events: none;
  border: var(--skin-spot-area-frame, 3px) var(--skin-spot-area-line, solid) transparent;
  border-radius: 3px;
  transition: background-color var(--spot-dur, .28s) ease,
              border-color var(--spot-dur, .28s) ease;
}
.spot-mark.spot-area[data-spot-style="ring"] { border-radius: 50%; }
.spot-mark.spot-area[data-spot-style="box"].spot-on,
.spot-mark.spot-area[data-spot-style="ring"].spot-on {
  box-shadow: none;
  background-color: transparent;
  border-color: var(--spot-line);
}
@media print {
  .spot-mark.spot-area { transition: none; }
  .spot-mark.spot-area[data-spot-style="box"]:not([data-spot-cleared]),
  .spot-mark.spot-area[data-spot-style="ring"]:not([data-spot-cleared]) {
    box-shadow: none;
    background-color: transparent;
    border-color: var(--spot-line);
  }
}