:root {
  --md-text-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Slightly roomier prose for long lore entries */
.md-typeset {
  line-height: var(--wd-leading);
}

/* ---------------------------------------------------------------------------
   Wikidot layout cells, preserved as cards.

   The original wiki built page layout from [[table]]/[[row]]/[[cell]] with a
   hard-coded pale background. That colour is reproduced from theme variables
   instead, so the cards work in dark mode as well as light.
   --------------------------------------------------------------------------- */

.wd-row {
  display: grid;
  gap: var(--wd-gap);
  /* Centred, and no wider than it needs to be. --wd-rw carries the width the
     table asked for in the source - 107 of them ask for 66.7% - and the
     fallback keeps undeclared rows from running the full width of the page. */
  max-width: var(--wd-rw, var(--wd-row-width));
  margin: var(--wd-row-gap-y) auto;
  grid-template-columns: 1fr;      /* stacked by default: phones first */
  /* Grid items stretch to the row's height by default, so a short sidebar was
     drawn down to match the column beside it and ended in a long empty box.
     Each cell is now only as tall as what is in it. */
  align-items: start;
}

@media screen and (min-width: 60em) {
  .wd-row {
    /* --wd-cols carries the original cell widths, e.g. "25fr 75fr". */
    grid-template-columns: var(--wd-cols, 1fr);
  }
}

.wd-cell {
  border: var(--wd-line) solid var(--md-default-fg-color--lightest);
  background-color: var(--md-default-fg-color--lightest);
  background-color: color-mix(in srgb, var(--md-default-fg-color--lightest) 35%, transparent);
  border-radius: var(--wd-radius);
  padding: var(--wd-pad-y) var(--wd-pad-x);
  min-width: 0;                    /* let wide content shrink, not overflow */
}

/* A card should not open with a gap, nor end with one. */
.wd-cell > :first-child { margin-top: 0; }
.wd-cell > :last-child { margin-bottom: 0; }

/* Headings inside a card are panel titles, not page sections. */
.wd-cell h1,
.wd-cell h2 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 .6rem;
  padding: 0;
  border: none;
}

/* Wide content inside a card scrolls itself rather than running off the page.
   Material already wraps tables in .md-typeset__scrollwrap; overriding the
   table's own display broke that wrapper, so the 12-column saving-throw table
   rendered 1136px wide on a 375px screen with no way to reach the far end.
   Let the wrapper do its job and make sure it can shrink. */
.wd-cell .md-typeset__scrollwrap {
  overflow-x: auto;
  max-width: 100%;
}

.wd-cell .md-typeset__table { min-width: 0; }

/* A cell holding only a table: keep its place in the row, drop the box, so a
   bordered table is not wrapped in a second border. */
.wd-cell.wd-plain {
  border: none;
  background: none;
  padding: 0;
}

/* Sidebar cells: Wikidot's proportions are too cramped at this text size, so
   a narrow column gets twice the share (set in the converter) and a smaller
   font to keep the line length readable. */
.wd-cell.wd-aside {
  font-size: var(--wd-text-aside);
  line-height: var(--wd-leading-aside);
}

/* Column layouts that lived inside a cell - [[div style="float:left; width:33%"]].
   Floats reproduce the original behaviour; they collapse to full width on a
   phone, where three columns of index would be unreadable. */
.wd-col {
  float: left;
  width: var(--wd-w, 100%);
  box-sizing: border-box;
  padding-right: 1.2rem;
}

.wd-col--right { float: right; padding-right: 0; padding-left: 1.2rem; }

.wd-col--boxed {
  border: var(--wd-line) solid var(--md-default-fg-color--lightest);
  border-radius: var(--wd-radius);
  padding: .8rem var(--wd-space-4);
  margin: 0 0 1rem;
}

/* Floated columns must not escape the card that holds them. */
.wd-cell::after,
.wd-row::after { content: ""; display: block; clear: both; }

@media screen and (max-width: 60em) {
  .wd-col,
  .wd-col--right { float: none; width: 100%; padding: 0; }
}

