/* The eighteen traced glyphs (spec section 5), shared by plain view and the section below the film.
 * They were drawn for plain view first; the "Explore more" pass in section 6 wanted the film's page to
 * carry the app's own sense of order too, and two copies of the same eighteen rules is one copy too many.
 *
 * They are single-colour, so they ride as a mask and take whatever colour the rule sets rather than
 * whatever the file says. An <img> would freeze each one at its own fill, and the same glyph has to work
 * as a heading mark, as a divider and against the page's own violet. */
.ico {
  flex: none; width: 22px; height: 22px; background: var(--mark-peri);
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
/* The orbs draw the heavier twins (Plan 13 spec 3.1, scripts/embolden-icons.mjs): the same class, plus .bold. */
.ico.bold { -webkit-mask-image: var(--ico-bold); mask-image: var(--ico-bold); }
.ico-book { --ico: url('../icons/book.svg'); --ico-bold: url('../icons/bold/book.svg'); }
.ico-gem { --ico: url('../icons/gem.svg'); --ico-bold: url('../icons/bold/gem.svg'); }
.ico-keep { --ico: url('../icons/keep.svg'); --ico-bold: url('../icons/bold/keep.svg'); }
.ico-local { --ico: url('../icons/local.svg'); --ico-bold: url('../icons/bold/local.svg'); }
.ico-mist { --ico: url('../icons/mist.svg'); --ico-bold: url('../icons/bold/mist.svg'); }
.ico-next { --ico: url('../icons/next.svg'); --ico-bold: url('../icons/bold/next.svg'); }
.ico-north { --ico: url('../icons/north.svg'); --ico-bold: url('../icons/bold/north.svg'); }
.ico-now { --ico: url('../icons/now.svg'); --ico-bold: url('../icons/bold/now.svg'); }
.ico-own { --ico: url('../icons/own.svg'); --ico-bold: url('../icons/bold/own.svg'); }
.ico-plan { --ico: url('../icons/plan.svg'); --ico-bold: url('../icons/bold/plan.svg'); }
.ico-platforms { --ico: url('../icons/platforms.svg'); --ico-bold: url('../icons/bold/platforms.svg'); }
.ico-scroll { --ico: url('../icons/scroll.svg'); --ico-bold: url('../icons/bold/scroll.svg'); }
.ico-seal { --ico: url('../icons/seal.svg'); --ico-bold: url('../icons/bold/seal.svg'); }
.ico-spark { --ico: url('../icons/spark.svg'); --ico-bold: url('../icons/bold/spark.svg'); }
.ico-time { --ico: url('../icons/time.svg'); --ico-bold: url('../icons/bold/time.svg'); }
.ico-tree { --ico: url('../icons/tree.svg'); --ico-bold: url('../icons/bold/tree.svg'); }
.ico-world { --ico: url('../icons/world.svg'); --ico-bold: url('../icons/bold/world.svg'); }
.ico-write { --ico: url('../icons/write.svg'); --ico-bold: url('../icons/bold/write.svg'); }