/* The Ordo mark, drawn in code (the same drawing as assets/ordo-mark.svg,
   which scripts/brand-icons.mjs turns into the favicons and app icons):
   a dark green ring, two solid mint squares on it, and a see-through mint
   where they reach into the ring's hole. No image file to load. */
.brand-mark,
.logo::before {
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 256 256%22%3E%3Cdefs%3E%3CclipPath id=%22o-disc%22%3E%3Ccircle cx=%22128%22 cy=%22128%22 r=%22128%22/%3E%3C/clipPath%3E%3CclipPath id=%22o-hole%22%3E%3Ccircle cx=%22128%22 cy=%22128%22 r=%2273%22/%3E%3C/clipPath%3E%3Cmask id=%22o-ring%22 maskUnits=%22userSpaceOnUse%22 x=%220%22 y=%220%22 width=%22256%22 height=%22256%22%3E%3Crect width=%22256%22 height=%22256%22 fill=%22%23fff%22/%3E%3Ccircle cx=%22128%22 cy=%22128%22 r=%2273%22 fill=%22%23000%22/%3E%3C/mask%3E%3ClinearGradient id=%22o-fade-a%22 gradientUnits=%22userSpaceOnUse%22 x1=%2257%22 y1=%22136%22 x2=%2292%22 y2=%2259%22%3E%3Cstop offset=%220%22 stop-color=%22%2336ecca%22 stop-opacity=%22.55%22/%3E%3Cstop offset=%221%22 stop-color=%22%2336ecca%22 stop-opacity=%221%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22o-fade-b%22 gradientUnits=%22userSpaceOnUse%22 x1=%22132%22 y1=%22202%22 x2=%22198%22 y2=%22156%22%3E%3Cstop offset=%220%22 stop-color=%22%2336ecca%22 stop-opacity=%22.3%22/%3E%3Cstop offset=%221%22 stop-color=%22%2336ecca%22 stop-opacity=%22.85%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg clip-path=%22url(%23o-disc)%22%3E%3Cg mask=%22url(%23o-ring)%22%3E%3Crect width=%22256%22 height=%22256%22 fill=%22%231c3736%22/%3E%3Crect x=%220%22 y=%2259%22 width=%2292%22 height=%2277%22 fill=%22%2336ecca%22/%3E%3Crect x=%22150%22 y=%22156%22 width=%2248%22 height=%22100%22 fill=%22%2336ecca%22/%3E%3C/g%3E%3Cg clip-path=%22url(%23o-hole)%22%3E%3Crect x=%220%22 y=%2259%22 width=%2292%22 height=%2277%22 fill=%22url(%23o-fade-a)%22/%3E%3Crect x=%22132%22 y=%22156%22 width=%2266%22 height=%22100%22 fill=%22url(%23o-fade-b)%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.brand-mark {
  display: inline-block;
  width: 26px;
  height: 26px;
  flex: none;
  vertical-align: middle;
}
.preview-message .brand-mark { width: 18px; height: 18px; }
.login-card .brand { display: inline-flex; align-items: center; gap: 8px; }
.login-card .brand-mark { width: 32px; height: 32px; }
html.dark-theme .brand-mark { display: none; }