/* ===========================================================================
   brand.css - the Theia Labs mark.

   GENERATED by tools/make_brand_assets.py from the geometry defined there.
   Do not hand-edit: re-run the generator instead.

   The mark is a CSS mask filled with currentColor, so it takes the colour of
   whatever it sits in and needs no separate light/dark artwork.
   ========================================================================= */

:root{
  --theia-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 286.628 390.970'%3E%3Cpolygon points='200.026,0.000 113.423,50.000 113.423,150.000 200.026,200.000 286.628,150.000 286.628,50.000' fill='%23000'/%3E%3Cpolygon points='96.103,180.000 9.500,230.000 9.500,330.000 96.103,380.000 182.705,330.000 182.705,230.000' fill='none' stroke='%23000' stroke-width='19.0'/%3E%3C/svg%3E");
}

.theia-mark{
  display: inline-block;
  height: 1em;
  aspect-ratio: 286.628 / 390.970;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-image: var(--theia-mark);
          mask-image: var(--theia-mark);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* The two portal front doors - landing page and dashboard - put a plain red
   dot beside the wordmark. That dot becomes the mark itself. Overriding the
   dot rather than editing both templates keeps the lockup in one place. */
.brand-mark .dot{
  width: auto;
  height: 22px;
  aspect-ratio: 286.628 / 390.970;
  border-radius: 0;
  box-shadow: none;
  background: currentColor;
  -webkit-mask-image: var(--theia-mark);
          mask-image: var(--theia-mark);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* Sign-in / sign-up / admin shell: the mark sits above the wordmark. */
.auth-mark{
  display: block;
  height: 54px;
  margin: 0 auto 18px;
  color: var(--laser-cyan, #00ffff);
  filter: drop-shadow(0 0 26px rgba(0, 255, 255, .45));
}

/* Mobile navigation drawer header. */
.rwd-drawer-head .theia-mark{
  height: 18px;
  margin-right: 8px;
  color: #e9edf4;
}

@media (max-width: 767px){
  .brand-mark .dot{ height: 18px; }
  .auth-mark{ height: 42px; margin-bottom: 14px; }
}