/* Shared Compass brand mark. The glyph comes from /static/icons/logo.svg used as a
   mask, so it takes the element's `color` (white on the navy bars, any colour elsewhere).
   Size it per page with width/height (and padding when it sits inside a tile). */
.brand-logo {
  display: inline-flex;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  color: #ffffff;
  user-select: none;
}

/* Navy tile behind the glyph, for light surfaces where a bare white mark would vanish. */
.brand-logo--tile {
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0f325c 0%, #1e3a5f 100%);
  box-shadow: 0 2px 8px rgba(15, 50, 92, 0.3);
}

.brand-logo::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: url("/static/icons/logo.svg") center / contain no-repeat;
  mask: url("/static/icons/logo.svg") center / contain no-repeat;
}