/* Commonset official brand assets.
   Canonical vector geometry lives in static/brand and docs/brand/assets/v1.
   Do not redraw, regenerate, re-proportion, or alter overlap geometry. */

.brand-logo,
.auth-brand-logo,
.marketing-brand-logo,
.mini-brand-logo,
.commonset-node-logo,
.footer-brand-logo {
  display: block !important;
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Application shell */
.sidebar-brand { align-items: flex-start; }
.sidebar-brand .brand-lockup { gap: 0; }
.sidebar-brand .brand-logo { width: 142px; max-width: none; }
.mobile-brand { gap: 9px; }
.mobile-brand .brand-logo { width: 116px; max-width: none; }

/* Exact standalone icon fallback for legacy brand-mark usage. */
.brand-mark {
  width: 31px !important;
  height: 24px !important;
  flex: 0 0 31px !important;
  background: url("../brand/commonset-icon.5007ca5b0f4d.svg") center / contain no-repeat !important;
}
.brand-mark::before,
.brand-mark::after { content: none !important; }

/* Authentication */
.auth-brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.auth-brand-logo { width: 174px; max-width: none; }
.auth-brand-tagline {
  color: var(--cs-slate, #667085);
  font-size: 10px;
  letter-spacing: .035em;
}

/* Standalone marketing mark. */
.set-mark {
  width: 32px;
  height: 25px;
  display: inline-block;
  flex: 0 0 auto;
  background: url("../brand/commonset-icon.5007ca5b0f4d.svg") center / contain no-repeat !important;
}
.set-mark i { display: none !important; }
.set-mark-small {
  width: 25px;
  height: 20px;
  margin-right: 0;
  transform: none !important;
}
.set-mark-large {
  width: 64px;
  height: 50px;
  transform: none !important;
}

/* Horizontal lockups are normal image elements. No CSS background copy exists. */
.marketing-brand {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: none !important;
}
.marketing-brand-logo { width: 156px; max-width: none; }
.mini-brand-logo { width: 98px; max-width: none; }
.commonset-node-logo { width: 100px; max-width: 100%; }
.footer-brand-logo { width: 137px; max-width: none; }

/* CTA uses the same exact icon geometry, presented in white on indigo. */
.final-cta .set-mark-large {
  filter: brightness(0) invert(1);
  opacity: .92;
}