/* ---------------------------------------------------------------------------
   Type scale.

   Material sizes the whole theme in rem off a 125% root (20px), so scaling the
   root scales body copy, headings, navigation and sidebars together instead of
   leaving them at their old sizes while body text shrinks under them.

   Sized to match the old Wikidot site, measured at 1920px: its reading text
   was 14.43px (13.12px base, with 110% on its content cells) and its line
   height 19.68px. 112.75% of a 16px default gives an 18.04px root, which
   puts Material's .8rem body copy at 14.43px. A percentage rather than a px value,
   so a reader who has raised their browser's default font size still gets a
   correspondingly larger site.

   Note on units: CSS points are not document points - "10pt" resolves to
   13.3px, larger than this. Pixels are meant throughout.
   --------------------------------------------------------------------------- */

:root {
  font-size: var(--wd-root-scale);
}

/* ---------------------------------------------------------------------------
   Page width.

   Wikidot gave content 1402px at a 1600px viewport; Material caps .md-grid at
   61rem and then spends 218px each on the nav and the table of contents,
   leaving 621px. Two-column layouts were being squeezed into under half the
   room they were designed for.
   --------------------------------------------------------------------------- */

/* Wide enough for the nav plus a card column, and no wider, so the two sit
   together as a pair in the middle of the screen instead of the nav being
   pinned to the far edge with dead space between it and the content. */
.md-grid {
  max-width: var(--wd-page-width);
}

/* The nav rides alongside the body: it stays put while the page scrolls, and
   ends where the cards begin. Material already makes the sidebar sticky; this
   pins it to the full height so it does not drift out of view on long pages. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    position: sticky;
    top: 0;
    /* Ends where the links end. A fixed 100vh drew the sidebar's full height
       down the page past the last item. */
    height: fit-content;
    max-height: 100vh;
    overflow-y: auto;
    padding-top: 1.2rem;
  }

  /* Material makes this wrapper the scroll container. Once the nav got its
     own bordered panel, the panel's padding and border pushed the content 7px
     past the wrapper and it grew a scrollbar of its own - on a menu of twelve
     items with the whole viewport to spare. The wrapper stops scrolling; the
     sidebar above it already scrolls if the menu is ever genuinely too tall
     for the window. */
  .md-sidebar--primary .md-sidebar__scrollwrap {
    height: auto;
    overflow: visible;
  }
}

/* The right-hand table of contents duplicates what the page already shows and
   costs a fifth of the width. Headings remain linkable by anchor.
   !important because Material sets display on this element at its own
   breakpoint, and that rule is otherwise the one that wins. */
.md-sidebar--secondary {
  display: none !important;
}

/* ---------------------------------------------------------------------------
   Card weight.

   The originals were a solid grey border on #F6F9F6 - each panel read as a
   discrete box. At 12% and 4% opacity the structure of a page was invisible.
   --------------------------------------------------------------------------- */

.wd-cell {
  border-color: var(--md-default-fg-color--light);
  background-color: color-mix(in srgb, var(--md-default-fg-color--lightest) 85%, transparent);
}

/* Headings: Wikidot's were larger and normal weight, with a light rule under
   them, rather than smaller and bold. */
.wd-cell h1,
.wd-cell h2 {
  font-size: var(--wd-text-panel-title);
  font-weight: var(--wd-weight-panel-title);
}

/* A rule under the panel title only. Sub-headings inside a card are not
   section breaks and should not be underlined. */
.wd-cell h1 {
  padding-bottom: .25rem;
  border-bottom: var(--wd-line) solid var(--md-default-fg-color--lighter);
}

.wd-cell h2,
.wd-cell h3 {
  border-bottom: none;
  padding-bottom: 0;
}

/* The page's own name, on a card of its own above everything else. It is the
   one heading on a page that names the whole of it rather than a section, so
   it is the one heading that is allowed to be large. No rule under it: the
   card's edge is already the line, and a second one directly above it read as
   a mistake. */
