/* The Logo component (glyph + wordmark) — see Shared/Logo.razor for why this direction was chosen. */
.sd-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sd-space-2);
  color: var(--sd-text-primary);
}

.sd-logo__glyph {
  border-radius: var(--sd-radius-sm);
  flex-shrink: 0;
}

.sd-logo--sm .sd-logo__glyph { width: 20px; height: 20px; }
.sd-logo--md .sd-logo__glyph { width: 28px; height: 28px; }
.sd-logo--lg .sd-logo__glyph { width: 44px; height: 44px; }

.sd-logo__word {
  font-family: var(--sd-font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.sd-logo--sm .sd-logo__word { font-size: var(--sd-text-sm); }
.sd-logo--md .sd-logo__word { font-size: var(--sd-text-base); }
.sd-logo--lg .sd-logo__word { font-size: var(--sd-text-xl); }

.sd-logo__word-accent { color: var(--sd-accent); }

/* CoutinhoAvatar.razor — a fixed 32px in the Wire drawer/summary rows; not sized off --sd-icon-* since
   those tokens are for the linework icon set, not a portrait mark. object-fit: cover crops the square
   source photo into the circle without distorting it. */
.sd-coutinho-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--sd-radius-full);
  object-fit: cover;
  flex-shrink: 0;
}