/*
 * The Cite logo for the operator pages, written once.
 *
 * /vendor, /console and /admin were forked off a shared stylesheet, and each
 * kept its own brand-mark rule: a 15px circle filled with the accent green. So
 * the business-facing pages were the only ones not showing the logo. The
 * geometry here is copied from `.mark` in styles.css, which is the same as the
 * app icon: the ring with its gap, the disc and the three ticks.
 *
 * One file rather than a copy in each page's stylesheet, because three copies
 * of a logo is exactly how the dot happened. `operator-mark.test.mjs` fails if
 * a page stylesheet carries its own again.
 *
 * One class rather than three, since /door joined the other three in the
 * shared shell and all four now draw the mark from the same markup.
 *
 * Drawn with a mask over currentColor, as on the marketing site, so the mark
 * takes the colour of the name beside it. Kept at 20px: below that, the note
 * in styles.css says, the ring, the disc and the ticks silt up into one blob.
 */
.v-mark {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M62.69 1.64A50.00 50.00 0 1 0 62.69 98.36L60.55 90.21A41.57 41.57 0 1 1 60.55 9.79Z' fill='%23fff'/%3E%3Ccircle cx='50' cy='50' r='30.63' fill='%23fff'/%3E%3Cpolygon points='82.10,12.21 87.79,17.90 82.10,23.59 76.41,17.90' fill='%23fff'/%3E%3Cpolygon points='82.10,76.41 87.79,82.10 82.10,87.79 76.41,82.10' fill='%23fff'/%3E%3Crect x='91.08' y='45.68' width='8.64' height='8.64' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M62.69 1.64A50.00 50.00 0 1 0 62.69 98.36L60.55 90.21A41.57 41.57 0 1 1 60.55 9.79Z' fill='%23fff'/%3E%3Ccircle cx='50' cy='50' r='30.63' fill='%23fff'/%3E%3Cpolygon points='82.10,12.21 87.79,17.90 82.10,23.59 76.41,17.90' fill='%23fff'/%3E%3Cpolygon points='82.10,76.41 87.79,82.10 82.10,87.79 76.41,82.10' fill='%23fff'/%3E%3Crect x='91.08' y='45.68' width='8.64' height='8.64' fill='%23fff'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The footer runs it smaller against its smaller type, as styles.css does. */
.v-foot .v-mark { width: 18px; height: 18px; }