.wd-title h1 {
  font-size: var(--wd-text-page-title);
  text-align: center;
  line-height: 1.15;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Page flags
   --------------------------------------------------------------------------- */

.wd-flag {
  border: var(--wd-line) solid var(--md-default-fg-color--light);
  border-left-width: .25rem;
  border-radius: var(--wd-radius);
  padding: .8rem var(--wd-space-4);
  margin: 0 0 1.4rem;
}

.wd-flag > :first-child { margin-top: 0; }
.wd-flag > :last-child { margin-bottom: 0; }

.wd-flag--wip { border-left-color: var(--wd-flag-wip); }
.wd-flag--archived { border-left-color: var(--md-default-fg-color--light); }

/* The sign is a 1300px image; it is a marker, not an illustration. */
.wd-flag--wip img {
  display: block;
  max-width: 220px;
  margin: 0 auto .6rem;
}


/* ---------------------------------------------------------------------------
   Mobile
   --------------------------------------------------------------------------- */

@media screen and (max-width: 60em) {
  /* A sidebar on a phone is not beside anything: it is the next card in the
     column. The smaller type only made sense as a signal of "aside from the
     text you are reading", which stacking already conveys. */
  .wd-cell.wd-aside {
    font-size: 1em;
  }

  /* Media cells lose their box on desktop because they sit inside a card that
     already has one. Stacked, they are the whole width and read as unfinished
     without it. */
  .wd-cell.wd-plain {
    border: var(--wd-line) solid var(--md-default-fg-color--light);
    background-color: color-mix(in srgb, var(--md-default-fg-color--lightest) 85%, transparent);
    padding: .7rem;
  }

  /* Tighter gutters: at 375px every pixel of reading width counts. */
  .wd-cell { padding: var(--wd-pad-y-sm) var(--wd-pad-x-sm); }
  .wd-row { gap: var(--wd-gap-sm); margin: var(--wd-row-gap-y-sm) auto; }

  /* The flag images are signage, not illustration - smaller on a phone. */
  .wd-flag--wip img { max-width: 160px; }

  /* Material sets table text at .64rem, which buys density on a wide screen.
     A phone has no density to win - the table scrolls sideways whatever size
     it is set at - and .64rem measured 11.5px here, with the notes under the
     tables at 9.5px. Both are below what anyone should be asked to read on a
     phone, and the saving throw tables are exactly the thing a reader looks up
     at the table rather than at a desk. */
  .md-typeset table:not([class]) { font-size: var(--wd-text-table-sm); }
}

/* ---------------------------------------------------------------------------
   Balanced columns.

   The wiki floated two or three divs side by side and split the content
   between them by hand, so a long entry on the right left the left column
   ending halfway up the card. A real multi-column flow balances the heights,
   and because it fills the first column before the second, the weight falls
   to the left.
   --------------------------------------------------------------------------- */

.wd-cols {
  columns: var(--wd-n, 2);
  column-gap: 1.8rem;
  margin: .4rem 0 1rem;
}

.wd-cols > :first-child { margin-top: 0; }

/* A heading must not be left stranded at the foot of a column. */
.wd-cols h1,
.wd-cols h2,
.wd-cols h3 {
  break-after: avoid;
  break-inside: avoid;
}

.wd-cols table,
.wd-cols img { break-inside: avoid; }

@media screen and (max-width: 60em) {
  .wd-cols { columns: 1; }
}

/* ---------------------------------------------------------------------------
   The navigation gets a container of its own, so it reads as a panel beside
   the content rather than links floating on the page background.
   --------------------------------------------------------------------------- */

@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav--primary {
    border: var(--wd-line) solid var(--md-default-fg-color--light);
    background-color: color-mix(in srgb, var(--md-default-fg-color--lightest) 85%, transparent);
    border-radius: var(--wd-radius);
    padding: var(--wd-space-3) var(--wd-space-2);
  }

  /* The panel does not need to be told whose wiki it is. The bar above it
     already says so, and says it as a link home. On a phone this same element
     is the drawer's own header - the coloured band with the logo, and the tap
     that closes the drawer - so it is only taken away here, where it is a
     spare line above the menu. */
  .md-sidebar--primary .md-nav__title { display: none; }
}

/* ---------------------------------------------------------------------------
   Card surface: parchment by day, slate by night.

   Defined as tokens rather than on each rule, so the cards, the page flags and
   the navigation panel all take the same surface and only have to be changed
   in one place. Material sets data-md-color-scheme on <body>, so both schemes
   are declared explicitly rather than leaning on prefers-color-scheme - the
   theme's own toggle has to win.
   --------------------------------------------------------------------------- */


.wd-cell {
  background-color: var(--wd-surface);
  background-image: var(--wd-surface-grain);
  border-color: var(--wd-surface-edge);
  color: var(--wd-surface-ink);
}

/* A media cell has no box, so it must not carry the surface either. */
.wd-cell.wd-plain {
  background-color: transparent;
  background-image: none;
  color: inherit;
}

.wd-cell h1 { border-bottom-color: var(--wd-surface-rule); }

/* Tables sit on the same sheet; the default striping fights parchment. */
.wd-cell .md-typeset table:not([class]) {
  background-color: transparent;
  border-color: var(--wd-surface-edge);
}

.wd-cell .md-typeset table:not([class]) th {
  background-color: color-mix(in srgb, var(--wd-surface-edge) 30%, transparent);
  color: var(--wd-surface-ink);
}

.wd-flag {
  background-color: var(--wd-surface);
  background-image: var(--wd-surface-grain);
  border-color: var(--wd-surface-edge);
  color: var(--wd-surface-ink);
}

@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav--primary {
    background-color: var(--wd-surface);
    background-image: var(--wd-surface-grain);
    border-color: var(--wd-surface-edge);
  }

  [data-md-color-scheme="default"] .md-sidebar--primary .md-nav__link {
    color: var(--wd-surface-ink);
  }
}

/* On a phone the stacked media cells get a box back, so they need the sheet. */
@media screen and (max-width: 60em) {
  .wd-cell.wd-plain {
    background-color: var(--wd-surface);
    background-image: var(--wd-surface-grain);
    border-color: var(--wd-surface-edge);
  }
}

/* ---------------------------------------------------------------------------
   Primary colour.

   Material's palette option only takes named colours, so the hex is set here
   and the config asks for "custom". The lighter and darker variants are the
   same hue - Material uses them for hover states and the header shadow, and
   leaving them unset would fall back to the previous purple.
   --------------------------------------------------------------------------- */

[data-md-color-primary="custom"] {
  --md-primary-fg-color:        var(--wd-accent);
  --md-primary-fg-color--light: var(--wd-accent-light);
  --md-primary-fg-color--dark:  var(--wd-accent-dark);
  --md-primary-bg-color:        var(--wd-accent-on);
  --md-primary-bg-color--light: rgba(255, 255, 255, .7);
}

/* The typeset accent (links, active nav item) tracks the header rather than
   being left on the old hue. On parchment the lighter variant is too pale to
   read, so the light scheme takes the darker one. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--wd-surface-link);
}

[data-md-color-scheme="slate"] {
  --md-typeset-a-color: var(--wd-accent-light);
}


/* ---------------------------------------------------------------------------
   The wiki's name in the header, which is a link home - see hooks/homelink.py.

   It should not announce itself as a link: the header is not running text, and
   underlining the site name would be the only underline on the bar. It reads
   as it always did and dims on hover, which is how Material's own header
   buttons behave.
   --------------------------------------------------------------------------- */

.md-header__title .wd-home {
  color: inherit;
  text-decoration: none;
  transition: opacity 125ms;
}

.md-header__title .wd-home:hover,
.md-header__title .wd-home:focus-visible { opacity: .7; }


/* ---------------------------------------------------------------------------
   Spell cards

   A spell or psionic power written as a stat block. Wikidot gave the ones on
   their own page a panel of their own - measured on the live wiki: a quarter
   of the page wide, 1px solid grey on #F6F9F6, 10px of padding, and text at
   110% (14.43px inside a 13.12px page). Stat blocks written into a wider page
   got the plain cell instead, so the size here is relative: a spell card is
   1.1x whatever surrounds it, exactly as the original's 110% was.

   The surface follows the parchment and slate sheets rather than the original
   #F6F9F6, which was near-white on a white wiki and would read as a hole cut
   in the parchment. It is a lighter, cooler sheet than the card it sits on.
   --------------------------------------------------------------------------- */

.wd-spell {
  font-size: var(--wd-text-spell);
  border: var(--wd-line) solid var(--wd-spell-edge);
  background-color: var(--wd-spell-surface);
  border-radius: var(--wd-radius);
  padding: .8rem var(--wd-space-4);
  margin: 1.2rem 0;
}

/* When the block is the whole card, it is the card - not a box inside one. */
.wd-cell.wd-spell {
  margin: 0;
  background-image: none;
}

.wd-spell > :first-child { margin-top: 0; }
.wd-spell > :last-child { margin-bottom: 0; }

/* The category label. Kept out of the Markdown so it cannot be edited into
   the wrong thing, and so a page's text stays the page's text. */
.wd-spell::before {
  content: attr(data-wd-kind);
  display: block;
  font-size: var(--wd-text-tag);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--wd-spell-tag);
  margin-bottom: .5rem;
}

/* The spell's name. Bold, no rule under it, and the same whether the page
   wrote it as a heading or as a bold line. */
.wd-spell h2,
.wd-spell h3,
.wd-spell h4 {
  font-size: 1.15em;
  font-weight: 700;
  margin: 0 0 .15rem;
  padding: 0;
  border: none;
}

/* School line, and the stat block under it. */
.wd-spell h2 + p,
.wd-spell h3 + p,
.wd-spell h4 + p { margin-top: 0; }

.wd-spell p { margin: .6rem 0; }

/* A sidebar sets its own text size; the spell card is a notch above it, the
   same relationship it has to body text elsewhere. */
.wd-cell.wd-aside.wd-spell { font-size: var(--wd-text-aside-spell); }


@media screen and (max-width: 60em) {
  .wd-spell { padding: var(--wd-pad-y-sm) var(--wd-pad-x-sm); }
}


/* ---------------------------------------------------------------------------
   The sky

   A procedural starfield behind the page - see javascripts/starfield.js. The
   canvases are painted there; everything here is placement, and the ground
   colour they sit on.

   Fixed rather than scrolled: the layers move themselves, at three different
   rates, and a fixed element gives them a stable frame to move within.
   --------------------------------------------------------------------------- */

.wd-sky {
  position: fixed;
  inset: 0;
  z-index: var(--wd-layer-sky);
  overflow: hidden;
  pointer-events: none;
  background: var(--wd-sky-ground);
}

.wd-sky canvas {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

/* The comet layer sits on top of the stars and does not move as a whole - it
   is cleared and repainted each frame, so it must not be given a transform. */
.wd-sky__comets {
  transform: none !important;
  z-index: 1;
}

/* Nothing needs lifting above the sky, because the sky is below the page
   rather than the page above the sky - see --wd-layer-sky in tokens.css for
   why that is not the same thing. Material's containers keep the positioning
   it gives them, and the drawer, the overlay behind it and the header all
   stack the way Material intends. */

/* The root takes the deepest of the sky's three colours, so the page is
   already dark while it is still loading and there is nothing to show through
   from underneath. The sky itself paints the gradient over this. */
html { background-color: var(--wd-sky-far); }

/* One sky, both themes. It is the same space either way - day and night are a
   property of the paper you are reading, not of what is outside the window -
   so the ground is declared once, on :root, and neither scheme overrides it.
   Deep space is not black: a very dark blue keeps the nebulae and the dimmest
   stars visible instead of clipping them to the background. */

/* Material paints its own background on these; both must give way or the sky
   is covered by an opaque sheet. */
body,
.md-main { background-color: transparent; }

/* Text on the sky. Scoped to the content area so the header and the nav panel,
   which have surfaces of their own, are untouched. The cards override this
   with their own ink - that override is the only thing day and night change. */
.md-content__inner,
.md-content__inner .md-typeset { color: var(--wd-sky-ink); }

.md-content__inner h1,
.md-content__inner h2,
.md-content__inner h3,
.md-content__inner h4 { color: var(--wd-sky-ink); }

.md-content__inner em { color: var(--wd-sky-ink-dim); }

.md-content__inner a:not(.md-button) { color: var(--wd-sky-link); }

/* Inside a card the ink is the card's, not the sky's. */
.wd-cell,
.wd-cell .md-typeset,
.wd-cell h1,
.wd-cell h2,
.wd-cell h3,
.wd-cell h4 { color: var(--wd-surface-ink); }

[data-md-color-scheme="default"] .wd-cell em { color: var(--wd-surface-ink-dim); }
[data-md-color-scheme="slate"] .wd-cell em { color: var(--wd-sky-ink-dim); }

[data-md-color-scheme="default"] .wd-cell a:not(.md-button) { color: var(--wd-surface-link); }
[data-md-color-scheme="slate"] .wd-cell a:not(.md-button) { color: var(--wd-sky-link); }

/* A media cell has no box, so its caption is on the sky like any other loose
   text and must not take the card's ink. */
.wd-cell.wd-plain,
.wd-cell.wd-plain em { color: var(--wd-sky-ink-dim); }

/* With a sky behind them the cards must be opaque, or the stars show through
   the text. They were already solid; this makes it a requirement rather than
   a coincidence. */
.wd-cell:not(.wd-plain) { background-blend-mode: normal; }


/* ---------------------------------------------------------------------------
   Table notes

   A note that belongs to the table above it, moved into the table as a cell
   across its foot by hooks/tablenotes.py. Styled as part of the table rather
   than as a paragraph: the same border and surface, smaller and quieter, so it
   reads as an annotation on the data and not as the next thing to read.
   --------------------------------------------------------------------------- */

.md-typeset td.wd-table-note {
  font-size: var(--wd-text-note);
  line-height: var(--wd-leading);
  padding: var(--wd-space-2) var(--wd-space-3);
  border-top: var(--wd-line) solid var(--wd-surface-edge);
  background-color: color-mix(in srgb, var(--wd-surface-edge) 18%, transparent);
  color: inherit;
  opacity: .85;
}

/* Anything still marked as a note but not moved - a note with no table above
   it - should not look like body copy either. */
.md-typeset p.wd-table-note {
  font-size: var(--wd-text-note);
  opacity: .85;
}

/* ---------------------------------------------------------------------------
   The work-in-progress sign

   The wiki's own under-construction image, hung at the foot of a page that is
   still being written. Deliberately without a card: it is a note about the
   page's state rather than part of the article, so it hangs on the background
   below everything else rather than presenting itself as a section.
   --------------------------------------------------------------------------- */

.wd-wip {
  margin: var(--wd-space-6) auto var(--wd-space-2);
  text-align: center;
}

.wd-wip img {
  display: inline-block;
  max-width: var(--wd-sign-width);
  width: 100%;
  height: auto;
  /* No box, so the sign has to sit on the sky on its own terms. */
  opacity: .9;
  filter: drop-shadow(var(--wd-shadow-sign));
}

@media screen and (max-width: 60em) {
  .wd-wip img { max-width: var(--wd-sign-width-sm); }
}


/* ---------------------------------------------------------------------------
   The page's date markers

   Material prints the "last update" and "created" facts in a translucent black
   inherited from its light theme. On the sky that measured 1.05:1 - black on
   near-black, effectively invisible. They take the sky's dim ink, and the
   outline so they stay legible wherever a nebula or a bright star passes
   behind them.
   --------------------------------------------------------------------------- */

.md-source-file,
.md-source-file__fact,
.md-content__inner .md-source-file,
.md-content__inner .md-source-file__fact {
  color: var(--wd-sky-ink-dim);
  text-shadow: var(--wd-outline-sky);
}

/* The little clock and pencil are SVG, so they take a drop-shadow rather than
   a text-shadow, and their fill has to follow the text or they stay black. */
.md-source-file .md-icon svg,
.md-source-file__fact svg {
  fill: currentColor;
  filter: drop-shadow(0 0 2px var(--wd-sky-far))
          drop-shadow(0 1px 1px var(--wd-sky-far));
}


/* ---------------------------------------------------------------------------
   Search highlighting

   Arriving from a search result, Material wraps every match on the page in
   <mark data-md-highlight>. That is useful for a moment - it shows you where
   the word you searched for actually is - and then it is in the way: the page
   stays striped for as long as you read it, and for the rest of the visit if
   you scroll back to it.

   So the highlight holds, then fades out and stays gone. No script: the mark
   elements are still in the page, they just stop being marked. Highlighting
   from any other source - a <mark> written into the text - is untouched,
   because only Material's own attribute is selected.
   --------------------------------------------------------------------------- */

.md-typeset mark[data-md-highlight] {
  animation: wd-highlight var(--wd-highlight-fade) ease-in var(--wd-highlight-hold) forwards;
}

@keyframes wd-highlight {
  from { background-color: var(--md-typeset-mark-color); }
  to   { background-color: transparent; }
}

/* Someone who has asked for less movement still wants the highlight to go;
   it just goes without the fade. */
@media (prefers-reduced-motion: reduce) {
  .md-typeset mark[data-md-highlight] {
    animation: wd-highlight 1ms linear var(--wd-highlight-hold) forwards;
  }
}